diff --git a/src/datetime-picker/test/__snapshots__/date-picker.legacy.js.snap b/src/datetime-picker/test/__snapshots__/date-picker.legacy.js.snap deleted file mode 100644 index 69d2e9083..000000000 --- a/src/datetime-picker/test/__snapshots__/date-picker.legacy.js.snap +++ /dev/null @@ -1,224 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`filter prop 1`] = ` -
-
- -
-
-
    -
  • -
    2020
    -
    • -
-
-
-
    -
  • -
    05
    -
    • -
  • -
    10
    -
    • -
-
-
-
    -
  • -
    05
    -
    • -
  • -
    10
    -
    • -
  • -
    15
    -
    • -
  • -
    20
    -
    • -
  • -
    25
    -
    • -
  • -
    30
    -
    • -
-
-
-
    -
  • -
    00
    -
    • -
  • -
    05
    -
    • -
  • -
    10
    -
    • -
  • -
    15
    -
    • -
  • -
    20
    -
    • -
-
-
-
    -
  • -
    00
    -
    • -
  • -
    05
    -
    • -
  • -
    10
    -
    • -
  • -
    15
    -
    • -
  • -
    20
    -
    • -
  • -
    25
    -
    • -
  • -
    30
    -
    • -
  • -
    35
    -
    • -
  • -
    40
    -
    • -
  • -
    45
    -
    • -
  • -
    50
    -
    • -
  • -
    55
    -
    • -
-
-
-
-
- -
-`; - -exports[`formatter prop 1`] = ` -
-
- -
-
-
    -
  • -
    2010 year
    -
    • -
  • -
    2020 year
    -
    • -
-
-
-
    -
  • -
    05 month
    -
    • -
  • -
    10 month
    -
    • -
-
-
-
    -
  • -
    05 day
    -
    • -
  • -
    10 day
    -
    • -
  • -
    15 day
    -
    • -
  • -
    20 day
    -
    • -
  • -
    25 day
    -
    • -
  • -
    30 day
    -
    • -
-
-
-
    -
  • -
    00 hour
    -
    • -
  • -
    05 hour
    -
    • -
  • -
    10 hour
    -
    • -
  • -
    15 hour
    -
    • -
  • -
    20 hour
    -
    • -
-
-
-
    -
  • -
    00 minute
    -
    • -
  • -
    05 minute
    -
    • -
  • -
    10 minute
    -
    • -
  • -
    15 minute
    -
    • -
  • -
    20 minute
    -
    • -
  • -
    25 minute
    -
    • -
  • -
    30 minute
    -
    • -
  • -
    35 minute
    -
    • -
  • -
    40 minute
    -
    • -
  • -
    45 minute
    -
    • -
  • -
    50 minute
    -
    • -
  • -
    55 minute
    -
    • -
-
-
-
-
- -
-`; diff --git a/src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap b/src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap new file mode 100644 index 000000000..d91ccc28b --- /dev/null +++ b/src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap @@ -0,0 +1,596 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`filter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 2020 +
    +
    • +
+
+
+
    +
  • +
    + 05 +
    +
    • +
  • +
    + 10 +
    +
    • +
+
+
+
    +
  • +
    + 05 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 30 +
    +
    • +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 20 +
    +
    • +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 35 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 45 +
    +
    • +
  • +
    + 50 +
    +
    • +
  • +
    + 55 +
    +
    • +
+
+
+
+
+
+
+
+`; + +exports[`formatter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 2010 year +
    +
    • +
  • +
    + 2020 year +
    +
    • +
+
+
+
    +
  • +
    + 05 month +
    +
    • +
  • +
    + 10 month +
    +
    • +
+
+
+
    +
  • +
    + 05 day +
    +
    • +
  • +
    + 10 day +
    +
    • +
  • +
    + 15 day +
    +
    • +
  • +
    + 20 day +
    +
    • +
  • +
    + 25 day +
    +
    • +
  • +
    + 30 day +
    +
    • +
+
+
+
    +
  • +
    + 00 hour +
    +
    • +
  • +
    + 05 hour +
    +
    • +
  • +
    + 10 hour +
    +
    • +
  • +
    + 15 hour +
    +
    • +
  • +
    + 20 hour +
    +
    • +
+
+
+
    +
  • +
    + 00 minute +
    +
    • +
  • +
    + 05 minute +
    +
    • +
  • +
    + 10 minute +
    +
    • +
  • +
    + 15 minute +
    +
    • +
  • +
    + 20 minute +
    +
    • +
  • +
    + 25 minute +
    +
    • +
  • +
    + 30 minute +
    +
    • +
  • +
    + 35 minute +
    +
    • +
  • +
    + 40 minute +
    +
    • +
  • +
    + 45 minute +
    +
    • +
  • +
    + 50 minute +
    +
    • +
  • +
    + 55 minute +
    +
    • +
+
+
+
+
+
+
+
+`; diff --git a/src/datetime-picker/test/__snapshots__/datetime-picker.legacy.js.snap b/src/datetime-picker/test/__snapshots__/datetime-picker.legacy.js.snap deleted file mode 100644 index cab321d0c..000000000 --- a/src/datetime-picker/test/__snapshots__/datetime-picker.legacy.js.snap +++ /dev/null @@ -1,35 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should render title slot correctly 1`] = `
Custom title
`; - -exports[`time type 1`] = ` -
-
- -
-
-
    -
  • -
    22
    -
    • -
  • -
    23
    -
    • -
-
-
-
    -
  • -
    58
    -
    • -
  • -
    59
    -
    • -
-
-
-
-
- -
-`; diff --git a/src/datetime-picker/test/__snapshots__/datetime-picker.spec.ts.snap b/src/datetime-picker/test/__snapshots__/datetime-picker.spec.ts.snap new file mode 100644 index 000000000..fc667abdc --- /dev/null +++ b/src/datetime-picker/test/__snapshots__/datetime-picker.spec.ts.snap @@ -0,0 +1,94 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render title slot correctly 1`] = ` +
+ + Custom title + +
+`; + +exports[`time type 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
+
+
+
    +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
+
+
+
+
+
+
+`; diff --git a/src/datetime-picker/test/__snapshots__/time-picker.legacy.js.snap b/src/datetime-picker/test/__snapshots__/time-picker.legacy.js.snap deleted file mode 100644 index ec66b33e1..000000000 --- a/src/datetime-picker/test/__snapshots__/time-picker.legacy.js.snap +++ /dev/null @@ -1,177 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`filter prop 1`] = ` -
-
- -
-
-
    -
  • -
    00
    -
    • -
  • -
    05
    -
    • -
  • -
    10
    -
    • -
  • -
    15
    -
    • -
  • -
    20
    -
    • -
-
-
-
    -
  • -
    00
    -
    • -
  • -
    10
    -
    • -
  • -
    20
    -
    • -
  • -
    30
    -
    • -
  • -
    40
    -
    • -
  • -
    50
    -
    • -
-
-
-
-
- -
-`; - -exports[`format initial value 1`] = ` -
-
- -
-
-
    -
  • -
    22
    -
    • -
  • -
    23
    -
    • -
-
-
-
    -
  • -
    58
    -
    • -
  • -
    59
    -
    • -
-
-
-
-
- -
-`; - -exports[`formatter prop 1`] = ` -
-
- -
-
-
    -
  • -
    00 hour
    -
    • -
  • -
    05 hour
    -
    • -
  • -
    10 hour
    -
    • -
  • -
    15 hour
    -
    • -
  • -
    20 hour
    -
    • -
-
-
-
    -
  • -
    00 minute
    -
    • -
  • -
    10 minute
    -
    • -
  • -
    20 minute
    -
    • -
  • -
    30 minute
    -
    • -
  • -
    40 minute
    -
    • -
  • -
    50 minute
    -
    • -
-
-
-
-
- -
-`; - -exports[`max-hour & max-minute 1`] = ` -
-
- -
-
-
    -
  • -
    00
    -
    • -
  • -
    01
    -
    • -
  • -
    02
    -
    • -
-
-
-
    -
  • -
    00
    -
    • -
  • -
    01
    -
    • -
  • -
    02
    -
    • -
-
-
-
-
- -
-`; diff --git a/src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap b/src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap new file mode 100644 index 000000000..3a8e0ebad --- /dev/null +++ b/src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap @@ -0,0 +1,453 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`filter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 20 +
    +
    • +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 50 +
    +
    • +
+
+
+
+
+
+
+
+`; + +exports[`format initial value 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
+
+
+
    +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
+
+
+
+
+
+
+`; + +exports[`formatter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 00 hour +
    +
    • +
  • +
    + 05 hour +
    +
    • +
  • +
    + 10 hour +
    +
    • +
  • +
    + 15 hour +
    +
    • +
  • +
    + 20 hour +
    +
    • +
+
+
+
    +
  • +
    + 00 minute +
    +
    • +
  • +
    + 10 minute +
    +
    • +
  • +
    + 20 minute +
    +
    • +
  • +
    + 30 minute +
    +
    • +
  • +
    + 40 minute +
    +
    • +
  • +
    + 50 minute +
    +
    • +
+
+
+
+
+
+
+
+`; + +exports[`max-hour & max-minute 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
+
+
+
+
+
+
+
+`; diff --git a/src/datetime-picker/test/date-picker.legacy.js b/src/datetime-picker/test/date-picker.spec.ts similarity index 56% rename from src/datetime-picker/test/date-picker.legacy.js rename to src/datetime-picker/test/date-picker.spec.ts index 0a7880a99..07419823a 100644 --- a/src/datetime-picker/test/date-picker.legacy.js +++ b/src/datetime-picker/test/date-picker.spec.ts @@ -1,22 +1,22 @@ import DatePicker from '../DatePicker'; import { mount, later, triggerDrag } from '../../../test'; -function filter(type, options) { +function filter(type: string, options: string[]): string[] { const mod = type === 'year' ? 10 : 5; - return options.filter((option) => option % mod === 0); + return options.filter((option: string) => Number(option) % mod === 0); } -function formatter(type, value) { +function formatter(type: string, value: string): string { return `${value} ${type}`; } -test('filter prop', () => { +test('filter prop', async () => { const wrapper = mount(DatePicker, { props: { filter, minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), - value: new Date(2020, 10, 1, 0, 0), + modelValue: new Date(2020, 10, 1, 0, 0), }, }); @@ -30,7 +30,7 @@ test('formatter prop', async () => { formatter, minDate: new Date(2010, 0, 1), maxDate: new Date(2025, 10, 1), - value: new Date(2020, 10, 1, 0, 0), + modelValue: new Date(2020, 10, 1, 0, 0), }, }); @@ -40,7 +40,7 @@ test('formatter prop', async () => { wrapper.find('.van-picker-column ul').trigger('transitionend'); await later(); - expect(wrapper.emitted('change')[0][0].getValues()).toEqual([ + expect((wrapper.vm as Record).getPicker().getValues()).toEqual([ '2020 year', '05 month', '05 day', @@ -54,89 +54,93 @@ test('confirm event', () => { const wrapper = mount(DatePicker, { props: { - value: date, + modelValue: date, minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), }, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020); + 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('confirm')[1][0].getFullYear()).toEqual(2025); + expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025); }); -test('year-month type', () => { +test('year-month type', async () => { const date = new Date(2020, 10, 1, 0, 0); const wrapper = mount(DatePicker, { props: { type: 'year-month', - value: date, + modelValue: date, minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), }, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020); - expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10); + 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('confirm')[1][0].getFullYear()).toEqual(2025); - expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(0); + 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('confirm')[2][0].getFullYear()).toEqual(2025); - expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(10); + expect(wrapper.emitted<[Date]>('confirm')![2][0].getFullYear()).toEqual(2025); + expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(10); }); -test('month-day type', () => { +test('month-day type', async () => { const date = new Date(2020, 10, 1, 0, 0); const wrapper = mount(DatePicker, { props: { type: 'month-day', - value: date, + modelValue: date, minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), }, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10); - expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1); + 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('confirm')[1][0].getMonth()).toEqual(11); - expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1); + 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('confirm')[2][0].getMonth()).toEqual(11); - expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31); + expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11); + expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31); }); -test('datehour type', async () => { +test('datehour type', () => { const wrapper = mount(DatePicker, { props: { minDate: new Date(2010, 0, 1), maxDate: new Date(2025, 10, 1), - value: new Date(2020, 10, 1, 0, 0), + modelValue: new Date(2020, 10, 1, 0, 0), }, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0].getHours()).toEqual(0); + 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('confirm')[1][0].getHours()).toEqual(23); + expect(wrapper.emitted<[Date]>('confirm')![1][0].getHours()).toEqual(23); }); test('cancel event', () => { @@ -150,42 +154,42 @@ test('max-date prop', () => { const maxDate = new Date(2010, 5, 0, 0, 0); const wrapper = mount(DatePicker, { props: { - value: new Date(2020, 10, 30, 30, 30), + modelValue: new Date(2020, 10, 30, 30, 30), maxDate, }, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual(maxDate); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(maxDate); }); test('min-date prop', () => { const minDate = new Date(2030, 0, 0, 0, 0); const wrapper = mount(DatePicker, { props: { - value: new Date(2020, 0, 0, 0, 0), + modelValue: new Date(2020, 0, 0, 0, 0), minDate, }, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual(minDate); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(minDate); }); -test('dynamic set value', () => { +test('dynamic set value', async () => { const wrapper = mount(DatePicker, { props: { - value: new Date(2019, 1, 1), + modelValue: new Date(2019, 1, 1), }, }); - wrapper.setProps({ value: new Date(2019, 1, 1) }); + await wrapper.setProps({ modelValue: new Date(2019, 1, 1) }); wrapper.find('.van-picker__confirm').trigger('click'); - wrapper.setProps({ value: new Date(2025, 1, 1) }); + await wrapper.setProps({ modelValue: new Date(2025, 1, 1) }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2019); - expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025); + expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2019); + expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025); }); test('use min-date with filter', async () => { @@ -196,10 +200,10 @@ test('use min-date with filter', async () => { props: { minDate, maxDate, - value: new Date(2020, 0, 0, 0, 0), - filter(type, values) { + modelValue: new Date(2020, 0, 0, 0, 0), + filter(type: string, values: string[]) { if (type === 'minute') { - return values.filter((value) => value % 30 === 0); + return values.filter((value) => Number(value) % 30 === 0); } return values; @@ -208,7 +212,9 @@ test('use min-date with filter', async () => { }); await later(); - + wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual(new Date(2030, 0, 0, 0, 30)); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual( + new Date(2030, 0, 0, 0, 30) + ); }); diff --git a/src/datetime-picker/test/datetime-picker.legacy.js b/src/datetime-picker/test/datetime-picker.spec.ts similarity index 84% rename from src/datetime-picker/test/datetime-picker.legacy.js rename to src/datetime-picker/test/datetime-picker.spec.ts index 91d8287d9..6bdb19643 100644 --- a/src/datetime-picker/test/datetime-picker.legacy.js +++ b/src/datetime-picker/test/datetime-picker.spec.ts @@ -6,9 +6,9 @@ test('confirm & cancel event', () => { const onCancel = jest.fn(); const wrapper = mount(DatetimePicker, { - listeners: { - confirm: onConfirm, - cancel: onCancel, + props: { + onConfirm, + onCancel, }, }); @@ -33,18 +33,19 @@ test('time type', () => { test('getPicker method', () => { const wrapper = mount(DatetimePicker); + expect(wrapper.vm.getPicker()).toBeTruthy(); }); test('should render title slot correctly', () => { const wrapper = mount(DatetimePicker, { - propsData: { + props: { showToolbar: true, }, - scopedSlots: { + slots: { title: () => 'Custom title', }, }); - expect(wrapper.find('.van-picker__toolbar')).toMatchSnapshot(); + expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot(); }); diff --git a/src/datetime-picker/test/index.spec.js b/src/datetime-picker/test/index.spec.ts similarity index 61% rename from src/datetime-picker/test/index.spec.js rename to src/datetime-picker/test/index.spec.ts index 129af4848..f5173f7c2 100644 --- a/src/datetime-picker/test/index.spec.js +++ b/src/datetime-picker/test/index.spec.ts @@ -1,5 +1,5 @@ -import {later, mount, triggerDrag} from "../../../test" -import DatePicker from "../DatePicker" +import { later, mount, triggerDrag } from '../../../test'; +import DatePicker from '../DatePicker'; test('month-day type', async () => { const date = new Date(2020, 10, 1, 0, 0); @@ -15,20 +15,20 @@ test('month-day type', async () => { await later(); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10); - expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1); + expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10); + expect(wrapper.emitted<[Date]>('confirm')![0][0].getDate()).toEqual(1); await later(); triggerDrag(wrapper.find('.van-picker-column'), 0, -300); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11); - expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1); + expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(11); + expect(wrapper.emitted<[Date]>('confirm')![1][0].getDate()).toEqual(1); await later(); triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11); - expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31); + expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11); + expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31); }); test('v-model', async () => { @@ -37,12 +37,12 @@ test('v-model', async () => { const wrapper = mount(DatePicker, { props: { minDate, - } - }) - + }, + }); + await later(); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual(minDate); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(minDate); }); test('value has an inital value', async () => { @@ -55,5 +55,5 @@ test('value has an inital value', async () => { await later(); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(defaultValue); }); diff --git a/src/datetime-picker/test/time-picker.legacy.js b/src/datetime-picker/test/time-picker.spec.tsx similarity index 61% rename from src/datetime-picker/test/time-picker.legacy.js rename to src/datetime-picker/test/time-picker.spec.tsx index 687e2e1ce..dd4b17210 100644 --- a/src/datetime-picker/test/time-picker.legacy.js +++ b/src/datetime-picker/test/time-picker.spec.tsx @@ -1,12 +1,13 @@ import TimePicker from '../TimePicker'; import { mount, later, triggerDrag } from '../../../test'; +import { ref } from 'vue'; -function filter(type, options) { +function filter(type: string, options: string[]): string[] { const mod = type === 'minute' ? 10 : 5; - return options.filter((option) => option % mod === 0); + return options.filter((option) => Number(option) % mod === 0); } -function formatter(type, value) { +function formatter(type: string, value: string): string { return `${value} ${type}`; } @@ -24,7 +25,7 @@ test('format initial value', () => { test('max-hour & max-minute', () => { const wrapper = mount(TimePicker, { props: { - value: '23:59', + modelValue: '23:59', maxHour: 2, maxMinute: 2, }, @@ -37,7 +38,7 @@ test('filter prop', () => { const wrapper = mount(TimePicker, { props: { filter, - value: '12:00', + modelValue: '12:00', }, }); @@ -49,7 +50,7 @@ test('formatter prop', async () => { props: { filter, formatter, - value: '12:00', + modelValue: '12:00', }, }); @@ -59,7 +60,7 @@ test('formatter prop', async () => { wrapper.find('.van-picker-column ul').trigger('transitionend'); await later(); - expect(wrapper.emitted('change')[0][0].getValues()).toEqual([ + expect((wrapper.vm as Record).getPicker().getValues()).toEqual([ '20 hour', '00 minute', ]); @@ -68,13 +69,13 @@ test('formatter prop', async () => { test('confirm event', () => { const wrapper = mount(TimePicker, { props: { - value: '12:00', + modelValue: '12:00', }, }); triggerDrag(wrapper.find('.van-picker-column'), 0, -100); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual('23:00'); + expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('23:00'); }); test('cancel event', () => { @@ -84,69 +85,68 @@ test('cancel event', () => { expect(wrapper.emitted('cancel')).toBeTruthy(); }); -test('dynamic set value', () => { +test('dynamic set value', async () => { const wrapper = mount(TimePicker); - wrapper.setProps({ value: '00:00' }); + await wrapper.setProps({ modelValue: '00:00' }); wrapper.find('.van-picker__confirm').trigger('click'); - wrapper.setProps({ value: '22:30' }); + await wrapper.setProps({ modelValue: '22:30' }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00'); - expect(wrapper.emitted('confirm')[1][0]).toEqual('22:30'); + expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('00:00'); + expect(wrapper.emitted<[string]>('confirm')![1][0]).toEqual('22:30'); }); test('change min-minute and emit correct value', async () => { const wrapper = mount(TimePicker, { props: { - value: '12:00', + modelValue: '12:00', minMinute: 0, }, }); await later(); - - wrapper.setProps({ minMinute: 30 }); + await wrapper.setProps({ minMinute: 30 }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual('12:30'); + expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('12:30'); }); test('set max-hour & max-minute smaller than current then emit correct value', async () => { const wrapper = mount(TimePicker, { props: { - value: '23:59', + modelvalue: '23:59', }, }); + await later(); - wrapper.setProps({ + await wrapper.setProps({ maxHour: 2, maxMinute: 2, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00'); + expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('00:00'); }); test('set min-minute dynamically', async () => { const wrapper = mount({ - template: ` - - `, - data() { - return { - currentTime: '12:30', - }; + emits: ['change'], + setup(_, { emit }) { + const currentTime = ref('12:30'); + return () => ( + 12 ? 0 : 30} + minHour={12} + maxHour={13} + onChange={(value) => emit('change', value)} + /> + ); }, }); triggerDrag(wrapper.find('.van-picker-column'), 0, -100); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual('13:00'); + await later(); + expect(wrapper.emitted<[string]>('change')![0][0]).toEqual('13:00'); });