feat: migrate TreeSelect component

src-next/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-tree-select" style="height: 300px;">
+      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">浙江
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">江苏
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">福建
+            <!---->
+          </div>
+        </a></div>
+      <div class="van-tree-select__content">
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-success van-tree-select__selected">
+            <!----></i></div>
+        <div class="van-ellipsis van-tree-select__item">温州</div>
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
+        <div class="van-ellipsis van-tree-select__item">义乌</div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-tree-select" style="height: 300px;">
+      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">浙江
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">江苏
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">福建
+            <!---->
+          </div>
+        </a></div>
+      <div class="van-tree-select__content">
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-success van-tree-select__selected">
+            <!----></i></div>
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">温州<i class="van-icon van-icon-success van-tree-select__selected">
+            <!----></i></div>
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
+        <div class="van-ellipsis van-tree-select__item">义乌</div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-tree-select" style="height: 55vw;">
+      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">分组 1
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">分组 2
+            <!---->
+          </div>
+        </a></div>
+      <div class="van-tree-select__content">
+        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img"></div>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-tree-select" style="height: 55vw;">
+      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+          <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 van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">江苏<div class="van-info van-sidebar-item__info">5</div>
+          </div>
+        </a></div>
+      <div class="van-tree-select__content">
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-success van-tree-select__selected">
+            <!----></i></div>
+        <div class="van-ellipsis van-tree-select__item">温州</div>
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
+        <div class="van-ellipsis van-tree-select__item">义乌</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src-next/tree-select/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`content slot 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+      <div class="van-sidebar-item__text">group1
+        <!---->
+      </div>
+    </a></div>
+  <div class="van-tree-select__content">Custom Content</div>
+</div>
+`;
+
+exports[`empty list 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;
+
+exports[`height prop 1`] = `
+<div class="van-tree-select" style="height: 100vh;">
+  <div class="van-sidebar van-tree-select__nav"></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;
+
+exports[`nav info 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+      <div class="van-sidebar-item__text">group1<div class="van-info van-sidebar-item__info">3</div>
+      </div>
+    </a></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;
+
+exports[`selected-icon prop 1`] = `
+<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">city1<i class="van-icon van-icon-foo van-tree-select__selected">
+    <!----></i></div>
+`;

src-next/tree-select/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

src-next/tree-select/test/index.spec.js

@@ -0,0 +1,345 @@
+import TreeSelect from '..';
+import { mount } from '../../../test';
+
+test('empty list', () => {
+  expect(mount(TreeSelect)).toMatchSnapshot();
+});
+
+const mockItem = {
+  text: 'city1',
+  id: 1,
+};
+
+const mockItem2 = {
+  text: 'city2',
+  id: 2,
+};
+
+const mockItems = [
+  {
+    text: 'group1',
+    children: [mockItem],
+  },
+  {
+    text: 'group2',
+    children: [mockItem],
+  },
+];
+
+test('click-nav event', () => {
+  const onNavClick = jest.fn();
+  const onClickNav = jest.fn();
+
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: mockItems,
+    },
+    context: {
+      on: {
+        navclick: onNavClick,
+        'click-nav': onClickNav,
+      },
+    },
+  });
+
+  const navItems = wrapper.findAll('.van-tree-select__nav-item');
+  navItems.at(1).trigger('click');
+
+  expect(onNavClick).toHaveBeenCalledWith(1);
+  expect(onClickNav).toHaveBeenCalledWith(1);
+});
+
+test('click-item event', () => {
+  const onItemClick = jest.fn();
+  const onClickItem = jest.fn();
+
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: mockItems,
+    },
+    context: {
+      on: {
+        itemclick: onItemClick,
+        'click-item': onClickItem,
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(0).trigger('click');
+  expect(onItemClick).toHaveBeenCalledWith(mockItem);
+  expect(onClickItem).toHaveBeenCalledWith(mockItem);
+});
+
+test('click disabled nav', () => {
+  const onClickNav = jest.fn();
+
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          children: [mockItem],
+          disabled: true,
+        },
+      ],
+    },
+    context: {
+      on: {
+        'click-nav': onClickNav,
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__nav-item');
+  items.at(0).trigger('click');
+  expect(onClickNav).toHaveBeenCalledTimes(0);
+});
+
+test('click disabled item', () => {
+  const onClickItem = jest.fn();
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          children: [
+            {
+              ...mockItem,
+              disabled: true,
+            },
+          ],
+        },
+      ],
+    },
+    context: {
+      on: {
+        'click-item': onClickItem,
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(0).trigger('click');
+  expect(onClickItem).toHaveBeenCalledTimes(0);
+});
+
+test('content slot', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+        },
+      ],
+    },
+    scopedSlots: {
+      content: () => 'Custom Content',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('height prop', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      height: '100vh',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('nav info', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          info: 3,
+        },
+      ],
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('use sync modifier in main-active-index', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index.sync="mainActiveIndex"
+      />
+    `,
+    data() {
+      return {
+        mainActiveIndex: -1,
+        items: mockItems,
+      };
+    },
+  });
+
+  const navItems = wrapper.findAll('.van-tree-select__nav-item');
+  navItems.at(0).trigger('click');
+
+  expect(wrapper.vm.mainActiveIndex).toEqual(0);
+});
+
+test('use sync modifier in active-id', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+      />
+    `,
+    data() {
+      return {
+        activeId: mockItem.id,
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(1).trigger('click');
+
+  expect(wrapper.vm.activeId).toEqual(mockItem2.id);
+});
+
+test('multiple select', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+      />
+    `,
+    data() {
+      return {
+        activeId: [],
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(0).trigger('click');
+  items.at(1).trigger('click');
+  expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]);
+
+  items.at(0).trigger('click');
+  items.at(1).trigger('click');
+  expect(wrapper.vm.activeId).toEqual([]);
+});
+
+test('max prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :max="1"
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+      />
+    `,
+    data() {
+      return {
+        activeId: [],
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(0).trigger('click');
+  items.at(1).trigger('click');
+  expect(wrapper.vm.activeId).toEqual([mockItem.id]);
+});
+
+test('className of nav', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      mainActiveIndex: 0,
+      items: [
+        {
+          text: 'group1',
+          className: 'my-class',
+          children: [],
+        },
+      ],
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__nav-item');
+  expect(items.at(0).element.classList.contains('my-class')).toBeTruthy();
+});
+
+test('should sync value before trigger click-item event', (done) => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+        @click-item="onClickItem"
+      />
+    `,
+    data() {
+      return {
+        activeId: mockItem.id,
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+    methods: {
+      onClickItem() {
+        expect(wrapper.vm.activeId).toEqual(mockItem2.id);
+        done();
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(1).trigger('click');
+});
+
+test('selected-icon prop', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: mockItems,
+      activeId: 1,
+      mainActiveIndex: 0,
+      selectedIcon: 'foo',
+    },
+  });
+
+  expect(wrapper.find('.van-tree-select__item')).toMatchSnapshot();
+});