mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 10:20:19 +08:00
test(Picker): update basic test cases
This commit is contained in:
chenjiahan
neverland
parent
6bba2906bc
commit
e4ab2156f1
@ -84,86 +84,35 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-picker">
|
<div class="van-cell van-cell--clickable van-field"
|
||||||
<div class="van-picker__toolbar">
|
role="button"
|
||||||
<button type="button"
|
tabindex="0"
|
||||||
class="van-picker__cancel van-haptics-feedback"
|
>
|
||||||
|
<div class="van-cell__title van-field__label">
|
||||||
|
<label id="van-field-label"
|
||||||
|
for="van-field-input"
|
||||||
>
|
>
|
||||||
Cancel
|
City
|
||||||
</button>
|
</label>
|
||||||
<div class="van-picker__title van-ellipsis">
|
|
||||||
Title
|
|
||||||
</div>
|
|
||||||
<button type="button"
|
|
||||||
class="van-picker__confirm van-haptics-feedback"
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="van-picker__columns"
|
<div class="van-cell__value van-field__value">
|
||||||
style="height: 264px;"
|
<div class="van-field__body">
|
||||||
>
|
<input type="text"
|
||||||
<div class="van-picker-column">
|
id="van-field-input"
|
||||||
<ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;"
|
class="van-field__control"
|
||||||
class="van-picker-column__wrapper"
|
readonly
|
||||||
|
placeholder="Choose City"
|
||||||
|
aria-labelledby="van-field-label"
|
||||||
>
|
>
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Delaware
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Florida
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Georqia
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Indiana
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Maine
|
|
||||||
</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>
|
</div>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
</i>
|
||||||
</div>
|
</div>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-picker">
|
<div class="van-picker">
|
||||||
@ -186,13 +135,13 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
style="height: 264px;"
|
style="height: 264px;"
|
||||||
>
|
>
|
||||||
<div class="van-picker-column">
|
<div class="van-picker-column">
|
||||||
<ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;"
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
class="van-picker-column__wrapper"
|
class="van-picker-column__wrapper"
|
||||||
>
|
>
|
||||||
<li role="button"
|
<li role="button"
|
||||||
style="height: 44px;"
|
style="height: 44px;"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="van-picker-column__item"
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
>
|
>
|
||||||
<div class="van-ellipsis">
|
<div class="van-ellipsis">
|
||||||
Monday
|
Monday
|
||||||
@ -210,7 +159,7 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<li role="button"
|
<li role="button"
|
||||||
style="height: 44px;"
|
style="height: 44px;"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
class="van-picker-column__item"
|
||||||
>
|
>
|
||||||
<div class="van-ellipsis">
|
<div class="van-ellipsis">
|
||||||
Wednesday
|
Wednesday
|
||||||
@ -237,13 +186,13 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-picker-column">
|
<div class="van-picker-column">
|
||||||
<ul style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;"
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
class="van-picker-column__wrapper"
|
class="van-picker-column__wrapper"
|
||||||
>
|
>
|
||||||
<li role="button"
|
<li role="button"
|
||||||
style="height: 44px;"
|
style="height: 44px;"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="van-picker-column__item"
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
>
|
>
|
||||||
<div class="van-ellipsis">
|
<div class="van-ellipsis">
|
||||||
Morning
|
Morning
|
||||||
@ -252,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<li role="button"
|
<li role="button"
|
||||||
style="height: 44px;"
|
style="height: 44px;"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
class="van-picker-column__item"
|
||||||
>
|
>
|
||||||
<div class="van-ellipsis">
|
<div class="van-ellipsis">
|
||||||
Afternoon
|
Afternoon
|
||||||
@ -447,112 +396,6 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar">
|
|
||||||
<button type="button"
|
|
||||||
class="van-picker__cancel van-haptics-feedback"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<div class="van-picker__title van-ellipsis">
|
|
||||||
Title
|
|
||||||
</div>
|
|
||||||
<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 column1">
|
|
||||||
<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">
|
|
||||||
Group1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Group2
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column column2">
|
|
||||||
<ul style="transform: translate3d(0, 22px, 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"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Delaware
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Florida
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Georqia
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Indiana
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Maine
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<div class="van-picker">
|
<div class="van-picker">
|
||||||
<div class="van-picker__toolbar">
|
<div class="van-picker__toolbar">
|
||||||
@ -587,123 +430,15 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<div class="van-picker__columns"
|
<div class="van-picker__columns"
|
||||||
style="height: 264px;"
|
style="height: 264px;"
|
||||||
>
|
>
|
||||||
<div class="van-picker-column column1">
|
<div class="van-picker-column">
|
||||||
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
class="van-picker-column__wrapper"
|
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">
|
|
||||||
Group1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Group2
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-picker-column column2">
|
|
||||||
<ul style="transform: translate3d(0, 22px, 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"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Delaware
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Florida
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Georqia
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Indiana
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
Maine
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<div class="van-cell van-cell--clickable van-field"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<div class="van-cell__title van-field__label">
|
|
||||||
<label id="van-field-label"
|
|
||||||
for="van-field-input"
|
|
||||||
>
|
|
||||||
City
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="van-cell__value van-field__value">
|
|
||||||
<div class="van-field__body">
|
|
||||||
<input type="text"
|
|
||||||
id="van-field-input"
|
|
||||||
class="van-field__control"
|
|
||||||
readonly
|
|
||||||
placeholder="Choose City"
|
|
||||||
aria-labelledby="van-field-label"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
<transition-stub>
|
|
||||||
</transition-stub>
|
|
||||||
<transition-stub>
|
|
||||||
</transition-stub>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<div class="van-picker">
|
<div class="van-picker">
|
||||||
<div class="van-picker__toolbar">
|
<div class="van-picker__toolbar">
|
||||||
|
|||||||
@ -1,179 +1,6 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`column watch default index 1`] = `
|
exports[`should not allow to render html text 1`] = `
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul style="transform: translate3d(0, 50px, 0); transition-duration: 0ms; transition-property: none;"
|
|
||||||
class="van-picker-column__wrapper"
|
|
||||||
>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="-1"
|
|
||||||
class="van-picker-column__item van-picker-column__item--disabled"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1990
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1991
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1992
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1993
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1994
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1995
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`column watch default index 2`] = `
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;"
|
|
||||||
class="van-picker-column__wrapper"
|
|
||||||
>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="-1"
|
|
||||||
class="van-picker-column__item van-picker-column__item--disabled"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1990
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1991
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1992
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1993
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1994
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 50px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1995
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`columns-top、columns-bottom 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>
|
|
||||||
Custom Columns Top
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Custom Columns Bottom
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`not allow html 1`] = `
|
|
||||||
<div class="van-picker">
|
<div class="van-picker">
|
||||||
<div class="van-picker__toolbar">
|
<div class="van-picker__toolbar">
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@ -217,235 +44,7 @@ exports[`not allow html 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`render option slot with object columns 1`] = `
|
exports[`should render bottom toolbar when toolbar-position is bottom 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">
|
|
||||||
foo
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
bar
|
|
||||||
</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[`render option slot with simple columns 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"
|
|
||||||
>
|
|
||||||
foo
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 44px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
bar
|
|
||||||
</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[`set rem option-height 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: 960px;"
|
|
||||||
>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul style="transform: translate3d(0, 400px, 0); transition-duration: 0ms; transition-property: none;"
|
|
||||||
class="van-picker-column__wrapper"
|
|
||||||
>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 160px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1990
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li role="button"
|
|
||||||
style="height: 160px;"
|
|
||||||
tabindex="0"
|
|
||||||
class="van-picker-column__item"
|
|
||||||
>
|
|
||||||
<div class="van-ellipsis">
|
|
||||||
1991
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask"
|
|
||||||
style="background-size: 100% 400px;"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
|
||||||
style="height: 160px;"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should render confirm/cancel slot correctly 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar">
|
|
||||||
<button type="button"
|
|
||||||
class="van-picker__cancel van-haptics-feedback"
|
|
||||||
>
|
|
||||||
Custom Cancel
|
|
||||||
</button>
|
|
||||||
<button type="button"
|
|
||||||
class="van-picker__confirm van-haptics-feedback"
|
|
||||||
>
|
|
||||||
Custom 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"
|
|
||||||
>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should render title slot correctly 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar">
|
|
||||||
<button type="button"
|
|
||||||
class="van-picker__cancel van-haptics-feedback"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
Custom title
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should render toolbar slot correctly 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar">
|
|
||||||
Custom toolbar
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`toolbar-position prop 1`] = `
|
|
||||||
<div class="van-picker">
|
<div class="van-picker">
|
||||||
<div class="van-picker__columns"
|
<div class="van-picker__columns"
|
||||||
style="height: 264px;"
|
style="height: 264px;"
|
||||||
|
|||||||
152
packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap
Normal file
152
packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render columns-top、columns-bottom slots correctly 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>
|
||||||
|
Custom Columns Top
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
Custom Columns Bottom
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render confirm/cancel slot correctly 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel van-haptics-feedback"
|
||||||
|
>
|
||||||
|
Custom Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm van-haptics-feedback"
|
||||||
|
>
|
||||||
|
Custom 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"
|
||||||
|
>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render option slot correctly 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"
|
||||||
|
>
|
||||||
|
Custom 1990
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
Custom 1991
|
||||||
|
</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 render title slot correctly 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel van-haptics-feedback"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
Custom title
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render toolbar slot correctly 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
Custom toolbar
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,20 +1,16 @@
|
|||||||
import { later, mount, triggerDrag } from '../../../test';
|
import { later, mount, triggerDrag } from '../../../test';
|
||||||
import { Picker } from '..';
|
import { Picker } from '..';
|
||||||
import PickerColumn from '../PickerColumn';
|
|
||||||
|
|
||||||
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
|
const simpleColumn = [
|
||||||
const columns = [
|
{ text: '1990', value: '1990' },
|
||||||
{
|
{ text: '1991', value: '1991' },
|
||||||
values: ['vip', 'normal'],
|
{ text: '1992', value: '1992' },
|
||||||
className: 'column1',
|
{ text: '1993', value: '1993' },
|
||||||
},
|
{ text: '1994', value: '1994' },
|
||||||
{
|
{ text: '1995', value: '1995' },
|
||||||
values: simpleColumn,
|
|
||||||
className: 'column2',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
test('simple columns confirm & cancel event', () => {
|
test('should emit confirm event after clicking the confirm button', () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
showToolbar: true,
|
showToolbar: true,
|
||||||
@ -23,89 +19,32 @@ test('simple columns confirm & cancel event', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
wrapper.find('.van-picker__cancel').trigger('click');
|
expect(wrapper.emitted('confirm')![0]).toEqual([
|
||||||
expect(wrapper.emitted('confirm')![0]).toEqual(['1990', 0]);
|
{
|
||||||
expect(wrapper.emitted('cancel')![0]).toEqual(['1990', 0]);
|
selectedOptions: [{ text: '1990', value: '1990' }],
|
||||||
wrapper.unmount();
|
selectedValues: ['1990'],
|
||||||
});
|
|
||||||
|
|
||||||
test('multiple columns confirm & cancel event', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
showToolbar: true,
|
|
||||||
columns,
|
|
||||||
},
|
},
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
wrapper.find('.van-picker__cancel').trigger('click');
|
|
||||||
|
|
||||||
const params = [
|
|
||||||
['vip', '1990'],
|
|
||||||
[0, 0],
|
|
||||||
];
|
|
||||||
|
|
||||||
expect(wrapper.emitted('confirm')![0]).toEqual(params);
|
|
||||||
expect(wrapper.emitted('cancel')![0]).toEqual(params);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('set picker values', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
columns,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const vm = wrapper.vm as Record<string, any>;
|
|
||||||
|
|
||||||
expect(vm.getColumnValues(-1)).toEqual(undefined);
|
|
||||||
expect(vm.getColumnValues(1)).toHaveLength(6);
|
|
||||||
expect(vm.getColumnValue(1)).toEqual('1990');
|
|
||||||
|
|
||||||
vm.setColumnValue(0, 'normal');
|
|
||||||
expect(vm.getColumnValue(0)).toEqual('normal');
|
|
||||||
|
|
||||||
vm.setColumnIndex(0, 0);
|
|
||||||
expect(vm.getColumnValue(0)).toEqual('vip');
|
|
||||||
|
|
||||||
vm.setColumnValue(1, '1991');
|
|
||||||
expect(vm.getColumnValue(1)).toEqual('1991');
|
|
||||||
|
|
||||||
vm.setColumnValues(0, ['vip', 'normal', 'other']);
|
|
||||||
expect(vm.getColumnValues(0)).toHaveLength(3);
|
|
||||||
expect(vm.getValues()).toHaveLength(2);
|
|
||||||
|
|
||||||
vm.setColumnValues(-1, []);
|
|
||||||
expect(vm.getValues()).toHaveLength(2);
|
|
||||||
|
|
||||||
vm.setValues(['vip', '1992']);
|
|
||||||
expect(vm.getColumnIndex(1)).toEqual(2);
|
|
||||||
expect(vm.getColumnIndex(2)).toEqual(undefined);
|
|
||||||
expect(vm.getIndexes(2)).toEqual([0, 2]);
|
|
||||||
|
|
||||||
vm.setIndexes([1, 4]);
|
|
||||||
expect(vm.getColumnValue(1)).toEqual('1994');
|
|
||||||
expect(vm.getColumnValue(2)).toEqual(undefined);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('drag columns', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
columns,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
|
||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
|
||||||
|
|
||||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
|
||||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
|
||||||
expect(wrapper.emitted<[Array<string>, number]>('change')![0][0]).toEqual([
|
|
||||||
'normal',
|
|
||||||
'1990',
|
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('drag simple columns', () => {
|
test('should emit cancel event after clicking the cancel button', () => {
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
props: {
|
||||||
|
showToolbar: true,
|
||||||
|
columns: simpleColumn,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.find('.van-picker__cancel').trigger('click');
|
||||||
|
expect(wrapper.emitted('cancel')![0]).toEqual([
|
||||||
|
{
|
||||||
|
selectedOptions: [{ text: '1990', value: '1990' }],
|
||||||
|
selectedValues: ['1990'],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit change event after draging the column', () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
columns: simpleColumn,
|
columns: simpleColumn,
|
||||||
@ -115,121 +54,21 @@ test('drag simple columns', () => {
|
|||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||||
|
|
||||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
expect(wrapper.emitted('change')).toEqual([
|
||||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
[
|
||||||
expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual('1995');
|
{
|
||||||
|
columnIndex: 0,
|
||||||
|
selectedOptions: [{ text: '1995', value: '1995' }],
|
||||||
|
selectedValues: ['1995'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('column watch default index', async () => {
|
test('should emit change event when after clicking a option', async () => {
|
||||||
const disabled = { disabled: true, text: 1 };
|
|
||||||
const wrapper = mount(PickerColumn, {
|
|
||||||
props: {
|
|
||||||
initialOptions: [disabled, ...simpleColumn],
|
|
||||||
textKey: 'text',
|
|
||||||
optionHeight: 50,
|
|
||||||
visibleOptionNum: 5,
|
|
||||||
swipeDuration: 1000,
|
|
||||||
},
|
|
||||||
} as any);
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
await wrapper.setProps({
|
|
||||||
defaultIndex: 2,
|
|
||||||
});
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should render title slot correctly', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
slots: {
|
|
||||||
title: () => 'Custom title',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should render toolbar slot correctly', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
slots: {
|
|
||||||
toolbar: () => 'Custom toolbar',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should render confirm/cancel slot correctly', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
slots: {
|
|
||||||
confirm: () => 'Custom Confirm',
|
|
||||||
cancel: () => 'Custom Cancel',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render option slot with simple columns', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
columns: ['foo', 'bar'],
|
|
||||||
showToolbar: true,
|
|
||||||
},
|
|
||||||
slots: {
|
|
||||||
option: (item) => item,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render option slot with object columns', () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
columns: [{ text: 'foo' }, { text: 'bar' }],
|
|
||||||
showToolbar: true,
|
|
||||||
},
|
|
||||||
slots: {
|
|
||||||
options: (item) => item,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('simulation finger swipe again before transitionend', () => {
|
|
||||||
// mock getComputedStyle
|
|
||||||
// see: https://github.com/jsdom/jsdom/issues/2588
|
|
||||||
const originGetComputedStyle = window.getComputedStyle;
|
|
||||||
window.getComputedStyle = (ele) => {
|
|
||||||
const style = originGetComputedStyle(ele);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...style,
|
|
||||||
transform: 'matrix(1, 0, 0, 1, 0, -5)',
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
columns: simpleColumn,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -5);
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), -5, -100);
|
|
||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
|
||||||
expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual('1995');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click column item', () => {
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ text: '杭州' },
|
{ text: 'A', value: 'A' },
|
||||||
{ text: '宁波' },
|
{ text: 'B', value: 'B' },
|
||||||
{ text: '温州', disabled: true },
|
|
||||||
{ text: '嘉兴', disabled: true },
|
|
||||||
];
|
];
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
@ -237,13 +76,50 @@ test('click column item', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.findAll('.van-picker-column__item')[3].trigger('click');
|
await wrapper.findAll('.van-picker-column__item')[1].trigger('click');
|
||||||
expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual(
|
expect(wrapper.emitted('change')).toEqual([
|
||||||
columns[1]
|
[
|
||||||
);
|
{
|
||||||
|
columnIndex: 0,
|
||||||
|
selectedOptions: [{ text: 'B', value: 'B' }],
|
||||||
|
selectedValues: ['B'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('toolbar-position prop', () => {
|
test('should not emit change event if modelValue is not changed', async () => {
|
||||||
|
const columns = [
|
||||||
|
{ text: 'A', value: 'A' },
|
||||||
|
{ text: 'B', value: 'B' },
|
||||||
|
];
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
props: {
|
||||||
|
modelValue: ['B'],
|
||||||
|
columns,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.findAll('.van-picker-column__item')[1].trigger('click');
|
||||||
|
expect(wrapper.emitted('change')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit change event when after clicking a disabled option', async () => {
|
||||||
|
const columns = [
|
||||||
|
{ text: 'A', value: 'A' },
|
||||||
|
{ text: 'B', value: 'B', disabled: true },
|
||||||
|
];
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
props: {
|
||||||
|
columns,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.findAll('.van-picker-column__item')[1].trigger('click');
|
||||||
|
expect(wrapper.emitted<[string, number]>('change')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render bottom toolbar when toolbar-position is bottom', () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
showToolbar: true,
|
showToolbar: true,
|
||||||
@ -254,66 +130,67 @@ test('toolbar-position prop', () => {
|
|||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('not allow html', () => {
|
test('should not allow to render html text', () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
allowHtml: false,
|
allowHtml: false,
|
||||||
columns: ['<div>option</div>'],
|
columns: [{ text: '<div>option</div>' }],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('columns-top、columns-bottom prop', () => {
|
test('should allow to update columns props dynamically', async () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
showToolbar: true,
|
modelValue: ['2'],
|
||||||
},
|
columns: [
|
||||||
slots: {
|
{ text: '1', value: '1' },
|
||||||
'columns-top': () => 'Custom Columns Top',
|
{ text: '2', value: '2' },
|
||||||
'columns-bottom': () => 'Custom Columns Bottom',
|
],
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('watch columns change', async () => {
|
|
||||||
const wrapper = mount(Picker, {
|
|
||||||
props: {
|
|
||||||
showToolbar: true,
|
|
||||||
columns: ['1', '2'],
|
|
||||||
defaultIndex: 1,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
await wrapper.setProps({
|
await wrapper.setProps({
|
||||||
columns: ['2', '3'],
|
columns: [
|
||||||
|
{ text: '2', value: '2' },
|
||||||
|
{ text: '3', value: '3' },
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual(['3', 1]);
|
expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([
|
||||||
|
{ selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] },
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should not reset index when columns unchanged', async () => {
|
test('should not reset index when columns unchanged', async () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
|
modelValue: ['2'],
|
||||||
showToolbar: true,
|
showToolbar: true,
|
||||||
columns: ['1', '2'],
|
columns: [
|
||||||
|
{ text: '1', value: '1' },
|
||||||
|
{ text: '2', value: '2' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
(wrapper.vm as Record<string, any>).setIndexes([1]);
|
|
||||||
await wrapper.setProps({
|
await wrapper.setProps({
|
||||||
columns: ['1', '2'],
|
columns: [
|
||||||
|
{ text: '1', value: '1' },
|
||||||
|
{ text: '2', value: '2' },
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
await wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual(['2', 1]);
|
expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([
|
||||||
|
{ selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] },
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('set rem option-height', async () => {
|
test('should allow to set rem option height', async () => {
|
||||||
const originGetComputedStyle = window.getComputedStyle;
|
const originGetComputedStyle = window.getComputedStyle;
|
||||||
|
|
||||||
window.getComputedStyle = () => ({ fontSize: '16px' } as CSSStyleDeclaration);
|
window.getComputedStyle = () => ({ fontSize: '16px' } as CSSStyleDeclaration);
|
||||||
@ -326,22 +203,24 @@ test('set rem option-height', async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.find('.van-picker-column__item').style.height).toEqual(
|
||||||
|
'160px'
|
||||||
|
);
|
||||||
|
|
||||||
window.getComputedStyle = originGetComputedStyle;
|
window.getComputedStyle = originGetComputedStyle;
|
||||||
});
|
});
|
||||||
|
|
||||||
test('readonly prop', () => {
|
test('should not allow to change option when using readonly prop', async () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
columns,
|
columns: simpleColumn,
|
||||||
readonly: true,
|
readonly: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
await wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||||
wrapper.findAll('.van-picker-column__item')[3].trigger('click');
|
await wrapper.findAll('.van-picker-column__item')[3].trigger('click');
|
||||||
|
|
||||||
expect(wrapper.emitted('change')).toBeFalsy();
|
expect(wrapper.emitted('change')).toBeFalsy();
|
||||||
});
|
});
|
||||||
@ -349,7 +228,7 @@ test('readonly prop', () => {
|
|||||||
test('should not render mask and frame when options is empty', async () => {
|
test('should not render mask and frame when options is empty', async () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
columns: [{ values: [] }],
|
columns: [[], []],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
expect(wrapper.find('.van-picker__mask').exists()).toBeFalsy();
|
expect(wrapper.find('.van-picker__mask').exists()).toBeFalsy();
|
||||||
|
|||||||
64
packages/vant/src/picker/test/slots.spec.ts
Normal file
64
packages/vant/src/picker/test/slots.spec.ts
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import { mount } from '../../../test';
|
||||||
|
import { Picker, PickerOption } from '..';
|
||||||
|
|
||||||
|
const simpleColumn = [
|
||||||
|
{ text: '1990', value: '1990' },
|
||||||
|
{ text: '1991', value: '1991' },
|
||||||
|
];
|
||||||
|
|
||||||
|
test('should render title slot correctly', () => {
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
slots: {
|
||||||
|
title: () => 'Custom title',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render toolbar slot correctly', () => {
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
slots: {
|
||||||
|
toolbar: () => 'Custom toolbar',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render confirm/cancel slot correctly', () => {
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
slots: {
|
||||||
|
confirm: () => 'Custom Confirm',
|
||||||
|
cancel: () => 'Custom Cancel',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render option slot correctly', () => {
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
props: {
|
||||||
|
columns: simpleColumn,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
option: (option: PickerOption) => `Custom ${option.text}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render columns-top、columns-bottom slots correctly', () => {
|
||||||
|
const wrapper = mount(Picker, {
|
||||||
|
props: {
|
||||||
|
showToolbar: true,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
'columns-top': () => 'Custom Columns Top',
|
||||||
|
'columns-bottom': () => 'Custom Columns Bottom',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user