mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(TimePicker): migrate test cases
This commit is contained in:
chenjiahan
parent
2a8bb86fbb
commit
f327d5bbc2
@ -25,18 +25,6 @@ test('should emit cancel event after clicking the confirm button', () => {
|
|||||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
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', () => {
|
test('should allow to call getPicker method', () => {
|
||||||
const wrapper = mount(DatetimePicker);
|
const wrapper = mount(DatetimePicker);
|
||||||
|
|
||||||
|
|||||||
@ -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<string, any>).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 () => (
|
|
||||||
<TimePicker
|
|
||||||
v-model={currentTime.value}
|
|
||||||
minMinute={Number(currentTime.value.split(':')[0]) > 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 () => (
|
|
||||||
<TimePicker
|
|
||||||
v-model={state.time}
|
|
||||||
minHour={state.minHour}
|
|
||||||
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('11:30');
|
|
||||||
});
|
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
// 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">
|
||||||
|
00
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
00
|
||||||
|
</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">
|
||||||
|
40
|
||||||
|
</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">
|
||||||
|
00 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20 hour
|
||||||
|
</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">
|
||||||
|
00 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
40 minute
|
||||||
|
</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>
|
||||||
|
`;
|
||||||
173
packages/vant/src/time-picker/test/index.spec.tsx
Normal file
173
packages/vant/src/time-picker/test/index.spec.tsx
Normal file
@ -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'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user