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);
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
|
||||
@ -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