From e4ab2156f1809ed14dce2cb8334deedeb1cb5f32 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Fri, 21 Jan 2022 16:44:55 +0800 Subject: [PATCH] test(Picker): update basic test cases --- .../test/__snapshots__/demo.spec.ts.snap | 325 ++------------ .../test/__snapshots__/index.spec.tsx.snap | 405 +----------------- .../test/__snapshots__/slots.spec.ts.snap | 152 +++++++ packages/vant/src/picker/test/index.spec.tsx | 363 ++++++---------- packages/vant/src/picker/test/slots.spec.ts | 64 +++ 5 files changed, 369 insertions(+), 940 deletions(-) create mode 100644 packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap create mode 100644 packages/vant/src/picker/test/slots.spec.ts diff --git a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap index 4b78fa1c6..027e78269 100644 --- a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap @@ -84,86 +84,35 @@ exports[`should render demo and match snapshot 1`] = `
-
-
- -
- Title -
- + City +
-
-
-
    +
    + -
  • -
    - Delaware -
    -
    • -
  • -
    - Florida -
    -
    • -
  • -
    - Georqia -
    -
    • -
  • -
    - Indiana -
    -
    • -
  • -
    - Maine -
    -
    • -
-
-
-
-
+ +
+ + + +
@@ -186,13 +135,13 @@ exports[`should render demo and match snapshot 1`] = ` style="height: 264px;" >
-
  • Monday @@ -210,7 +159,7 @@ exports[`should render demo and match snapshot 1`] = `
  • Wednesday @@ -237,13 +186,13 @@ exports[`should render demo and match snapshot 1`] = `
-
  • Morning @@ -252,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
  • Afternoon @@ -447,112 +396,6 @@ exports[`should render demo and match snapshot 1`] = `
-
-
-
- -
- Title -
- -
-
-
-
    -
  • -
    - Group1 -
    -
    • -
  • -
    - Group2 -
    -
    • -
-
-
-
    -
  • -
    - Delaware -
    -
    • -
  • -
    - Florida -
    -
    • -
  • -
    - Georqia -
    -
    • -
  • -
    - Indiana -
    -
    • -
  • -
    - Maine -
    -
    • -
-
-
-
-
-
-
-
-
@@ -587,123 +430,15 @@ exports[`should render demo and match snapshot 1`] = `
-
+
    -
  • -
    - Group1 -
    -
    • -
  • -
    - Group2 -
    -
-
-
    -
  • -
    - Delaware -
    -
    • -
  • -
    - Florida -
    -
    • -
  • -
    - Georqia -
    -
    • -
  • -
    - Indiana -
    -
    • -
  • -
    - Maine -
    -
    • -
-
-
-
-
-
-
-
-
- -
-
-
- -
-
- - -
- - - - -
diff --git a/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap index ceaf0d051..a10a25c28 100644 --- a/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap +++ b/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap @@ -1,179 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`column watch default index 1`] = ` -
-
    -
  • -
    - 1 -
    -
    • -
  • -
    - 1990 -
    -
    • -
  • -
    - 1991 -
    -
    • -
  • -
    - 1992 -
    -
    • -
  • -
    - 1993 -
    -
    • -
  • -
    - 1994 -
    -
    • -
  • -
    - 1995 -
    -
    • -
-
-`; - -exports[`column watch default index 2`] = ` -
-
    -
  • -
    - 1 -
    -
    • -
  • -
    - 1990 -
    -
    • -
  • -
    - 1991 -
    -
    • -
  • -
    - 1992 -
    -
    • -
  • -
    - 1993 -
    -
    • -
  • -
    - 1994 -
    -
    • -
  • -
    - 1995 -
    -
    • -
-
-`; - -exports[`columns-top、columns-bottom prop 1`] = ` -
-
- - -
- Custom Columns Top -
-
-
    -
-
-
- Custom Columns Bottom -
-`; - -exports[`not allow html 1`] = ` +exports[`should not allow to render html text 1`] = `
- -
-
-
-
    -
  • -
    - foo -
    -
    • -
  • -
    - bar -
    -
    • -
-
-
-
-
-
-
-
-`; - -exports[`render option slot with simple columns 1`] = ` -
-
- - -
-
-
-
    -
  • - foo -
    • -
  • - bar -
    • -
-
-
-
-
-
-
-
-`; - -exports[`set rem option-height 1`] = ` -
-
- - -
-
-
-
    -
  • -
    - 1990 -
    -
    • -
  • -
    - 1991 -
    -
    • -
-
-
-
-
-
-
-
-`; - -exports[`should render confirm/cancel slot correctly 1`] = ` -
-
- - -
-
-
-
    -
-
-
-
-`; - -exports[`should render title slot correctly 1`] = ` -
-
- - Custom title - -
-
-
-
    -
-
-
-
-`; - -exports[`should render toolbar slot correctly 1`] = ` -
-
- Custom toolbar -
-
-
-
    -
-
-
-
-`; - -exports[`toolbar-position prop 1`] = ` +exports[`should render bottom toolbar when toolbar-position is bottom 1`] = `
+
+ + +
+ Custom Columns Top +
+
+
    +
+
+
+ Custom Columns Bottom +
+`; + +exports[`should render confirm/cancel slot correctly 1`] = ` +
+
+ + +
+
+
+
    +
+
+
+
+`; + +exports[`should render option slot correctly 1`] = ` +
+
+ + +
+
+
+
    +
  • + Custom 1990 +
    • +
  • + Custom 1991 +
    • +
+
+
+
+
+
+
+
+`; + +exports[`should render title slot correctly 1`] = ` +
+
+ + Custom title + +
+
+
+
    +
+
+
+
+`; + +exports[`should render toolbar slot correctly 1`] = ` +
+
+ Custom toolbar +
+
+
+
    +
+
+
+
+`; diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index 7e4f08eaa..8c61d98d0 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -1,20 +1,16 @@ import { later, mount, triggerDrag } from '../../../test'; import { Picker } from '..'; -import PickerColumn from '../PickerColumn'; -const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995']; -const columns = [ - { - values: ['vip', 'normal'], - className: 'column1', - }, - { - values: simpleColumn, - className: 'column2', - }, +const simpleColumn = [ + { text: '1990', value: '1990' }, + { text: '1991', value: '1991' }, + { text: '1992', value: '1992' }, + { text: '1993', value: '1993' }, + { text: '1994', value: '1994' }, + { text: '1995', value: '1995' }, ]; -test('simple columns confirm & cancel event', () => { +test('should emit confirm event after clicking the confirm button', () => { const wrapper = mount(Picker, { props: { showToolbar: true, @@ -23,89 +19,32 @@ test('simple columns confirm & cancel event', () => { }); wrapper.find('.van-picker__confirm').trigger('click'); - wrapper.find('.van-picker__cancel').trigger('click'); - expect(wrapper.emitted('confirm')![0]).toEqual(['1990', 0]); - expect(wrapper.emitted('cancel')![0]).toEqual(['1990', 0]); - wrapper.unmount(); -}); - -test('multiple columns confirm & cancel event', () => { - const wrapper = mount(Picker, { - props: { - showToolbar: true, - columns, + expect(wrapper.emitted('confirm')![0]).toEqual([ + { + selectedOptions: [{ text: '1990', value: '1990' }], + selectedValues: ['1990'], }, - }); - - wrapper.find('.van-picker__confirm').trigger('click'); - wrapper.find('.van-picker__cancel').trigger('click'); - - const params = [ - ['vip', '1990'], - [0, 0], - ]; - - expect(wrapper.emitted('confirm')![0]).toEqual(params); - expect(wrapper.emitted('cancel')![0]).toEqual(params); -}); - -test('set picker values', () => { - const wrapper = mount(Picker, { - props: { - columns, - }, - }); - const vm = wrapper.vm as Record; - - expect(vm.getColumnValues(-1)).toEqual(undefined); - expect(vm.getColumnValues(1)).toHaveLength(6); - expect(vm.getColumnValue(1)).toEqual('1990'); - - vm.setColumnValue(0, 'normal'); - expect(vm.getColumnValue(0)).toEqual('normal'); - - vm.setColumnIndex(0, 0); - expect(vm.getColumnValue(0)).toEqual('vip'); - - vm.setColumnValue(1, '1991'); - expect(vm.getColumnValue(1)).toEqual('1991'); - - vm.setColumnValues(0, ['vip', 'normal', 'other']); - expect(vm.getColumnValues(0)).toHaveLength(3); - expect(vm.getValues()).toHaveLength(2); - - vm.setColumnValues(-1, []); - expect(vm.getValues()).toHaveLength(2); - - vm.setValues(['vip', '1992']); - expect(vm.getColumnIndex(1)).toEqual(2); - expect(vm.getColumnIndex(2)).toEqual(undefined); - expect(vm.getIndexes(2)).toEqual([0, 2]); - - vm.setIndexes([1, 4]); - expect(vm.getColumnValue(1)).toEqual('1994'); - expect(vm.getColumnValue(2)).toEqual(undefined); -}); - -test('drag columns', () => { - const wrapper = mount(Picker, { - props: { - columns, - }, - }); - - triggerDrag(wrapper.find('.van-picker-column'), 0, -100); - wrapper.find('.van-picker-column ul').trigger('transitionend'); - - // 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时， - // 会得到一个很大的值，导致会滚动到且选中列表的最后一项 - expect(wrapper.emitted<[Array, number]>('change')![0][0]).toEqual([ - 'normal', - '1990', ]); }); -test('drag simple columns', () => { +test('should emit cancel event after clicking the cancel button', () => { + const wrapper = mount(Picker, { + props: { + showToolbar: true, + columns: simpleColumn, + }, + }); + + wrapper.find('.van-picker__cancel').trigger('click'); + expect(wrapper.emitted('cancel')![0]).toEqual([ + { + selectedOptions: [{ text: '1990', value: '1990' }], + selectedValues: ['1990'], + }, + ]); +}); + +test('should emit change event after draging the column', () => { const wrapper = mount(Picker, { props: { columns: simpleColumn, @@ -115,121 +54,21 @@ test('drag simple columns', () => { triggerDrag(wrapper.find('.van-picker-column'), 0, -100); wrapper.find('.van-picker-column ul').trigger('transitionend'); - // 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时， - // 会得到一个很大的值，导致会滚动到且选中列表的最后一项 - expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual('1995'); + expect(wrapper.emitted('change')).toEqual([ + [ + { + columnIndex: 0, + selectedOptions: [{ text: '1995', value: '1995' }], + selectedValues: ['1995'], + }, + ], + ]); }); -test('column watch default index', async () => { - const disabled = { disabled: true, text: 1 }; - const wrapper = mount(PickerColumn, { - props: { - initialOptions: [disabled, ...simpleColumn], - textKey: 'text', - optionHeight: 50, - visibleOptionNum: 5, - swipeDuration: 1000, - }, - } as any); - - await later(); - expect(wrapper.html()).toMatchSnapshot(); - - await wrapper.setProps({ - defaultIndex: 2, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('should render title slot correctly', () => { - const wrapper = mount(Picker, { - slots: { - title: () => 'Custom title', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('should render toolbar slot correctly', () => { - const wrapper = mount(Picker, { - slots: { - toolbar: () => 'Custom toolbar', - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('should render confirm/cancel slot correctly', () => { - const wrapper = mount(Picker, { - slots: { - confirm: () => 'Custom Confirm', - cancel: () => 'Custom Cancel', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('render option slot with simple columns', () => { - const wrapper = mount(Picker, { - props: { - columns: ['foo', 'bar'], - showToolbar: true, - }, - slots: { - option: (item) => item, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('render option slot with object columns', () => { - const wrapper = mount(Picker, { - props: { - columns: [{ text: 'foo' }, { text: 'bar' }], - showToolbar: true, - }, - slots: { - options: (item) => item, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('simulation finger swipe again before transitionend', () => { - // mock getComputedStyle - // see: https://github.com/jsdom/jsdom/issues/2588 - const originGetComputedStyle = window.getComputedStyle; - window.getComputedStyle = (ele) => { - const style = originGetComputedStyle(ele); - - return { - ...style, - transform: 'matrix(1, 0, 0, 1, 0, -5)', - }; - }; - - const wrapper = mount(Picker, { - props: { - columns: simpleColumn, - }, - }); - - triggerDrag(wrapper.find('.van-picker-column'), 0, -5); - triggerDrag(wrapper.find('.van-picker-column'), -5, -100); - wrapper.find('.van-picker-column ul').trigger('transitionend'); - expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual('1995'); -}); - -test('click column item', () => { +test('should emit change event when after clicking a option', async () => { const columns = [ - { text: '杭州' }, - { text: '宁波' }, - { text: '温州', disabled: true }, - { text: '嘉兴', disabled: true }, + { text: 'A', value: 'A' }, + { text: 'B', value: 'B' }, ]; const wrapper = mount(Picker, { props: { @@ -237,13 +76,50 @@ test('click column item', () => { }, }); - wrapper.findAll('.van-picker-column__item')[3].trigger('click'); - expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual( - columns[1] - ); + await wrapper.findAll('.van-picker-column__item')[1].trigger('click'); + expect(wrapper.emitted('change')).toEqual([ + [ + { + columnIndex: 0, + selectedOptions: [{ text: 'B', value: 'B' }], + selectedValues: ['B'], + }, + ], + ]); }); -test('toolbar-position prop', () => { +test('should not emit change event if modelValue is not changed', async () => { + const columns = [ + { text: 'A', value: 'A' }, + { text: 'B', value: 'B' }, + ]; + const wrapper = mount(Picker, { + props: { + modelValue: ['B'], + columns, + }, + }); + + await wrapper.findAll('.van-picker-column__item')[1].trigger('click'); + expect(wrapper.emitted('change')).toBeFalsy(); +}); + +test('should not emit change event when after clicking a disabled option', async () => { + const columns = [ + { text: 'A', value: 'A' }, + { text: 'B', value: 'B', disabled: true }, + ]; + const wrapper = mount(Picker, { + props: { + columns, + }, + }); + + await wrapper.findAll('.van-picker-column__item')[1].trigger('click'); + expect(wrapper.emitted<[string, number]>('change')).toBeFalsy(); +}); + +test('should render bottom toolbar when toolbar-position is bottom', () => { const wrapper = mount(Picker, { props: { showToolbar: true, @@ -254,66 +130,67 @@ test('toolbar-position prop', () => { expect(wrapper.html()).toMatchSnapshot(); }); -test('not allow html', () => { +test('should not allow to render html text', () => { const wrapper = mount(Picker, { props: { allowHtml: false, - columns: ['
option
'], + columns: [{ text: '
option
' }], }, }); expect(wrapper.html()).toMatchSnapshot(); }); -test('columns-top、columns-bottom prop', () => { +test('should allow to update columns props dynamically', async () => { const wrapper = mount(Picker, { props: { - showToolbar: true, - }, - slots: { - 'columns-top': () => 'Custom Columns Top', - 'columns-bottom': () => 'Custom Columns Bottom', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('watch columns change', async () => { - const wrapper = mount(Picker, { - props: { - showToolbar: true, - columns: ['1', '2'], - defaultIndex: 1, + modelValue: ['2'], + columns: [ + { text: '1', value: '1' }, + { text: '2', value: '2' }, + ], }, }); await wrapper.setProps({ - columns: ['2', '3'], + columns: [ + { text: '2', value: '2' }, + { text: '3', value: '3' }, + ], }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual(['3', 1]); + expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([ + { selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] }, + ]); }); test('should not reset index when columns unchanged', async () => { const wrapper = mount(Picker, { props: { + modelValue: ['2'], showToolbar: true, - columns: ['1', '2'], + columns: [ + { text: '1', value: '1' }, + { text: '2', value: '2' }, + ], }, }); - (wrapper.vm as Record).setIndexes([1]); await wrapper.setProps({ - columns: ['1', '2'], + columns: [ + { text: '1', value: '1' }, + { text: '2', value: '2' }, + ], }); - wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual(['2', 1]); + await wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([ + { selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] }, + ]); }); -test('set rem option-height', async () => { +test('should allow to set rem option height', async () => { const originGetComputedStyle = window.getComputedStyle; window.getComputedStyle = () => ({ fontSize: '16px' } as CSSStyleDeclaration); @@ -326,22 +203,24 @@ test('set rem option-height', async () => { }); await later(); - expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.find('.van-picker-column__item').style.height).toEqual( + '160px' + ); window.getComputedStyle = originGetComputedStyle; }); -test('readonly prop', () => { +test('should not allow to change option when using readonly prop', async () => { const wrapper = mount(Picker, { props: { - columns, + columns: simpleColumn, readonly: true, }, }); triggerDrag(wrapper.find('.van-picker-column'), 0, -100); - wrapper.find('.van-picker-column ul').trigger('transitionend'); - wrapper.findAll('.van-picker-column__item')[3].trigger('click'); + await wrapper.find('.van-picker-column ul').trigger('transitionend'); + await wrapper.findAll('.van-picker-column__item')[3].trigger('click'); expect(wrapper.emitted('change')).toBeFalsy(); }); @@ -349,7 +228,7 @@ test('readonly prop', () => { test('should not render mask and frame when options is empty', async () => { const wrapper = mount(Picker, { props: { - columns: [{ values: [] }], + columns: [[], []], }, }); expect(wrapper.find('.van-picker__mask').exists()).toBeFalsy(); diff --git a/packages/vant/src/picker/test/slots.spec.ts b/packages/vant/src/picker/test/slots.spec.ts new file mode 100644 index 000000000..0479bece2 --- /dev/null +++ b/packages/vant/src/picker/test/slots.spec.ts @@ -0,0 +1,64 @@ +import { mount } from '../../../test'; +import { Picker, PickerOption } from '..'; + +const simpleColumn = [ + { text: '1990', value: '1990' }, + { text: '1991', value: '1991' }, +]; + +test('should render title slot correctly', () => { + const wrapper = mount(Picker, { + slots: { + title: () => 'Custom title', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render toolbar slot correctly', () => { + const wrapper = mount(Picker, { + slots: { + toolbar: () => 'Custom toolbar', + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render confirm/cancel slot correctly', () => { + const wrapper = mount(Picker, { + slots: { + confirm: () => 'Custom Confirm', + cancel: () => 'Custom Cancel', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render option slot correctly', () => { + const wrapper = mount(Picker, { + props: { + columns: simpleColumn, + }, + slots: { + option: (option: PickerOption) => `Custom ${option.text}`, + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render columns-top、columns-bottom slots correctly', () => { + const wrapper = mount(Picker, { + props: { + showToolbar: true, + }, + slots: { + 'columns-top': () => 'Custom Columns Top', + 'columns-bottom': () => 'Custom Columns Bottom', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +});