mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +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
|
||||
|
||||
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`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar">
|
||||
@ -45,7 +33,7 @@ exports[`should move to first option when all options are disabled 1`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
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">
|
||||
A2
|
||||
@ -69,7 +57,7 @@ exports[`should move to first option when all options are disabled 1`] = `
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
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">
|
||||
B2
|
||||
@ -88,80 +76,3 @@ exports[`should move to first option when all options are disabled 1`] = `
|
||||
</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 { mount, triggerDrag } from '../../../test';
|
||||
import type { ComponentInstance } from '../../utils';
|
||||
import { Picker, PickerConfirmEventParams } from '..';
|
||||
import { mount } from '../../../test';
|
||||
|
||||
const COLUMNS = [
|
||||
const cascadeColumns = [
|
||||
{
|
||||
text: 'A1',
|
||||
value: 'A1',
|
||||
children: [
|
||||
{
|
||||
text: 'B1',
|
||||
children: [{ text: 'C1' }, { text: 'C2' }],
|
||||
value: 'B1',
|
||||
children: [
|
||||
{ text: 'C1', value: 'C1' },
|
||||
{ text: 'C2', value: 'C2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'B2',
|
||||
children: [{ text: 'C3' }, { text: 'C4' }],
|
||||
value: 'B2',
|
||||
children: [
|
||||
{ text: 'C3', value: 'C3' },
|
||||
{ text: 'C4', value: 'C4' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'A2',
|
||||
value: 'A2',
|
||||
children: [
|
||||
{
|
||||
text: 'B3',
|
||||
children: [{ text: 'C5' }, { text: 'C6' }],
|
||||
value: 'B3',
|
||||
children: [
|
||||
{ text: 'C5', value: 'C5' },
|
||||
{ text: 'C6', value: 'C6' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'B4',
|
||||
children: [{ text: 'C7' }, { text: 'C8' }],
|
||||
value: 'B4',
|
||||
children: [
|
||||
{ text: 'C7', value: 'C7' },
|
||||
{ text: 'C8', value: 'C8' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const pickColumnText = (column: Array<{ text: string }>) =>
|
||||
column.map((item: { text: string }) => item.text);
|
||||
|
||||
type ColumnValues = Array<{
|
||||
text: string;
|
||||
children?: ColumnValues[];
|
||||
}>;
|
||||
|
||||
test('cascade columns', () => {
|
||||
test('should emit confirm event for cascade picker correctly', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
showToolbar: true,
|
||||
columns: COLUMNS,
|
||||
columns: cascadeColumns,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
||||
).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']);
|
||||
const params = wrapper.emitted<PickerConfirmEventParams[]>('confirm')?.[0];
|
||||
expect(params?.[0].selectedValues).toEqual(['A1', 'B1', 'C1']);
|
||||
});
|
||||
|
||||
test('setColumnValue of cascade columns', () => {
|
||||
test('should update cascade options correctly', async () => {
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
showToolbar: true,
|
||||
columns: COLUMNS,
|
||||
columns: cascadeColumns,
|
||||
},
|
||||
});
|
||||
|
||||
(wrapper.vm as ComponentInstance).setColumnValue(0, 'A2');
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
||||
).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']);
|
||||
await wrapper.findAll('.van-picker-column__item')[1].trigger('click');
|
||||
await wrapper.find('.van-picker__confirm').trigger('click');
|
||||
const params = wrapper.emitted<PickerConfirmEventParams[]>('confirm')?.[0];
|
||||
expect(params?.[0].selectedValues).toEqual(['A2', 'B3', 'C5']);
|
||||
});
|
||||
|
||||
test('setValues of cascade columns', () => {
|
||||
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', () => {
|
||||
test('should move to next option when default option is disabled', async () => {
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
columns: [
|
||||
{
|
||||
text: 'A1',
|
||||
value: 'A1',
|
||||
disabled: true,
|
||||
children: [{ text: 'B1' }, { text: 'B2' }],
|
||||
children: [
|
||||
{ text: 'B1', value: 'B1' },
|
||||
{ text: 'B2', value: 'B2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
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', () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user