mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Picker): add test cases (#8664)
* test(Picker): add test cases * test(Picker): adjust type
This commit is contained in:
nemo-shen
GitHub
parent
6d2100c625
commit
a69fb5f1eb
@ -1,69 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`disabled in cascade 1`] = `
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">A1</div>
|
||||
</li>
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">A2</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">B1</div>
|
||||
</li>
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">B2</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 move to next option when default option is disabled 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">A1</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">A2</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">B3</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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>
|
||||
`;
|
||||
167
src/picker/test/__snapshots__/cascade.spec.ts.snap
Normal file
167
src/picker/test/__snapshots__/cascade.spec.ts.snap
Normal file
@ -0,0 +1,167 @@
|
||||
// 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">
|
||||
<button type="button"
|
||||
class="van-picker__cancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
class="van-picker__confirm"
|
||||
>
|
||||
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="-1"
|
||||
class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
A1
|
||||
</div>
|
||||
</li>
|
||||
<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>
|
||||
</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="-1"
|
||||
class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
B1
|
||||
</div>
|
||||
</li>
|
||||
<li role="button"
|
||||
style="height: 44px;"
|
||||
tabindex="-1"
|
||||
class="van-picker-column__item van-picker-column__item--disabled"
|
||||
>
|
||||
<div class="van-ellipsis">
|
||||
B2
|
||||
</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 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"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
class="van-picker__confirm"
|
||||
>
|
||||
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,5 +1,6 @@
|
||||
import { Picker } from '..';
|
||||
import { mount, triggerDrag } from '../../../test';
|
||||
import type { ComponentInstance } from '../../utils';
|
||||
|
||||
const COLUMNS = [
|
||||
{
|
||||
@ -30,6 +31,14 @@ const COLUMNS = [
|
||||
},
|
||||
];
|
||||
|
||||
const pickColumnText = (column: Array<{ text: string }>) =>
|
||||
column.map((item: { text: string }) => item.text);
|
||||
|
||||
type ColumnValues = Array<{
|
||||
text: string;
|
||||
children?: ColumnValues[];
|
||||
}>;
|
||||
|
||||
test('cascade columns', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
@ -39,14 +48,22 @@ test('cascade columns', () => {
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(['A1', 'B1', 'C1']);
|
||||
|
||||
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(wrapper.emitted('change')[0][1]).toEqual(['A2', 'B3', 'C5']);
|
||||
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('change')![0][0])
|
||||
).toEqual(['A2', 'B3', 'C5']);
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0]).toEqual(['A2', 'B3', 'C5']);
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0])
|
||||
).toEqual(['A2', 'B3', 'C5']);
|
||||
});
|
||||
|
||||
test('setColumnValue of cascade columns', () => {
|
||||
@ -57,13 +74,17 @@ test('setColumnValue of cascade columns', () => {
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.setColumnValue(0, 'A2');
|
||||
(wrapper.vm as ComponentInstance).setColumnValue(0, 'A2');
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(['A2', 'B3', 'C5']);
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
||||
).toEqual(['A2', 'B3', 'C5']);
|
||||
|
||||
wrapper.vm.setColumnValue(1, 'B4');
|
||||
(wrapper.vm as ComponentInstance).setColumnValue(1, 'B4');
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0]).toEqual(['A2', 'B4', 'C7']);
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0])
|
||||
).toEqual(['A2', 'B4', 'C7']);
|
||||
});
|
||||
|
||||
test('setValues of cascade columns', () => {
|
||||
@ -74,9 +95,11 @@ test('setValues of cascade columns', () => {
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.setValues(['A2', 'B4', 'C8']);
|
||||
(wrapper.vm as ComponentInstance).setValues(['A2', 'B4', 'C8']);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(['A2', 'B4', 'C8']);
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
||||
).toEqual(['A2', 'B4', 'C8']);
|
||||
});
|
||||
|
||||
test('setColumnIndex of cascade columns', () => {
|
||||
@ -87,13 +110,17 @@ test('setColumnIndex of cascade columns', () => {
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.setColumnIndex(0, 1);
|
||||
(wrapper.vm as ComponentInstance).setColumnIndex(0, 1);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(['A2', 'B3', 'C5']);
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
||||
).toEqual(['A2', 'B3', 'C5']);
|
||||
|
||||
wrapper.vm.setColumnIndex(1, 1);
|
||||
(wrapper.vm as ComponentInstance).setColumnIndex(1, 1);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0]).toEqual(['A2', 'B4', 'C7']);
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0])
|
||||
).toEqual(['A2', 'B4', 'C7']);
|
||||
});
|
||||
|
||||
test('setIndexes of cascade columns', () => {
|
||||
@ -104,9 +131,11 @@ test('setIndexes of cascade columns', () => {
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.setIndexes([1, 0, 1]);
|
||||
(wrapper.vm as ComponentInstance).setIndexes([1, 0, 1]);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(['A2', 'B3', 'C6']);
|
||||
expect(
|
||||
pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0])
|
||||
).toEqual(['A2', 'B3', 'C6']);
|
||||
});
|
||||
|
||||
test('disabled in cascade', () => {
|
||||
@ -123,7 +152,9 @@ test('disabled in cascade', () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-picker-column__item--disabled')).toMatchSnapshot();
|
||||
expect(
|
||||
wrapper.find('.van-picker-column__item--disabled').html()
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should move to next option when default option is disabled', () => {
|
||||
Loading…
x
Reference in New Issue
Block a user