mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-23 18:00:27 +08:00
test(Picker): update cascade test cases
This commit is contained in:
chenjiahan
parent
bda3617d14
commit
5900affe37
@ -1,17 +1,5 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`disabled in cascade 1`] = `
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="-1"
|
|
||||||
class="van-picker-column__item van-picker-column__item--disabled"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
A2
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should move to first option when all options are disabled 1`] = `
|
exports[`should move to first option when all options are disabled 1`] = `
|
||||||
<div class="van-picker">
|
<div class="van-picker">
|
||||||
<div class="van-picker__toolbar">
|
<div class="van-picker__toolbar">
|
||||||
@ -45,7 +33,7 @@ exports[`should move to first option when all options are disabled 1`] = `
|
|||||||
<li role="button"
|
<li role="button"
|
||||||
style="height: 44px;"
|
style="height: 44px;"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
class="van-picker-column__item van-picker-column__item--disabled"
|
class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected"
|
||||||
>
|
>
|
||||||
<div class="van-ellipsis">
|
<div class="van-ellipsis">
|
||||||
A2
|
A2
|
||||||
@ -69,7 +57,7 @@ exports[`should move to first option when all options are disabled 1`] = `
|
|||||||
<li role="button"
|
<li role="button"
|
||||||
style="height: 44px;"
|
style="height: 44px;"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
class="van-picker-column__item van-picker-column__item--disabled"
|
class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected"
|
||||||
>
|
>
|
||||||
<div class="van-ellipsis">
|
<div class="van-ellipsis">
|
||||||
B2
|
B2
|
||||||
@ -88,80 +76,3 @@ exports[`should move to first option when all options are disabled 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`should move to next option when default option is disabled 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, 66px, 0); transition-duration: 0ms; transition-property: none;"
|
|
||||||
class="van-picker-column__wrapper"
|
|
||||||
>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="-1"
|
|
||||||
class="van-picker-column__item van-picker-column__item--disabled"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
A1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
A2
|
|
||||||
</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">
|
|
||||||
B3
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
B4
|
|
||||||
</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>
|
|
||||||
`;
|
|
||||||
|
|||||||
@ -1,180 +1,107 @@
|
|||||||
import { Picker } from '..';
|
import { Picker, PickerConfirmEventParams } from '..';
|
||||||
import { mount, triggerDrag } from '../../../test';
|
import { mount } from '../../../test';
|
||||||
import type { ComponentInstance } from '../../utils';
|
|
||||||
|
|
||||||
const COLUMNS = [
|
const cascadeColumns = [
|
||||||
{
|
{
|
||||||
text: 'A1',
|
text: 'A1',
|
||||||
|
value: 'A1',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
text: 'B1',
|
text: 'B1',
|
||||||
children: [{ text: 'C1' }, { text: 'C2' }],
|
value: 'B1',
|
||||||
|
children: [
|
||||||
|
{ text: 'C1', value: 'C1' },
|
||||||
|
{ text: 'C2', value: 'C2' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'B2',
|
text: 'B2',
|
||||||
children: [{ text: 'C3' }, { text: 'C4' }],
|
value: 'B2',
|
||||||
|
children: [
|
||||||
|
{ text: 'C3', value: 'C3' },
|
||||||
|
{ text: 'C4', value: 'C4' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'A2',
|
text: 'A2',
|
||||||
|
value: 'A2',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
text: 'B3',
|
text: 'B3',
|
||||||
children: [{ text: 'C5' }, { text: 'C6' }],
|
value: 'B3',
|
||||||
|
children: [
|
||||||
|
{ text: 'C5', value: 'C5' },
|
||||||
|
{ text: 'C6', value: 'C6' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'B4',
|
text: 'B4',
|
||||||
children: [{ text: 'C7' }, { text: 'C8' }],
|
value: 'B4',
|
||||||
|
children: [
|
||||||
|
{ text: 'C7', value: 'C7' },
|
||||||
|
{ text: 'C8', value: 'C8' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const pickColumnText = (column: Array<{ text: string }>) =>
|
test('should emit confirm event for cascade picker correctly', () => {
|
||||||
column.map((item: { text: string }) => item.text);
|
|
||||||
|
|
||||||
type ColumnValues = Array<{
|
|
||||||
text: string;
|
|
||||||
children?: ColumnValues[];
|
|
||||||
}>;
|
|
||||||
|
|
||||||
test('cascade columns', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
showToolbar: true,
|
columns: cascadeColumns,
|
||||||
columns: COLUMNS,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
|
|
||||||
expect(
|
const params = wrapper.emitted<PickerConfirmEventParams[]>('confirm')?.[0];
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
expect(params?.[0].selectedValues).toEqual(['A1', 'B1', 'C1']);
|
||||||
).toEqual(['A1', 'B1', 'C1']);
|
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
|
||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
|
||||||
|
|
||||||
expect(
|
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('change')![0][0])
|
|
||||||
).toEqual(['A2', 'B3', 'C5']);
|
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
expect(
|
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0])
|
|
||||||
).toEqual(['A2', 'B3', 'C5']);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('setColumnValue of cascade columns', () => {
|
test('should update cascade options correctly', async () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
showToolbar: true,
|
columns: cascadeColumns,
|
||||||
columns: COLUMNS,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
(wrapper.vm as ComponentInstance).setColumnValue(0, 'A2');
|
await wrapper.findAll('.van-picker-column__item')[1].trigger('click');
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
await wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(
|
const params = wrapper.emitted<PickerConfirmEventParams[]>('confirm')?.[0];
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
expect(params?.[0].selectedValues).toEqual(['A2', 'B3', 'C5']);
|
||||||
).toEqual(['A2', 'B3', 'C5']);
|
|
||||||
|
|
||||||
(wrapper.vm as ComponentInstance).setColumnValue(1, 'B4');
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
expect(
|
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0])
|
|
||||||
).toEqual(['A2', 'B4', 'C7']);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('setValues of cascade columns', () => {
|
test('should move to next option when default option is disabled', async () => {
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
showToolbar: true,
|
|
||||||
columns: COLUMNS,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
(wrapper.vm as ComponentInstance).setValues(['A2', 'B4', 'C8']);
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
expect(
|
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
|
||||||
).toEqual(['A2', 'B4', 'C8']);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('setColumnIndex of cascade columns', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
showToolbar: true,
|
|
||||||
columns: COLUMNS,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
(wrapper.vm as ComponentInstance).setColumnIndex(0, 1);
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
expect(
|
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
|
||||||
).toEqual(['A2', 'B3', 'C5']);
|
|
||||||
|
|
||||||
(wrapper.vm as ComponentInstance).setColumnIndex(1, 1);
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
expect(
|
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0])
|
|
||||||
).toEqual(['A2', 'B4', 'C7']);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('setIndexes of cascade columns', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
showToolbar: true,
|
|
||||||
columns: COLUMNS,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
(wrapper.vm as ComponentInstance).setIndexes([1, 0, 1]);
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
expect(
|
|
||||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
|
||||||
).toEqual(['A2', 'B3', 'C6']);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disabled in cascade', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
showToolbar: true,
|
|
||||||
columns: [
|
|
||||||
COLUMNS[0],
|
|
||||||
{
|
|
||||||
...COLUMNS[1],
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(
|
|
||||||
wrapper.find('.van-picker-column__item--disabled').html()
|
|
||||||
).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should move to next option when default option is disabled', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
text: 'A1',
|
text: 'A1',
|
||||||
|
value: 'A1',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
children: [{ text: 'B1' }, { text: 'B2' }],
|
children: [
|
||||||
|
{ text: 'B1', value: 'B1' },
|
||||||
|
{ text: 'B2', value: 'B2' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'A2',
|
text: 'A2',
|
||||||
children: [{ text: 'B3' }, { text: 'B4' }],
|
value: 'A2',
|
||||||
|
children: [
|
||||||
|
{ text: 'B3', value: 'B3' },
|
||||||
|
{ text: 'B4', value: 'B4' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
await wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
|
const params = wrapper.emitted<PickerConfirmEventParams[]>('confirm')?.[0];
|
||||||
|
expect(params?.[0].selectedValues).toEqual(['A2', 'B3']);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should move to first option when all options are disabled', () => {
|
test('should move to first option when all options are disabled', () => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user