mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-31 21:29:46 +08:00
test(Picker): add test cases (#8251)
This commit is contained in:
nemo-shen
GitHub
parent
1dc1b708f0
commit
845cc59f86
@ -70,7 +70,7 @@ export default createComponent({
|
|||||||
...pickerProps,
|
...pickerProps,
|
||||||
columnsFieldNames: Object as PropType<PickerFieldNames>,
|
columnsFieldNames: Object as PropType<PickerFieldNames>,
|
||||||
columns: {
|
columns: {
|
||||||
type: Array as PropType<PickerColumn[]>,
|
type: Array as PropType<PickerOption[] | PickerColumn[]>,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
defaultIndex: {
|
defaultIndex: {
|
||||||
|
|||||||
@ -1,191 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`column watch default index 1`] = `
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 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: 50px;">
|
|
||||||
<div class="van-ellipsis">1</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1990</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1991</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1992</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1993</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1994</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1995</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`column watch default index 2`] = `
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1990</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1991</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1992</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1993</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<div class="van-ellipsis">1994</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
|
||||||
<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">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->Custom Columns Top<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;"></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>Custom Columns Bottom
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`not allow html 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="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis"><div>option</div></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 confirm/cancel slot 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">Custom Cancel</button><button type="button" class="van-picker__confirm">Custom Confirm</button></div>
|
|
||||||
<!---->
|
|
||||||
<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;"></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 object columns 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<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="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">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[`render option slot with simple columns 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<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="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">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[`render title slot 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<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;"></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 item-height 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 960px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 400px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 160px;">
|
|
||||||
<div class="van-ellipsis">1990</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 160px;">
|
|
||||||
<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[`toolbar-position prop 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;"></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 class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
487
src/picker/test/__snapshots__/index.spec.tsx.snap
Normal file
487
src/picker/test/__snapshots__/index.spec.tsx.snap
Normal file
@ -0,0 +1,487 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`column watch default index 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"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
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 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>
|
||||||
|
Custom Columns Bottom
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`not allow html 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="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
<div>option</div>
|
||||||
|
</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 confirm/cancel slot 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Custom Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
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 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 object columns 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="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"
|
||||||
|
>
|
||||||
|
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="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[`render title slot 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
Custom title
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
</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 item-height 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: 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[`toolbar-position prop 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<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 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 class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import Picker from '..';
|
import Picker from '..';
|
||||||
import PickerColumn from '../PickerColumn';
|
import PickerColumn from '../PickerColumn';
|
||||||
import { mount, triggerDrag, later } from '../../../test';
|
import { later, mount, triggerDrag } from '../../../test';
|
||||||
|
|
||||||
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
|
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
|
||||||
const columns = [
|
const columns = [
|
||||||
@ -24,8 +24,8 @@ 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');
|
wrapper.find('.van-picker__cancel').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0]).toEqual(['1990', 0]);
|
expect(wrapper.emitted('confirm')![0]).toEqual(['1990', 0]);
|
||||||
expect(wrapper.emitted('cancel')[0]).toEqual(['1990', 0]);
|
expect(wrapper.emitted('cancel')![0]).toEqual(['1990', 0]);
|
||||||
wrapper.unmount();
|
wrapper.unmount();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -45,8 +45,8 @@ test('multiple columns confirm & cancel event', () => {
|
|||||||
[0, 0],
|
[0, 0],
|
||||||
];
|
];
|
||||||
|
|
||||||
expect(wrapper.emitted('confirm')[0]).toEqual(params);
|
expect(wrapper.emitted('confirm')![0]).toEqual(params);
|
||||||
expect(wrapper.emitted('cancel')[0]).toEqual(params);
|
expect(wrapper.emitted('cancel')![0]).toEqual(params);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('set picker values', () => {
|
test('set picker values', () => {
|
||||||
@ -55,7 +55,7 @@ test('set picker values', () => {
|
|||||||
columns,
|
columns,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { vm } = wrapper;
|
const vm = wrapper.vm as Record<string, any>;
|
||||||
|
|
||||||
expect(vm.getColumnValues(-1)).toEqual(undefined);
|
expect(vm.getColumnValues(-1)).toEqual(undefined);
|
||||||
expect(vm.getColumnValues(1).length).toEqual(6);
|
expect(vm.getColumnValues(1).length).toEqual(6);
|
||||||
@ -99,7 +99,10 @@ test('drag columns', () => {
|
|||||||
|
|
||||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
||||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
||||||
expect(wrapper.emitted('change')[0][1]).toEqual(['normal', '1990']);
|
expect(wrapper.emitted<[Array<string>, number]>('change')![0][0]).toEqual([
|
||||||
|
'normal',
|
||||||
|
'1990',
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('drag simple columns', () => {
|
test('drag simple columns', () => {
|
||||||
@ -114,7 +117,7 @@ test('drag simple columns', () => {
|
|||||||
|
|
||||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
||||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
||||||
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
|
expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual('1995');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('column watch default index', async () => {
|
test('column watch default index', async () => {
|
||||||
@ -122,53 +125,51 @@ test('column watch default index', async () => {
|
|||||||
const wrapper = mount(PickerColumn, {
|
const wrapper = mount(PickerColumn, {
|
||||||
props: {
|
props: {
|
||||||
initialOptions: [disabled, ...simpleColumn],
|
initialOptions: [disabled, ...simpleColumn],
|
||||||
valueKey: 'text',
|
textKey: 'text',
|
||||||
itemHeight: 50,
|
itemHeight: 50,
|
||||||
visibleItemCount: 5,
|
visibleItemCount: 5,
|
||||||
|
swipeDuration: 1000,
|
||||||
},
|
},
|
||||||
});
|
} as any);
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
|
||||||
wrapper.vm.defaultIndex = 2;
|
await wrapper.setProps({
|
||||||
|
defaultIndex: 2,
|
||||||
|
});
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('render title slot', () => {
|
test('render title slot', () => {
|
||||||
const wrapper = mount({
|
const wrapper = mount(Picker, {
|
||||||
template: `
|
slots: {
|
||||||
<van-picker>
|
title: () => 'Custom title',
|
||||||
<template v-slot:title>Custom title</template>
|
},
|
||||||
</van-picker>
|
|
||||||
`,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('render confirm/cancel slot', () => {
|
test('render confirm/cancel slot', () => {
|
||||||
const wrapper = mount({
|
const wrapper = mount(Picker, {
|
||||||
template: `
|
slots: {
|
||||||
<van-picker>
|
confirm: () => 'Custom Confirm',
|
||||||
<template v-slot:confirm>Custom Confirm</template>
|
cancel: () => 'Custom Cancel',
|
||||||
<template v-slot:cancel>Custom Cancel</template>
|
},
|
||||||
</van-picker>
|
|
||||||
`,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('render option slot with simple columns', () => {
|
test('render option slot with simple columns', () => {
|
||||||
const wrapper = mount({
|
const wrapper = mount(Picker, {
|
||||||
template: `
|
props: {
|
||||||
<van-picker :columns="columns" show-toolbar>
|
columns: ['foo', 'bar'],
|
||||||
<template #option="item">{{ item }}</template>
|
showToolbar: true,
|
||||||
</van-picker>
|
},
|
||||||
`,
|
slots: {
|
||||||
data() {
|
option: (item) => item,
|
||||||
return { columns: ['foo', 'bar'] };
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -176,16 +177,13 @@ test('render option slot with simple columns', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('render option slot with object columns', () => {
|
test('render option slot with object columns', () => {
|
||||||
const wrapper = mount({
|
const wrapper = mount(Picker, {
|
||||||
template: `
|
props: {
|
||||||
<van-picker :columns="columns" show-toolbar>
|
columns: [{ text: 'foo' }, { text: 'bar' }],
|
||||||
<template #option="item">{{ item.text }}</template>
|
showToolbar: true,
|
||||||
</van-picker>
|
},
|
||||||
`,
|
slots: {
|
||||||
data() {
|
options: (item) => item,
|
||||||
return {
|
|
||||||
columns: [{ text: 'foo' }, { text: 'bar' }],
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -214,7 +212,7 @@ test('simulation finger swipe again before transitionend', () => {
|
|||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -5);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -5);
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), -5, -100);
|
triggerDrag(wrapper.find('.van-picker-column'), -5, -100);
|
||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||||
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
|
expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual('1995');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('click column item', () => {
|
test('click column item', () => {
|
||||||
@ -231,7 +229,9 @@ test('click column item', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
wrapper.findAll('.van-picker-column__item')[3].trigger('click');
|
wrapper.findAll('.van-picker-column__item')[3].trigger('click');
|
||||||
expect(wrapper.emitted('change')[0][1]).toEqual(columns[1]);
|
expect(wrapper.emitted<[string, number]>('change')![0][0]).toEqual(
|
||||||
|
columns[1]
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('toolbar-position prop', () => {
|
test('toolbar-position prop', () => {
|
||||||
@ -270,7 +270,7 @@ test('columns-top、columns-bottom prop', () => {
|
|||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('watch columns change', () => {
|
test('watch columns change', async () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
showToolbar: true,
|
showToolbar: true,
|
||||||
@ -279,15 +279,15 @@ test('watch columns change', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.setProps({
|
await wrapper.setProps({
|
||||||
columns: ['2', '3'],
|
columns: ['2', '3'],
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0]).toEqual(['3', 1]);
|
expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual(['3', 1]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should not reset index when columns unchanged', () => {
|
test('should not reset index when columns unchanged', async () => {
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
showToolbar: true,
|
showToolbar: true,
|
||||||
@ -295,19 +295,19 @@ test('should not reset index when columns unchanged', () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.vm.setIndexes([1]);
|
(wrapper.vm as Record<string, any>).setIndexes([1]);
|
||||||
wrapper.setProps({
|
await wrapper.setProps({
|
||||||
columns: ['1', '2'],
|
columns: ['1', '2'],
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0]).toEqual(['2', 1]);
|
expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual(['2', 1]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('set rem item-height', async () => {
|
test('set rem item-height', async () => {
|
||||||
const originGetComputedStyle = window.getComputedStyle;
|
const originGetComputedStyle = window.getComputedStyle;
|
||||||
|
|
||||||
window.getComputedStyle = () => ({ fontSize: '16px' });
|
window.getComputedStyle = () => ({ fontSize: '16px' } as CSSStyleDeclaration);
|
||||||
|
|
||||||
const wrapper = mount(Picker, {
|
const wrapper = mount(Picker, {
|
||||||
props: {
|
props: {
|
||||||
Loading…
x
Reference in New Issue
Block a user