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 { later, mount } from '../../../test';
|
||||||
import DatePicker from '..';
|
import DatePicker from '..';
|
||||||
import type {
|
import type {
|
||||||
|
PickerOption,
|
||||||
PickerCancelEventParams,
|
PickerCancelEventParams,
|
||||||
PickerConfirmEventParams,
|
PickerConfirmEventParams,
|
||||||
} from '../../picker';
|
} from '../../picker';
|
||||||
@ -119,3 +120,81 @@ test('should render with min-date correctly', async () => {
|
|||||||
wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0].selectedValues
|
wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0].selectedValues
|
||||||
).toEqual(['2000', '10', '10']);
|
).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