diff --git a/src/tree-select/test/__snapshots__/index.legacy.js.snap b/src/tree-select/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 25f199302..000000000 --- a/src/tree-select/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,41 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`content slot 1`] = ` -
-
-
group1 - -
-
-
Custom Content
-
-`; - -exports[`empty list 1`] = ` -
-
-
-
-`; - -exports[`height prop 1`] = ` -
-
-
-
-`; - -exports[`nav render badge 1`] = ` -
-
-
group1
3
-
-
-
-
-`; - -exports[`selected-icon prop 1`] = ` -
city1 -
-`; diff --git a/src/tree-select/test/__snapshots__/index.spec.tsx.snap b/src/tree-select/test/__snapshots__/index.spec.tsx.snap new file mode 100644 index 000000000..d303ad1b6 --- /dev/null +++ b/src/tree-select/test/__snapshots__/index.spec.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should change selected icon when using selected-icon prop 1`] = ` +
+ city1 + + +
+`; + +exports[`should render content slot correctly 1`] = ` +
+
+ +
+ group1 +
+ +
+
+ Custom Content +
+
+`; + +exports[`should render empty TreeSelect correctly 1`] = ` +
+
+
+
+
+
+`; + +exports[`should render nav badge correctly 1`] = ` +
+
+ +
+ group1 +
+ 3 +
+
+ +
+
+
+
+`; diff --git a/src/tree-select/test/index.legacy.js b/src/tree-select/test/index.legacy.js deleted file mode 100644 index a0ac38153..000000000 --- a/src/tree-select/test/index.legacy.js +++ /dev/null @@ -1,339 +0,0 @@ -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 onClickNav = jest.fn(); - - const wrapper = mount(TreeSelect, { - props: { - items: mockItems, - }, - context: { - on: { - 'click-nav': onClickNav, - }, - }, - }); - - const navItems = wrapper.findAll('.van-tree-select__nav-item'); - navItems[1].trigger('click'); - - expect(onClickNav).toHaveBeenCalledWith(1); -}); - -test('click-item event', () => { - const onClickItem = jest.fn(); - - const wrapper = mount(TreeSelect, { - props: { - items: mockItems, - }, - context: { - on: { - 'click-item': onClickItem, - }, - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items[0].trigger('click'); - expect(onClickItem).toHaveBeenCalledWith(mockItem); -}); - -test('click disabled nav', () => { - const onClickNav = jest.fn(); - - const wrapper = mount(TreeSelect, { - props: { - items: [ - { - text: 'group1', - children: [mockItem], - disabled: true, - }, - ], - }, - context: { - on: { - 'click-nav': onClickNav, - }, - }, - }); - - const items = wrapper.findAll('.van-tree-select__nav-item'); - items[0].trigger('click'); - expect(onClickNav).toHaveBeenCalledTimes(0); -}); - -test('click disabled item', () => { - const onClickItem = jest.fn(); - const wrapper = mount(TreeSelect, { - props: { - items: [ - { - text: 'group1', - children: [ - { - ...mockItem, - disabled: true, - }, - ], - }, - ], - }, - context: { - on: { - 'click-item': onClickItem, - }, - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items[0].trigger('click'); - expect(onClickItem).toHaveBeenCalledTimes(0); -}); - -test('content slot', () => { - const wrapper = mount(TreeSelect, { - props: { - items: [ - { - text: 'group1', - }, - ], - }, - slots: { - content: () => 'Custom Content', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('height prop', () => { - const wrapper = mount(TreeSelect, { - props: { - height: '100vh', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('nav render badge', () => { - const wrapper = mount(TreeSelect, { - props: { - items: [ - { - text: 'group1', - badge: 3, - }, - ], - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('use sync modifier in main-active-index', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - mainActiveIndex: -1, - items: mockItems, - }; - }, - }); - - const navItems = wrapper.findAll('.van-tree-select__nav-item'); - navItems[0].trigger('click'); - - expect(wrapper.vm.mainActiveIndex).toEqual(0); -}); - -test('use sync modifier in active-id', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - activeId: mockItem.id, - mainActiveIndex: 0, - items: [ - { - text: 'group1', - children: [mockItem, mockItem2], - }, - ], - }; - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items[1].trigger('click'); - - expect(wrapper.vm.activeId).toEqual(mockItem2.id); -}); - -test('multiple select', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - activeId: [], - mainActiveIndex: 0, - items: [ - { - text: 'group1', - children: [mockItem, mockItem2], - }, - ], - }; - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items[0].trigger('click'); - items[1].trigger('click'); - expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]); - - items[0].trigger('click'); - items[1].trigger('click'); - expect(wrapper.vm.activeId).toEqual([]); -}); - -test('max prop', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - activeId: [], - items: [ - { - text: 'group1', - children: [mockItem, mockItem2], - }, - ], - }; - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items[0].trigger('click'); - items[1].trigger('click'); - expect(wrapper.vm.activeId).toEqual([mockItem.id]); -}); - -test('className of nav', () => { - const wrapper = mount(TreeSelect, { - props: { - mainActiveIndex: 0, - items: [ - { - text: 'group1', - className: 'my-class', - children: [], - }, - ], - }, - }); - - const items = wrapper.findAll('.van-tree-select__nav-item'); - expect(items[0].element.classList.contains('my-class')).toBeTruthy(); -}); - -test('should sync value before trigger click-item event', (done) => { - const wrapper = mount({ - template: ` - - `, - 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[1].trigger('click'); -}); - -test('selected-icon prop', () => { - const wrapper = mount(TreeSelect, { - props: { - items: mockItems, - activeId: 1, - mainActiveIndex: 0, - selectedIcon: 'foo', - }, - }); - - expect(wrapper.find('.van-tree-select__item')).toMatchSnapshot(); -}); diff --git a/src/tree-select/test/index.spec.tsx b/src/tree-select/test/index.spec.tsx new file mode 100644 index 000000000..d21e1617c --- /dev/null +++ b/src/tree-select/test/index.spec.tsx @@ -0,0 +1,232 @@ +import { TreeSelect } from '..'; +import { mount } from '../../../test'; + +const mockItem = { + text: 'city1', + id: 1, +}; + +const mockItem2 = { + text: 'city2', + id: 2, +}; + +const mockItems = [ + { + text: 'group1', + children: [mockItem], + }, + { + text: 'group2', + children: [mockItem], + }, +]; + +test('should render empty TreeSelect correctly', () => { + expect(mount(TreeSelect).html()).toMatchSnapshot(); +}); + +test('should emit click-nav event when nav item is clicked', () => { + const wrapper = mount(TreeSelect, { + props: { + items: mockItems, + }, + }); + + const navItems = wrapper.findAll('.van-tree-select__nav-item'); + navItems[1].trigger('click'); + expect(wrapper.emitted('update:mainActiveIndex')?.[0]).toEqual([1]); + expect(wrapper.emitted('click-nav')?.[0]).toEqual([1]); +}); + +test('should emit click-item event when item is clicked', () => { + const wrapper = mount(TreeSelect, { + props: { + items: mockItems, + }, + }); + + const items = wrapper.findAll('.van-tree-select__item'); + items[0].trigger('click'); + expect(wrapper.emitted('update:activeId')?.[0]).toEqual([mockItem.id]); + expect(wrapper.emitted('click-item')?.[0]).toEqual([mockItem]); +}); + +test('should not emit click-nav event when disabled nav item is clicked', () => { + const wrapper = mount(TreeSelect, { + props: { + items: [ + { + text: 'group1', + children: [mockItem], + disabled: true, + }, + ], + }, + }); + + const items = wrapper.findAll('.van-tree-select__nav-item'); + items[0].trigger('click'); + expect(wrapper.emitted('click-nav')).toBeFalsy(); +}); + +test('should not emit click-item event when disabled item is clicked', () => { + const wrapper = mount(TreeSelect, { + props: { + items: [ + { + text: 'group1', + children: [ + { + ...mockItem, + disabled: true, + }, + ], + }, + ], + }, + }); + + const items = wrapper.findAll('.van-tree-select__item'); + items[0].trigger('click'); + expect(wrapper.emitted('click-item')).toBeFalsy(); +}); + +test('should render content slot correctly', () => { + const wrapper = mount(TreeSelect, { + props: { + items: [ + { + text: 'group1', + }, + ], + }, + slots: { + content: () => 'Custom Content', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should change height when using height prop', () => { + const wrapper = mount(TreeSelect, { + props: { + height: '100vh', + }, + }); + + expect(wrapper.style.height).toEqual('100vh'); +}); + +test('should render nav badge correctly', () => { + const wrapper = mount(TreeSelect, { + props: { + items: [ + { + text: 'group1', + badge: 3, + }, + ], + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should allow to select multiple items when activeId is array', async () => { + const wrapper = mount({ + data() { + return { + activeId: [], + mainActiveIndex: 0, + items: [ + { + text: 'group1', + children: [mockItem, mockItem2], + }, + ], + }; + }, + render() { + return ( + + ); + }, + }); + + const items = wrapper.findAll('.van-tree-select__item'); + await items[0].trigger('click'); + await items[1].trigger('click'); + expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]); + + await items[0].trigger('click'); + await items[1].trigger('click'); + expect(wrapper.vm.activeId).toEqual([]); +}); + +test('should limit the selected item number when using max prop', async () => { + const wrapper = mount({ + data() { + return { + activeId: [], + items: [ + { + text: 'group1', + children: [mockItem, mockItem2], + }, + ], + }; + }, + render() { + return ( + + ); + }, + }); + + const items = wrapper.findAll('.van-tree-select__item'); + await items[0].trigger('click'); + await items[1].trigger('click'); + expect(wrapper.vm.activeId).toEqual([mockItem.id]); +}); + +test('should allow to custom nav item className', () => { + const wrapper = mount(TreeSelect, { + props: { + mainActiveIndex: 0, + items: [ + { + text: 'group1', + className: 'my-class', + children: [], + }, + ], + }, + }); + + const items = wrapper.findAll('.van-tree-select__nav-item'); + expect(items[0].classes()).toContain('my-class'); +}); + +test('should change selected icon when using selected-icon prop', () => { + const wrapper = mount(TreeSelect, { + props: { + items: mockItems, + activeId: 1, + mainActiveIndex: 0, + selectedIcon: 'foo', + }, + }); + + expect(wrapper.find('.van-tree-select__item').html()).toMatchSnapshot(); +});