diff --git a/packages/vant/src/datetime-picker/test/datetime-picker.legacy.tsx b/packages/vant/src/datetime-picker/test/datetime-picker.legacy.tsx index 76c0978b5..618e36f60 100644 --- a/packages/vant/src/datetime-picker/test/datetime-picker.legacy.tsx +++ b/packages/vant/src/datetime-picker/test/datetime-picker.legacy.tsx @@ -25,18 +25,6 @@ test('should emit cancel event after clicking the confirm button', () => { expect(onCancel).toHaveBeenCalledTimes(1); }); -test('should render time type correctly', () => { - const wrapper = mount(DatetimePicker, { - props: { - type: 'time', - minHour: 22, - minMinute: 58, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - test('should allow to call getPicker method', () => { const wrapper = mount(DatetimePicker); diff --git a/packages/vant/src/datetime-picker/test/time-picker.legacy.tsx b/packages/vant/src/datetime-picker/test/time-picker.legacy.tsx deleted file mode 100644 index b3cdf3e04..000000000 --- a/packages/vant/src/datetime-picker/test/time-picker.legacy.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import TimePicker from '../TimePicker'; -import { mount, later, triggerDrag } from '../../../test'; -import { ref, reactive } from 'vue'; -import { useExpose } from '../../composables/use-expose'; - -function filter(type: string, options: string[]): string[] { - const mod = type === 'minute' ? 10 : 5; - return options.filter((option) => Number(option) % mod === 0); -} - -function formatter(type: string, value: string): string { - return `${value} ${type}`; -} - -test('format initial value', () => { - const wrapper = mount(TimePicker, { - props: { - minHour: 22, - minMinute: 58, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('max-hour & max-minute', () => { - const wrapper = mount(TimePicker, { - props: { - modelValue: '23:59', - maxHour: 2, - maxMinute: 2, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('filter prop', () => { - const wrapper = mount(TimePicker, { - props: { - filter, - modelValue: '12:00', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('formatter prop', async () => { - const wrapper = mount(TimePicker, { - props: { - filter, - formatter, - modelValue: '12:00', - }, - }); - - 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([ - '20 hour', - '00 minute', - ]); -}); - -test('confirm event', () => { - const wrapper = mount(TimePicker, { - props: { - modelValue: '12:00', - }, - }); - - triggerDrag(wrapper.find('.van-picker-column'), 0, -100); - wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('23:00'); -}); - -test('cancel event', () => { - const wrapper = mount(TimePicker); - - wrapper.find('.van-picker__cancel').trigger('click'); - expect(wrapper.emitted('cancel')).toBeTruthy(); -}); - -test('dynamic set value', async () => { - const wrapper = mount(TimePicker); - - await wrapper.setProps({ modelValue: '00:00' }); - wrapper.find('.van-picker__confirm').trigger('click'); - await wrapper.setProps({ modelValue: '22:30' }); - wrapper.find('.van-picker__confirm').trigger('click'); - - 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: { - modelValue: '12:00', - minMinute: 0, - }, - }); - - await later(); - await wrapper.setProps({ minMinute: 30 }); - wrapper.find('.van-picker__confirm').trigger('click'); - 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: { - modelValue: '23:59', - }, - }); - - await later(); - await wrapper.setProps({ - maxHour: 2, - maxMinute: 2, - }); - - wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('00:00'); -}); - -test('set min-minute dynamically', async () => { - const wrapper = mount({ - 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'); - await later(); - expect(wrapper.emitted<[string]>('change')![0][0]).toEqual('13:00'); -}); - -test('should emit value correctly when dynamic change min-hour', async () => { - const wrapper = mount({ - emits: ['confirm'], - setup(_, { emit }) { - const state = reactive({ - time: '10:30', - minHour: 1, - }); - - const onChange = () => { - state.minHour = 11; - }; - - 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('11:30'); -}); diff --git a/packages/vant/src/time-picker/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/time-picker/test/__snapshots__/index.spec.tsx.snap new file mode 100644 index 000000000..95f3484ed --- /dev/null +++ b/packages/vant/src/time-picker/test/__snapshots__/index.spec.tsx.snap @@ -0,0 +1,191 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should filter options when using filter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 20 +
    +
    • +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 40 +
    +
    • +
+
+
+
+
+
+
+
+`; + +exports[`should format options correctly when using formatter prop 1`] = ` +
+
+ + +
+
+
+
    +
  • +
    + 00 hour +
    +
    • +
  • +
    + 10 hour +
    +
    • +
  • +
    + 20 hour +
    +
    • +
+
+
+
    +
  • +
    + 00 minute +
    +
    • +
  • +
    + 20 minute +
    +
    • +
  • +
    + 40 minute +
    +
    • +
+
+
+
+
+
+
+
+`; diff --git a/packages/vant/src/time-picker/test/index.spec.tsx b/packages/vant/src/time-picker/test/index.spec.tsx new file mode 100644 index 000000000..e8a6b920e --- /dev/null +++ b/packages/vant/src/time-picker/test/index.spec.tsx @@ -0,0 +1,173 @@ +import TimePicker from '../TimePicker'; +import { mount } from '../../../test'; +import type { PickerOption } from '../../picker'; + +function filter(type: string, options: PickerOption[]): PickerOption[] { + const mod = type === 'minute' ? 20 : 10; + return options.filter((option) => Number(option.value) % mod === 0); +} + +test('should format initial value correctly', () => { + const onUpdate = jest.fn(); + mount(TimePicker, { + props: { + minHour: 22, + minMinute: 58, + 'onUpdate:modelValue': onUpdate, + }, + }); + + expect(onUpdate.mock.calls[0]).toEqual(['22:58']); +}); + +test('should update modelValue correctly when using max-hour and max-minute prop', () => { + const onUpdate = jest.fn(); + mount(TimePicker, { + props: { + modelValue: '23:59', + maxHour: 2, + maxMinute: 2, + 'onUpdate:modelValue': onUpdate, + }, + }); + + expect(onUpdate.mock.calls[0]).toEqual(['02:02']); +}); + +test('should filter options when using filter prop', () => { + const wrapper = mount(TimePicker, { + props: { + filter, + modelValue: '12:00', + }, + }); + + 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 wrapper = mount(TimePicker, { + props: { + filter, + formatter, + modelValue: '12:00', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should emit confirm event after clicking the confirm button', () => { + const wrapper = mount(TimePicker, { + props: { + modelValue: '12:00', + }, + }); + + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')).toEqual([ + [ + { + selectedOptions: [ + { text: '12', value: '12' }, + { text: '00', value: '00' }, + ], + selectedValues: ['12', '00'], + }, + ], + ]); +}); + +test('should emit cancel event after clicking the cancel button', () => { + const wrapper = mount(TimePicker); + + wrapper.find('.van-picker__cancel').trigger('click'); + expect(wrapper.emitted('cancel')).toBeTruthy(); +}); + +test('should emit confirm event correctly after setting values', async () => { + const wrapper = mount(TimePicker); + + await wrapper.setProps({ modelValue: '00:00' }); + await wrapper.find('.van-picker__confirm').trigger('click'); + await wrapper.setProps({ modelValue: '22:30' }); + await wrapper.find('.van-picker__confirm').trigger('click'); + + expect(wrapper.emitted('confirm')).toEqual([ + [ + { + selectedOptions: [ + { text: '00', value: '00' }, + { text: '00', value: '00' }, + ], + selectedValues: ['00', '00'], + }, + ], + [ + { + selectedOptions: [ + { text: '22', value: '22' }, + { text: '30', value: '30' }, + ], + selectedValues: ['22', '30'], + }, + ], + ]); +}); + +test('should emit confirm event correctly after setting range', async () => { + const onUpdate = jest.fn(); + const wrapper = mount(TimePicker, { + props: { + minHour: 0, + minMinute: 0, + modelValue: '12:00', + 'onUpdate:modelValue': onUpdate, + }, + }); + + await wrapper.setProps({ minHour: 20, minMinute: 30 }); + await wrapper.find('.van-picker__confirm').trigger('click'); + expect(onUpdate.mock.calls[0]).toEqual(['20:30']); + expect(wrapper.emitted('confirm')).toEqual([ + [ + { + selectedOptions: [ + { text: '20', value: '20' }, + { text: '30', value: '30' }, + ], + selectedValues: ['20', '30'], + }, + ], + ]); +}); + +test('should emit confirm event correctly after setting smaller max-hour and max-minute', async () => { + const wrapper = mount(TimePicker, { + props: { + modelValue: '23:59', + }, + }); + + await wrapper.setProps({ + maxHour: 2, + maxMinute: 2, + }); + + await wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')).toEqual([ + [ + { + selectedOptions: [ + { text: '00', value: '00' }, + { text: '00', value: '00' }, + ], + selectedValues: ['00', '00'], + }, + ], + ]); +});