[improvement] TreeSelect: add test cases of multiple select (#4139)

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

@@ -1,26 +1,37 @@
+import Vue from 'vue';
 import TreeSelect from '..';
 import { mount } from '../../../test/utils';
 
+Vue.use(TreeSelect);
+
 test('empty list', () => {
   expect(mount(TreeSelect)).toMatchSnapshot();
 });
 
-test('click-nav event', () => {
+const mockItem = {
-  const onNavClick = jest.fn();
-  const onClickNav = jest.fn();
-  const item = {
   text: 'city1',
   id: 1
 };
 
-  const wrapper = mount(TreeSelect, {
+const mockItem2 = {
-    propsData: {
+  text: 'city2',
-      items: [
+  id: 2
+};
+
+const mockItems = [
   {
     text: 'group1',
-          children: [item]
+    children: [mockItem]
   }
-      ]
+];
+
+test('click-nav event', () => {
+  const onNavClick = jest.fn();
+  const onClickNav = jest.fn();
+
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: mockItems
     },
     context: {
       on: {
@@ -30,8 +41,9 @@ test('click-nav event', () => {
     }
   });
 
-  const items = wrapper.findAll('.van-tree-select__nav-item');
+  const navItems = wrapper.findAll('.van-tree-select__nav-item');
-  items.at(0).trigger('click');
+  navItems.at(0).trigger('click');
+
   expect(onNavClick).toHaveBeenCalledWith(0);
   expect(onClickNav).toHaveBeenCalledWith(0);
 });
@@ -39,19 +51,10 @@ test('click-nav event', () => {
 test('click-item event', () => {
   const onItemClick = jest.fn();
   const onClickItem = jest.fn();
-  const item = {
-    text: 'city1',
-    id: 1
-  };
 
   const wrapper = mount(TreeSelect, {
     propsData: {
-      items: [
+      items: mockItems
-        {
-          text: 'group1',
-          children: [item]
-        }
-      ]
     },
     context: {
       on: {
@@ -63,23 +66,19 @@ test('click-item event', () => {
 
   const items = wrapper.findAll('.van-tree-select__item');
   items.at(0).trigger('click');
-  expect(onItemClick).toHaveBeenCalledWith(item);
+  expect(onItemClick).toHaveBeenCalledWith(mockItem);
-  expect(onClickItem).toHaveBeenCalledWith(item);
+  expect(onClickItem).toHaveBeenCalledWith(mockItem);
 });
 
 test('click disabled nav', () => {
   const onClickNav = jest.fn();
-  const item = {
-    text: 'city1',
-    id: 1
-  };
 
   const wrapper = mount(TreeSelect, {
     propsData: {
       items: [
         {
           text: 'group1',
-          children: [item],
+          children: [mockItem],
           disabled: true
         }
       ]
@@ -105,8 +104,7 @@ test('click disabled item', () => {
           text: 'group1',
           children: [
             {
-              text: 'city1',
+              ...mockItem,
-              id: 1,
               disabled: true
             }
           ]
@@ -151,3 +149,87 @@ test('height prop', () => {
 
   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([]);
+});