mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +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,
|
||||
columnsFieldNames: Object as PropType<PickerFieldNames>,
|
||||
columns: {
|
||||
type: Array as PropType<PickerColumn[]>,
|
||||
type: Array as PropType<PickerOption[] | PickerColumn[]>,
|
||||
default: () => [],
|
||||
},
|
||||
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 PickerColumn from '../PickerColumn';
|
||||
import { mount, triggerDrag, later } from '../../../test';
|
||||
import { later, mount, triggerDrag } from '../../../test';
|
||||
|
||||
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
|
||||
const columns = [
|
||||
@ -24,8 +24,8 @@ test('simple columns confirm & cancel event', () => {
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
wrapper.find('.van-picker__cancel').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0]).toEqual(['1990', 0]);
|
||||
expect(wrapper.emitted('cancel')[0]).toEqual(['1990', 0]);
|
||||
expect(wrapper.emitted('confirm')![0]).toEqual(['1990', 0]);
|
||||
expect(wrapper.emitted('cancel')![0]).toEqual(['1990', 0]);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
@ -45,8 +45,8 @@ test('multiple columns confirm & cancel event', () => {
|
||||
[0, 0],
|
||||
];
|
||||
|
||||
expect(wrapper.emitted('confirm')[0]).toEqual(params);
|
||||
expect(wrapper.emitted('cancel')[0]).toEqual(params);
|
||||
expect(wrapper.emitted('confirm')![0]).toEqual(params);
|
||||
expect(wrapper.emitted('cancel')![0]).toEqual(params);
|
||||
});
|
||||
|
||||
test('set picker values', () => {
|
||||
@ -55,7 +55,7 @@ test('set picker values', () => {
|
||||
columns,
|
||||
},
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
const vm = wrapper.vm as Record<string, any>;
|
||||
|
||||
expect(vm.getColumnValues(-1)).toEqual(undefined);
|
||||
expect(vm.getColumnValues(1).length).toEqual(6);
|
||||
@ -99,7 +99,10 @@ test('drag columns', () => {
|
||||
|
||||
// 由于在极短的时间（大约几毫秒）移动 `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', () => {
|
||||
@ -114,7 +117,7 @@ test('drag simple columns', () => {
|
||||
|
||||
// 由于在极短的时间（大约几毫秒）移动 `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 () => {
|
||||
@ -122,53 +125,51 @@ test('column watch default index', async () => {
|
||||
const wrapper = mount(PickerColumn, {
|
||||
props: {
|
||||
initialOptions: [disabled, ...simpleColumn],
|
||||
valueKey: 'text',
|
||||
textKey: 'text',
|
||||
itemHeight: 50,
|
||||
visibleItemCount: 5,
|
||||
swipeDuration: 1000,
|
||||
},
|
||||
});
|
||||
} as any);
|
||||
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
wrapper.vm.defaultIndex = 2;
|
||||
await wrapper.setProps({
|
||||
defaultIndex: 2,
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render title slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-picker>
|
||||
<template v-slot:title>Custom title</template>
|
||||
</van-picker>
|
||||
`,
|
||||
const wrapper = mount(Picker, {
|
||||
slots: {
|
||||
title: () => 'Custom title',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render confirm/cancel slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-picker>
|
||||
<template v-slot:confirm>Custom Confirm</template>
|
||||
<template v-slot:cancel>Custom Cancel</template>
|
||||
</van-picker>
|
||||
`,
|
||||
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({
|
||||
template: `
|
||||
<van-picker :columns="columns" show-toolbar>
|
||||
<template #option="item">{{ item }}</template>
|
||||
</van-picker>
|
||||
`,
|
||||
data() {
|
||||
return { columns: ['foo', 'bar'] };
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
columns: ['foo', 'bar'],
|
||||
showToolbar: true,
|
||||
},
|
||||
slots: {
|
||||
option: (item) => item,
|
||||
},
|
||||
});
|
||||
|
||||
@ -176,16 +177,13 @@ test('render option slot with simple columns', () => {
|
||||
});
|
||||
|
||||
test('render option slot with object columns', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-picker :columns="columns" show-toolbar>
|
||||
<template #option="item">{{ item.text }}</template>
|
||||
</van-picker>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
columns: [{ text: 'foo' }, { text: 'bar' }],
|
||||
};
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
columns: [{ text: 'foo' }, { text: 'bar' }],
|
||||
showToolbar: true,
|
||||
},
|
||||
slots: {
|
||||
options: (item) => item,
|
||||
},
|
||||
});
|
||||
|
||||
@ -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'), -5, -100);
|
||||
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', () => {
|
||||
@ -231,7 +229,9 @@ test('click column item', () => {
|
||||
});
|
||||
|
||||
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', () => {
|
||||
@ -270,7 +270,7 @@ test('columns-top、columns-bottom prop', () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('watch columns change', () => {
|
||||
test('watch columns change', async () => {
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
showToolbar: true,
|
||||
@ -279,15 +279,15 @@ test('watch columns change', () => {
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setProps({
|
||||
await wrapper.setProps({
|
||||
columns: ['2', '3'],
|
||||
});
|
||||
|
||||
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, {
|
||||
props: {
|
||||
showToolbar: true,
|
||||
@ -295,19 +295,19 @@ test('should not reset index when columns unchanged', () => {
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.setIndexes([1]);
|
||||
wrapper.setProps({
|
||||
(wrapper.vm as Record<string, any>).setIndexes([1]);
|
||||
await wrapper.setProps({
|
||||
columns: ['1', '2'],
|
||||
});
|
||||
|
||||
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 () => {
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
|
||||
window.getComputedStyle = () => ({ fontSize: '16px' });
|
||||
window.getComputedStyle = () => ({ fontSize: '16px' } as CSSStyleDeclaration);
|
||||
|
||||
const wrapper = mount(Picker, {
|
||||
props: {
|
||||
Loading…
x
Reference in New Issue
Block a user