From 9c6b416bfbcc0132940ea74cb46c720d28312b31 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 7 Oct 2022 23:24:03 +0800 Subject: [PATCH] test(DatePicker): migrate legacy test cases (#11123) --- .../test/__snapshots__/index.spec.ts.snap | 219 ++++++++++++++++++ .../date-picker/test/date-picker.legacy.ts | 171 -------------- .../test/datetime-picker.legacy.tsx | 116 ---------- .../vant/src/date-picker/test/index.spec.ts | 79 +++++++ 4 files changed, 298 insertions(+), 287 deletions(-) create mode 100644 packages/vant/src/date-picker/test/__snapshots__/index.spec.ts.snap delete mode 100644 packages/vant/src/date-picker/test/date-picker.legacy.ts delete mode 100644 packages/vant/src/date-picker/test/datetime-picker.legacy.tsx diff --git a/packages/vant/src/date-picker/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/date-picker/test/__snapshots__/index.spec.ts.snap new file mode 100644 index 000000000..d0d6edcf4 --- /dev/null +++ b/packages/vant/src/date-picker/test/__snapshots__/index.spec.ts.snap @@ -0,0 +1,219 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should filter options when using filter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 2000 +
    +
    • +
  • +
    + 2010 +
    +
    • +
+
+
+
    +
  • +
    + 10 +
    +
    • +
+
+
+
    +
  • +
    + 10 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 30 +
    +
    • +
+
+
+
+
+
+
+
+`; + +exports[`should format options correctly when using formatter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 2000 year +
    +
    • +
  • +
    + 2010 year +
    +
    • +
+
+
+
    +
  • +
    + 10 month +
    +
    • +
+
+
+
    +
  • +
    + 10 day +
    +
    • +
  • +
    + 20 day +
    +
    • +
  • +
    + 30 day +
    +
    • +
+
+
+
+
+
+
+
+`; + +exports[`should render title slot correctly 1`] = ` +
+ + Custom title + +
+`; diff --git a/packages/vant/src/date-picker/test/date-picker.legacy.ts b/packages/vant/src/date-picker/test/date-picker.legacy.ts deleted file mode 100644 index 0bb6c36c8..000000000 --- a/packages/vant/src/date-picker/test/date-picker.legacy.ts +++ /dev/null @@ -1,171 +0,0 @@ -// import DatePicker from '../../datetime-picker/DatePicker'; -// import { mount, later, triggerDrag } from '../../../test'; - -// function filter(type: string, options: string[]): string[] { -// const mod = type === 'year' ? 10 : 5; -// return options.filter((option: string) => Number(option) % mod === 0); -// } - -// function formatter(type: string, value: string): string { -// return `${value} ${type}`; -// } - -// test('filter prop', async () => { -// const wrapper = mount(DatePicker, { -// props: { -// filter, -// minDate: new Date(2020, 0, 1), -// maxDate: new Date(2025, 10, 1), -// modelValue: new Date(2020, 10, 1, 0, 0), -// }, -// }); - -// expect(wrapper.html()).toMatchSnapshot(); -// }); - -// test('formatter prop', async () => { -// const wrapper = mount(DatePicker, { -// props: { -// filter, -// formatter, -// minDate: new Date(2010, 0, 1), -// maxDate: new Date(2025, 10, 1), -// modelValue: new Date(2020, 10, 1, 0, 0), -// }, -// }); - -// expect(wrapper.html()).toMatchSnapshot(); - -// triggerDrag(wrapper.find('.van-picker-column'), 0, -100); -// wrapper.find('.van-picker-column ul').trigger('transitionend'); -// await later(); - -// expect((wrapper.vm as Record).getPicker().getValues()).toEqual([ -// '2020 year', -// '05 month', -// '05 day', -// '00 hour', -// '00 minute', -// ]); -// }); - -// test('confirm event', () => { -// const date = new Date(2020, 10, 1, 0, 0); - -// const wrapper = mount(DatePicker, { -// props: { -// modelValue: date, -// minDate: new Date(2020, 0, 1), -// maxDate: new Date(2025, 10, 1), -// }, -// }); - -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2020); - -// triggerDrag(wrapper.find('.van-picker-column'), 0, -100); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025); -// }); - -// test('year-month type', async () => { -// const date = new Date(2020, 10, 1, 0, 0); - -// const wrapper = mount(DatePicker, { -// props: { -// type: 'year-month', -// modelValue: date, -// minDate: new Date(2020, 0, 1), -// maxDate: new Date(2025, 10, 1), -// }, -// }); - -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2020); -// expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10); - -// triggerDrag(wrapper.find('.van-picker-column'), 0, -100); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025); -// expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(0); - -// triggerDrag(wrapper.findAll('.van-picker-column')[0], 0, -100); -// await later(); -// triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -100); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![2][0].getFullYear()).toEqual(2025); -// expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(10); -// }); - -// test('month-day type', async () => { -// const date = new Date(2020, 10, 1, 0, 0); - -// const wrapper = mount(DatePicker, { -// props: { -// type: 'month-day', -// modelValue: date, -// minDate: new Date(2020, 0, 1), -// maxDate: new Date(2025, 10, 1), -// }, -// }); - -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10); -// expect(wrapper.emitted<[Date]>('confirm')![0][0].getDate()).toEqual(1); - -// triggerDrag(wrapper.find('.van-picker-column'), 0, -300); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(11); -// expect(wrapper.emitted<[Date]>('confirm')![1][0].getDate()).toEqual(1); - -// triggerDrag(wrapper.find('.van-picker-column'), 0, -300); -// await later(); -// triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11); -// expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31); -// }); - -// test('datehour type', () => { -// const wrapper = mount(DatePicker, { -// props: { -// minDate: new Date(2010, 0, 1), -// maxDate: new Date(2025, 10, 1), -// modelValue: new Date(2020, 10, 1, 0, 0), -// }, -// }); - -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![0][0].getHours()).toEqual(0); - -// triggerDrag(wrapper.findAll('.van-picker-column')[3], 0, -300); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![1][0].getHours()).toEqual(23); -// }); - -// test('use min-date with filter', async () => { -// const minDate = new Date(2030, 0, 0, 0, 3); -// const maxDate = new Date(2040, 0, 0, 0, 0); - -// const wrapper = mount(DatePicker, { -// props: { -// minDate, -// maxDate, -// modelValue: new Date(2020, 0, 0, 0, 0), -// filter(type: string, values: string[]) { -// if (type === 'minute') { -// return values.filter((value) => Number(value) % 30 === 0); -// } - -// return values; -// }, -// }, -// }); - -// await later(); - -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual( -// new Date(2030, 0, 0, 0, 30) -// ); -// }); diff --git a/packages/vant/src/date-picker/test/datetime-picker.legacy.tsx b/packages/vant/src/date-picker/test/datetime-picker.legacy.tsx deleted file mode 100644 index 1313053be..000000000 --- a/packages/vant/src/date-picker/test/datetime-picker.legacy.tsx +++ /dev/null @@ -1,116 +0,0 @@ -// import { DatetimePicker } from '../../datetime-picker'; -// import { mount, later } from '../../../test'; -// import { reactive } from 'vue'; -// import { useExpose } from '../../composables/use-expose'; - -// test('should emit confirm event after clicking the confirm button', () => { -// const onConfirm = jest.fn(); -// const wrapper = mount(DatetimePicker, { -// props: { -// onConfirm, -// }, -// }); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(onConfirm).toHaveBeenCalledTimes(1); -// }); - -// test('should emit cancel event after clicking the confirm button', () => { -// const onCancel = jest.fn(); -// const wrapper = mount(DatetimePicker, { -// props: { -// onCancel, -// }, -// }); -// wrapper.find('.van-picker__cancel').trigger('click'); -// expect(onCancel).toHaveBeenCalledTimes(1); -// }); - -// test('should allow to call getPicker method', () => { -// const wrapper = mount(DatetimePicker); - -// expect(wrapper.vm.getPicker()).toBeTruthy(); -// }); - -// test('should render title slot correctly', () => { -// const wrapper = mount(DatetimePicker, { -// props: { -// showToolbar: true, -// }, -// slots: { -// title: () => 'Custom title', -// }, -// }); - -// expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot(); -// }); - -// test('should emit value correctly when dynamic change min-date', async () => { -// const defaultValue = new Date(2020, 10, 2, 10, 30); -// const wrapper = mount({ -// emits: ['confirm'], -// setup(_, { emit }) { -// const state = reactive({ -// date: defaultValue, -// minDate: new Date(2010, 0, 1, 10, 30), -// }); - -// const onChange = () => { -// state.minDate = state.date; -// }; - -// useExpose({ -// onChange, -// }); - -// return () => ( -// emit('confirm', value)} -// /> -// ); -// }, -// }); - -// await later(); -// (wrapper.vm as Record).onChange(); -// await later(); -// wrapper.find('.van-picker__confirm').trigger('click'); -// expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(defaultValue); -// }); - -// test('should update value correctly after calling setColumnIndex method', async () => { -// const onConfirm = jest.fn(); -// const defaultDate = new Date(2020, 0, 1); -// const wrapper = mount(DatetimePicker, { -// props: { -// type: 'date', -// minDate: defaultDate, -// maxDate: new Date(2020, 0, 30), -// modelValue: defaultDate, -// onConfirm, -// }, -// }); - -// wrapper.vm.getPicker().setColumnIndex(2, 14); -// await wrapper.find('.van-picker__confirm').trigger('click'); -// expect(onConfirm.mock.calls[0]).toEqual([new Date(2020, 0, 15)]); -// }); - -// test('should update value correctly after calling setColumnValue method', async () => { -// const onConfirm = jest.fn(); -// const defaultDate = new Date(2020, 0, 1); -// const wrapper = mount(DatetimePicker, { -// props: { -// type: 'date', -// minDate: defaultDate, -// maxDate: new Date(2020, 0, 30), -// modelValue: defaultDate, -// onConfirm, -// }, -// }); - -// wrapper.vm.getPicker().setColumnValue(2, '15'); -// await wrapper.find('.van-picker__confirm').trigger('click'); -// expect(onConfirm.mock.calls[0]).toEqual([new Date(2020, 0, 15)]); -// }); diff --git a/packages/vant/src/date-picker/test/index.spec.ts b/packages/vant/src/date-picker/test/index.spec.ts index 395c44e82..004a18c50 100644 --- a/packages/vant/src/date-picker/test/index.spec.ts +++ b/packages/vant/src/date-picker/test/index.spec.ts @@ -2,6 +2,7 @@ import { nextTick } from 'vue'; import { later, mount } from '../../../test'; import DatePicker from '..'; import type { + PickerOption, PickerCancelEventParams, PickerConfirmEventParams, } from '../../picker'; @@ -119,3 +120,81 @@ test('should render with min-date correctly', async () => { wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0].selectedValues ).toEqual(['2000', '10', '10']); }); + +test('should render title slot correctly', () => { + const wrapper = mount(DatePicker, { + slots: { + title: () => 'Custom title', + }, + }); + + expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot(); +}); + +function filter(type: string, options: PickerOption[]): PickerOption[] { + return options.filter((option) => Number(option.value) % 10 === 0); +} + +test('should filter options when using filter prop', () => { + const maxDate = new Date(2010, 1, 1); + const minDate = new Date(2000, 1, 1); + const wrapper = mount(DatePicker, { + props: { + filter, + maxDate, + minDate, + modelValue: ['2005', '01', '01'], + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should format options correctly when using formatter prop', async () => { + const formatter = (type: string, option: PickerOption): PickerOption => { + option.text = `${option.text} ${type}`; + return option; + }; + const maxDate = new Date(2010, 1, 1); + const minDate = new Date(2000, 1, 1); + const wrapper = mount(DatePicker, { + props: { + filter, + formatter, + maxDate, + minDate, + modelValue: ['2005', '01', '01'], + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should update value correctly when dynamically change min-date', async () => { + const maxDate = new Date(2050, 1, 1); + const minDate = new Date(2000, 1, 1); + const wrapper = mount(DatePicker, { + props: { + modelValue: ['2005', '10', '10'], + minDate, + maxDate, + 'onUpdate:modelValue': (newVal: string[]) => { + nextTick(() => { + wrapper.setProps({ + modelValue: newVal, + }); + }); + }, + }, + }); + + await later(); + await wrapper.setProps({ + minDate: new Date(2020, 11, 20), + }); + + wrapper.find('.van-picker__confirm').trigger('click'); + expect( + wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0].selectedValues + ).toEqual(['2020', '12', '20']); +});