From 1d1180347062b6445ff9f87ff8f02896f05dae79 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 26 Jan 2021 17:18:54 +0800 Subject: [PATCH] test(Collapse): update test cases (#8010) * test(Collapse): update test cases * chore: update order --- .../test/__snapshots__/index.legacy.js.snap | 54 ----- .../test/__snapshots__/index.spec.js.snap | 23 ++ src/collapse/test/index.legacy.js | 182 --------------- src/collapse/test/index.spec.js | 208 ++++++++++++++++++ 4 files changed, 231 insertions(+), 236 deletions(-) delete mode 100644 src/collapse/test/__snapshots__/index.legacy.js.snap create mode 100644 src/collapse/test/__snapshots__/index.spec.js.snap delete mode 100644 src/collapse/test/index.legacy.js create mode 100644 src/collapse/test/index.spec.js diff --git a/src/collapse/test/__snapshots__/index.legacy.js.snap b/src/collapse/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index a6b746978..000000000 --- a/src/collapse/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,54 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`disable border 1`] = ` -
-
- -
-
- -
-
- -
-
-`; - -exports[`lazy render collapse content 1`] = ` -
-
- -
-
-
-
b
- -
-
-
content
-
-
-
-`; - -exports[`render collapse-item slot 1`] = ` -
-
- -
-
-`; diff --git a/src/collapse/test/__snapshots__/index.spec.js.snap b/src/collapse/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..ad067f0a2 --- /dev/null +++ b/src/collapse/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render slots of CollapseItem correctly 1`] = ` +
+
+ +
+
+`; diff --git a/src/collapse/test/index.legacy.js b/src/collapse/test/index.legacy.js deleted file mode 100644 index 1f3ef5ba2..000000000 --- a/src/collapse/test/index.legacy.js +++ /dev/null @@ -1,182 +0,0 @@ -import Collapse from '..'; -import CollapseItem from '../../collapse-item'; -import { later, mount } from '../../../test'; - -const component = { - template: ` - - content - content - content - - `, - props: { - accordion: Boolean, - border: { - type: Boolean, - default: true, - }, - }, - data() { - return { - active: this.accordion ? '' : [], - }; - }, -}; - -test('basic mode', async () => { - const wrapper = mount(component); - - const titles = wrapper.findAll('.van-collapse-item__title'); - titles[0].trigger('click'); - expect(wrapper.vm.active).toEqual(['first']); - - await later(); - titles[1].trigger('click'); - expect(wrapper.vm.active).toEqual(['first', 1]); - - await later(); - titles[0].trigger('click'); - expect(wrapper.vm.active).toEqual([1]); - - wrapper.unmount(); -}); - -test('accordion', async () => { - const wrapper = mount(component, { - props: { - accordion: true, - }, - }); - - const titles = wrapper.findAll('.van-collapse-item__title'); - titles[0].trigger('click'); - expect(wrapper.vm.active).toEqual('first'); - - titles[1].trigger('click'); - expect(wrapper.vm.active).toEqual(1); - - await later(); - titles[0].trigger('click'); - expect(wrapper.vm.active).toEqual('first'); - - titles[0].trigger('click'); - expect(wrapper.vm.active).toEqual(''); -}); - -test('render collapse-item slot', () => { - const wrapper = mount({ - template: ` - - - - - - - - - `, - data() { - return { - active: [], - }; - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('disable border', () => { - const wrapper = mount(component, { - props: { - border: false, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('lazy render collapse content', async () => { - const wrapper = mount({ - template: ` - - content - {{ content }} - - `, - components: { - Collapse, - CollapseItem, - }, - data() { - return { - content: '', - active: [], - }; - }, - }); - - const titles = wrapper.findAll('.van-collapse-item__title'); - - titles[1].trigger('click'); - wrapper.vm.content = 'content'; - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('toggle method', (done) => { - mount({ - template: ` - - - - - `, - data() { - return { active: [] }; - }, - mounted() { - this.$refs.a.toggle(); - expect(this.active).toEqual(['a']); - - this.$refs.b.toggle(); - expect(this.active).toEqual(['a', 'b']); - - this.$refs.b.toggle(false); - expect(this.active).toEqual(['a']); - - this.$refs.a.toggle(); - expect(this.active).toEqual([]); - - done(); - }, - }); -}); - -test('toggle method in accordion mode', (done) => { - mount({ - template: ` - - - - - `, - data() { - return { active: '' }; - }, - mounted() { - this.$refs.a.toggle(); - expect(this.active).toEqual('a'); - - this.$refs.b.toggle(); - expect(this.active).toEqual('b'); - - this.$refs.b.toggle(false); - expect(this.active).toEqual(''); - - this.$refs.a.toggle(); - expect(this.active).toEqual('a'); - - done(); - }, - }); -}); diff --git a/src/collapse/test/index.spec.js b/src/collapse/test/index.spec.js new file mode 100644 index 000000000..cf1c55ef2 --- /dev/null +++ b/src/collapse/test/index.spec.js @@ -0,0 +1,208 @@ +import { ref } from 'vue'; +import Collapse from '..'; +import CollapseItem from '../../collapse-item'; +import { later, mount } from '../../../test'; + +const Component = { + props: { + accordion: Boolean, + border: { + type: Boolean, + default: true, + }, + }, + data() { + return { + active: this.accordion ? '' : [], + }; + }, + render() { + return ( + + + content + + content + content + + ); + }, +}; + +test('should update active value when title is clicked', async () => { + const wrapper = mount(Component); + + const titles = wrapper.findAll('.van-collapse-item__title'); + titles[0].trigger('click'); + expect(wrapper.vm.active).toEqual(['first']); + + await later(); + titles[1].trigger('click'); + expect(wrapper.vm.active).toEqual(['first', 1]); + + await later(); + titles[0].trigger('click'); + expect(wrapper.vm.active).toEqual([1]); + + wrapper.unmount(); +}); + +test('should update active value when title is clicked in accordion mode', async () => { + const wrapper = mount(Component, { + props: { + accordion: true, + }, + }); + + const titles = wrapper.findAll('.van-collapse-item__title'); + titles[0].trigger('click'); + expect(wrapper.vm.active).toEqual('first'); + + titles[1].trigger('click'); + expect(wrapper.vm.active).toEqual(1); + + titles[0].trigger('click'); + expect(wrapper.vm.active).toEqual('first'); + + await later(); + titles[0].trigger('click'); + expect(wrapper.vm.active).toEqual(''); +}); + +test('should render slots of CollapseItem correctly', () => { + const wrapper = mount({ + data() { + return { + active: [], + }; + }, + render() { + return ( + + 'this is title', + value: () => 'this is value', + icon: () => 'this is icon', + 'right-icon': () => 'this is right icon', + }} + /> + + ); + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should not render border when border prop is false', () => { + const wrapper = mount(Component, { + props: { + border: false, + }, + }); + + expect(wrapper.find('.van-hairline--top-bottom').exists()).toBeFalsy(); +}); + +test('should lazy render collapse content', async () => { + const wrapper = mount({ + data() { + return { + active: [], + }; + }, + render() { + return ( + + content + +
+ + + ); + }, + }); + + expect(wrapper.find('.foo').exists()).toBeFalsy(); + + const titles = wrapper.findAll('.van-collapse-item__title'); + await titles[1].trigger('click'); + expect(wrapper.find('.foo').exists()).toBeTruthy(); +}); + +test('should toggle collapse after calling the toggle method', async () => { + const wrapper = mount({ + setup() { + const itemA = ref(); + const itemB = ref(); + const active = ref([]); + return { + itemA, + itemB, + active, + }; + }, + render() { + return ( + + + + + ); + }, + }); + + wrapper.vm.itemA.toggle(); + expect(wrapper.vm.active).toEqual(['a']); + + await later(); + wrapper.vm.itemB.toggle(); + expect(wrapper.vm.active).toEqual(['a', 'b']); + + wrapper.vm.itemB.toggle(false); + expect(wrapper.vm.active).toEqual(['a']); + + wrapper.vm.itemA.toggle(); + expect(wrapper.vm.active).toEqual([]); +}); + +test('should toggle collapse after calling the toggle method in accordion mode', async () => { + const wrapper = mount({ + setup() { + const itemA = ref(); + const itemB = ref(); + const active = ref([]); + return { + itemA, + itemB, + active, + }; + }, + render() { + return ( + + + + + ); + }, + }); + + wrapper.vm.itemA.toggle(); + expect(wrapper.vm.active).toEqual('a'); + + wrapper.vm.itemB.toggle(); + expect(wrapper.vm.active).toEqual('b'); + + await later(); + wrapper.vm.itemB.toggle(false); + expect(wrapper.vm.active).toEqual(''); + + wrapper.vm.itemA.toggle(); + expect(wrapper.vm.active).toEqual('a'); +});