feat: migrate Sidebar component

2020-07-12 15:24:05 +08:00
parent 75d76d2cec
commit 08e03e988f
11 changed files with 649 additions and 1 deletions
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div class="van-grid">
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">基础用法</h3>
+        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a></div>
+      </div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">徽标提示</h3>
+        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-info--dot van-sidebar-item__info"></div>
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">5</div>
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99+</div>
+            </div>
+          </a></div>
+      </div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">禁用选项</h3>
+        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item van-sidebar-item--disabled">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a></div>
+      </div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">监听切换事件</h3>
+        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+            <div class="van-sidebar-item__text">标签名1
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名2
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名3
+              <!---->
+            </div>
+          </a></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,78 @@
+import { mount } from '../../../test';
+import Sidebar from '..';
+
+test('click event & change event', () => {
+  const onClick = jest.fn();
+  const onChange = jest.fn();
+  const wrapper = mount({
+    template: `
+      <van-sidebar @change="onChange">
+        <van-sidebar-item>Text</van-sidebar-item>
+        <van-sidebar-item @click="onClick">Text</van-sidebar-item>
+      </van-sidebar>
+    `,
+    methods: {
+      onClick,
+      onChange,
+    },
+  });
+
+  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
+  expect(onClick).toHaveBeenCalledWith(1);
+  expect(onChange).toHaveBeenCalledWith(1);
+  wrapper.vm.$destroy();
+});
+
+test('v-model', () => {
+  const onChange = jest.fn();
+  const wrapper = mount({
+    template: `
+      <van-sidebar v-model="active" @change="onChange">
+        <van-sidebar-item>Text</van-sidebar-item>
+        <van-sidebar-item>Text</van-sidebar-item>
+      </van-sidebar>
+    `,
+    data() {
+      return {
+        active: 0,
+      };
+    },
+    methods: {
+      onChange,
+    },
+  });
+
+  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
+  expect(wrapper.vm.active).toEqual(1);
+  expect(onChange).toHaveBeenCalledWith(1);
+});
+
+test('disabled prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-sidebar v-model="active">
+        <van-sidebar-item>Text</van-sidebar-item>
+        <van-sidebar-item disabled>Text</van-sidebar-item>
+      </van-sidebar>
+    `,
+    data() {
+      return {
+        active: 0,
+      };
+    },
+  });
+
+  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
+  expect(wrapper.vm.active).toEqual(0);
+});
+
+test('without parent', () => {
+  const consoleError = console.error;
+  try {
+    console.error = jest.fn();
+    mount(Sidebar);
+  } catch (err) {
+    console.error = consoleError;
+    expect(err).toBeTruthy();
+  }
+});