mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(DatePicker): migrate legacy test cases (#11123)
This commit is contained in:
neverland
GitHub
parent
baa9c33dd4
commit
9c6b416bfb
@ -0,0 +1,219 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should filter options when using filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
<button type="button"
|
||||
class="van-picker__cancel van-haptics-feedback"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
class="van-picker__confirm van-haptics-feedback"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-picker__columns"
|
||||
style="height: 264px;"
|
||||
>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
2000
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
2010
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
10
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
10
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
20
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
30
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask"
|
||||
style="background-size: 100% 110px;"
|
||||
>
|
||||
</div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||
style="height: 44px;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should format options correctly when using formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
<button type="button"
|
||||
class="van-picker__cancel van-haptics-feedback"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
class="van-picker__confirm van-haptics-feedback"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-picker__columns"
|
||||
style="height: 264px;"
|
||||
>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
2000 year
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
2010 year
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
10 month
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||
class="van-picker-column__wrapper"
|
||||
>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
10 day
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
20 day
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
30 day
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask"
|
||||
style="background-size: 100% 110px;"
|
||||
>
|
||||
</div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||
style="height: 44px;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render title slot correctly 1`] = `
|
||||
<div class="van-picker__toolbar">
|
||||
<button type="button"
|
||||
class="van-picker__cancel van-haptics-feedback"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
Custom title
|
||||
<button type="button"
|
||||
class="van-picker__confirm van-haptics-feedback"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@ -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<string, any>).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)
|
||||
// );
|
||||
// });
|
||||
@ -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 () => (
|
||||
// <DatetimePicker
|
||||
// v-model={state.date}
|
||||
// minDate={state.minDate}
|
||||
// onConfirm={(value: Date) => emit('confirm', value)}
|
||||
// />
|
||||
// );
|
||||
// },
|
||||
// });
|
||||
|
||||
// await later();
|
||||
// (wrapper.vm as Record<string, any>).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)]);
|
||||
// });
|
||||
@ -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']);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user