mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Area): update all test cases
This commit is contained in:
chenjiahan
parent
8d49b88748
commit
0706d464b6
@ -41,7 +41,7 @@ export const areaListEn = {
|
||||
330226: 'Ninghai',
|
||||
330281: 'Yuyao',
|
||||
330282: 'Cixi',
|
||||
330327: 'Cangnan',
|
||||
330302: 'Lucheng',
|
||||
330328: 'Wencheng',
|
||||
330329: 'Shuntai',
|
||||
330381: 'Ruian',
|
||||
|
||||
@ -290,7 +290,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
Cangnan
|
||||
Lucheng
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
@ -487,12 +487,30 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<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">
|
||||
Choose
|
||||
</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">
|
||||
Choose
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask"
|
||||
|
||||
@ -24,18 +24,6 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
Bottom
|
||||
</div>
|
||||
@ -122,11 +110,31 @@ exports[`should render two columns when columns-num prop is two 1`] = `
|
||||
</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 reset selected option after calling the reset method 1`] = `
|
||||
exports[`should watch modelValue prop and render correctly 1`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
北京市
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`should watch modelValue prop and render correctly 2`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
@ -138,43 +146,7 @@ exports[`should reset selected option after calling the reset method 1`] = `
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`should reset selected option after calling the reset method 2`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
北京市
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`should watch value prop and render correctly 1`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
北京市
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`should watch value prop and render correctly 2`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
class="van-picker-column__item van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
天津市
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`should watch value prop and render correctly 3`] = `
|
||||
exports[`should watch modelValue prop and render correctly 3`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="0"
|
||||
@ -1,44 +1,37 @@
|
||||
import { Area } from '..';
|
||||
import { areaList } from '../demo/area-simple';
|
||||
import { mount, later, triggerDrag } from '../../../test';
|
||||
import {
|
||||
PickerCancelEventParams,
|
||||
PickerChangeEventParams,
|
||||
PickerConfirmEventParams,
|
||||
} from '../../picker';
|
||||
|
||||
const firstOption = [
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
{ code: '110101', name: '东城区' },
|
||||
];
|
||||
|
||||
const secondOption = [
|
||||
{ code: '120000', name: '天津市' },
|
||||
{ code: '120100', name: '天津市' },
|
||||
{ code: '120101', name: '和平区' },
|
||||
];
|
||||
|
||||
test('should emit confirm event after click the confirm button', () => {
|
||||
test('should emit confirm event after click the confirm button', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
props: {
|
||||
areaList,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0]).toEqual([firstOption, [0, 0, 0]]);
|
||||
await wrapper.find('.van-picker__confirm').trigger('click');
|
||||
const params = wrapper.emitted<PickerConfirmEventParams[]>('confirm')?.[0];
|
||||
expect(params?.[0].selectedValues).toEqual(['110000', '110100', '110101']);
|
||||
});
|
||||
|
||||
test('should emit cancel event after click the cancel button', () => {
|
||||
const onCancel = jest.fn();
|
||||
test('should emit cancel event after click the cancel button', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
props: {
|
||||
areaList,
|
||||
onCancel,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__cancel').trigger('click');
|
||||
expect(onCancel).toHaveBeenLastCalledWith(firstOption, [0, 0, 0]);
|
||||
await wrapper.find('.van-picker__cancel').trigger('click');
|
||||
const params = wrapper.emitted<PickerCancelEventParams[]>('cancel')?.[0];
|
||||
expect(params?.[0].selectedValues).toEqual(['110000', '110100', '110101']);
|
||||
});
|
||||
|
||||
test('should watch value prop and render correctly', async () => {
|
||||
test('should watch modelValue prop and render correctly', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
props: {
|
||||
areaList,
|
||||
@ -49,14 +42,13 @@ test('should watch value prop and render correctly', async () => {
|
||||
expect(
|
||||
wrapper.find('.van-picker-column__item--selected').html()
|
||||
).toMatchSnapshot();
|
||||
await wrapper.setProps({ value: '120225' });
|
||||
|
||||
await later();
|
||||
await wrapper.setProps({ modelValue: '120225' });
|
||||
expect(
|
||||
wrapper.find('.van-picker-column__item--selected').html()
|
||||
).toMatchSnapshot();
|
||||
|
||||
await wrapper.setProps({ value: '' });
|
||||
await wrapper.setProps({ modelValue: '' });
|
||||
expect(
|
||||
wrapper.find('.van-picker-column__item--selected').html()
|
||||
).toMatchSnapshot();
|
||||
@ -75,37 +67,8 @@ test('should emit change event after dragging options', () => {
|
||||
triggerDrag(columns[2], 0, -100);
|
||||
columns[2].find('ul').trigger('transitionend');
|
||||
|
||||
expect(wrapper.emitted('change')[0][0]).toEqual(secondOption);
|
||||
});
|
||||
|
||||
test('should return current values when calling getValues method', () => {
|
||||
const wrapper = mount(Area, {
|
||||
props: {
|
||||
areaList,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.getValues()).toEqual(firstOption);
|
||||
});
|
||||
|
||||
test('should reset selected option after calling the reset method', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
props: {
|
||||
areaList,
|
||||
value: '120225',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(
|
||||
wrapper.find('.van-picker-column__item--selected').html()
|
||||
).toMatchSnapshot();
|
||||
|
||||
wrapper.vm.reset();
|
||||
await later();
|
||||
expect(
|
||||
wrapper.find('.van-picker-column__item--selected').html()
|
||||
).toMatchSnapshot();
|
||||
const params = wrapper.emitted<PickerChangeEventParams[]>('change')?.[0];
|
||||
expect(params?.[0].selectedValues).toEqual(['120000', '120100', '120101']);
|
||||
});
|
||||
|
||||
test('should render two columns when columns-num prop is two', async () => {
|
||||
Loading…
x
Reference in New Issue
Block a user