mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 06:31:45 +08:00
test(Area): update test cases
This commit is contained in:
chenjiahan
parent
03c7b46b04
commit
1356f66ee1
@ -1,407 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`change option 1`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">东城区</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">西城区</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[`change option 2`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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, 66px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">和平区</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">河东区</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[`change option 3`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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, 66px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">和平区</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">河东区</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[`columns-num prop 1`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</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[`columns-top、columns-bottom slot 1`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->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-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-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>Bottom
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`reset method 1`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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, 66px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">蓟县</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[`reset method 2`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">东城区</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">西城区</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[`title slot 1`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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-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-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[`watch areaList & code 1`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">东城区</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">西城区</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[`watch areaList & code 2`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">东城区</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">西城区</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[`watch areaList & code 3`] = `
|
|
||||||
<div class="van-picker van-area">
|
|
||||||
<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;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">天津市</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">北京市</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">县</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">东城区</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">西城区</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>
|
|
||||||
`;
|
|
||||||
203
src/area/test/__snapshots__/index.spec.js.snap
Normal file
203
src/area/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render columns-top、columns-bottom slot correctly 1`] = `
|
||||||
|
<div class="van-picker van-area">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
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-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-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>
|
||||||
|
Bottom
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render title slot correctly 1`] = `
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
Custom Title
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render two columns when columns-num prop is two 1`] = `
|
||||||
|
<div class="van-picker van-area">
|
||||||
|
<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 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>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
天津市
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
北京市
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
县
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should reset selected option after calling the reset method 1`] = `
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
天津市
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should reset selected option after calling the reset method 2`] = `
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
北京市
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should watch value prop and render correctly 1`] = `
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
北京市
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should watch value prop and render correctly 2`] = `
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
天津市
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should watch value prop and render correctly 3`] = `
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
北京市
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
@ -1,147 +0,0 @@
|
|||||||
import Area from '..';
|
|
||||||
import areaList from '../demo/area-simple';
|
|
||||||
import { mount, later, triggerDrag } from '../../../test';
|
|
||||||
|
|
||||||
const firstOption = [
|
|
||||||
{ code: '110000', name: '北京市' },
|
|
||||||
{ code: '110100', name: '北京市' },
|
|
||||||
{ code: '110101', name: '东城区' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const secondOption = [
|
|
||||||
{ code: '120000', name: '天津市' },
|
|
||||||
{ code: '120100', name: '天津市' },
|
|
||||||
{ code: '120101', name: '和平区' },
|
|
||||||
];
|
|
||||||
|
|
||||||
test('confirm & cancel event', async () => {
|
|
||||||
const onConfirm = jest.fn();
|
|
||||||
const onCancel = jest.fn();
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
props: {
|
|
||||||
areaList,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
confirm: onConfirm,
|
|
||||||
cancel: onCancel,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
|
||||||
wrapper.find('.van-picker__cancel').trigger('click');
|
|
||||||
|
|
||||||
expect(onConfirm).toHaveBeenCalledWith(firstOption, [0, 0, 0]);
|
|
||||||
expect(onCancel).toHaveBeenCalledWith(firstOption, [0, 0, 0]);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('watch areaList & code', async () => {
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
props: {
|
|
||||||
areaList,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
wrapper.setProps({ value: '110117' });
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
wrapper.setProps({
|
|
||||||
value: '',
|
|
||||||
});
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('change option', () => {
|
|
||||||
const onChange = jest.fn();
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
props: {
|
|
||||||
areaList,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
change: onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const columns = wrapper.findAll('.van-picker-column');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
triggerDrag(columns[0], 0, -100);
|
|
||||||
columns[0].find('ul').trigger('transitionend');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
triggerDrag(columns[2], 0, -100);
|
|
||||||
columns[2].find('ul').trigger('transitionend');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
expect(onChange.mock.calls[0][1]).toEqual(secondOption);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('getValues method', () => {
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
props: {
|
|
||||||
areaList,
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
expect(this.getValues()).toEqual([]);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.vm.getValues()).toEqual(firstOption);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('reset method', async () => {
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
props: {
|
|
||||||
areaList,
|
|
||||||
value: '120225',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
wrapper.vm.reset();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('columns-num prop', async () => {
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
props: {
|
|
||||||
areaList,
|
|
||||||
columnsNum: 3,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.setProps({
|
|
||||||
columnsNum: 2,
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('title slot', async () => {
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
slots: {
|
|
||||||
title: () => 'Custom Title',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('columns-top、columns-bottom slot', async () => {
|
|
||||||
const wrapper = mount(Area, {
|
|
||||||
slots: {
|
|
||||||
'columns-top': 'Top',
|
|
||||||
'columns-bottom': 'Bottom',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
145
src/area/test/index.spec.js
Normal file
145
src/area/test/index.spec.js
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
import Area from '..';
|
||||||
|
import areaList from '../demo/area-simple';
|
||||||
|
import { mount, later, triggerDrag } from '../../../test';
|
||||||
|
|
||||||
|
const firstOption = [
|
||||||
|
{ code: '110000', name: '北京市' },
|
||||||
|
{ code: '110100', name: '北京市' },
|
||||||
|
{ code: '110101', name: '东城区' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const secondOption = [
|
||||||
|
{ code: '120000', name: '天津市' },
|
||||||
|
{ code: '120100', name: '天津市' },
|
||||||
|
{ code: '120101', name: '和平区' },
|
||||||
|
];
|
||||||
|
|
||||||
|
test('should emit confirm event after click the confirm button', () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
props: {
|
||||||
|
areaList,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
|
expect(wrapper.emitted('confirm')[0]).toEqual([firstOption, [0, 0, 0]]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit cancel event after click the cancel button', () => {
|
||||||
|
const onCancel = jest.fn();
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
props: {
|
||||||
|
areaList,
|
||||||
|
onCancel,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.find('.van-picker__cancel').trigger('click');
|
||||||
|
expect(onCancel).toHaveBeenLastCalledWith(firstOption, [0, 0, 0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should watch value prop and render correctly', async () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
props: {
|
||||||
|
areaList,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(
|
||||||
|
wrapper.find('.van-picker-column__item--selected').html()
|
||||||
|
).toMatchSnapshot();
|
||||||
|
await wrapper.setProps({ value: '120225' });
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(
|
||||||
|
wrapper.find('.van-picker-column__item--selected').html()
|
||||||
|
).toMatchSnapshot();
|
||||||
|
|
||||||
|
await wrapper.setProps({ value: '' });
|
||||||
|
expect(
|
||||||
|
wrapper.find('.van-picker-column__item--selected').html()
|
||||||
|
).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit change event after dragging options', () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
props: {
|
||||||
|
areaList,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns = wrapper.findAll('.van-picker-column');
|
||||||
|
triggerDrag(columns[0], 0, -100);
|
||||||
|
columns[0].find('ul').trigger('transitionend');
|
||||||
|
triggerDrag(columns[2], 0, -100);
|
||||||
|
columns[2].find('ul').trigger('transitionend');
|
||||||
|
|
||||||
|
expect(wrapper.emitted('change')[0][0]).toEqual(secondOption);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should return current values when calling getValues method', () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
props: {
|
||||||
|
areaList,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.vm.getValues()).toEqual(firstOption);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should reset selected option after calling the reset method', async () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
props: {
|
||||||
|
areaList,
|
||||||
|
value: '120225',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(
|
||||||
|
wrapper.find('.van-picker-column__item--selected').html()
|
||||||
|
).toMatchSnapshot();
|
||||||
|
|
||||||
|
wrapper.vm.reset();
|
||||||
|
await later();
|
||||||
|
expect(
|
||||||
|
wrapper.find('.van-picker-column__item--selected').html()
|
||||||
|
).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render two columns when columns-num prop is two', async () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
props: {
|
||||||
|
areaList,
|
||||||
|
columnsNum: 3,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.findAll('.van-picker-column').length).toEqual(3);
|
||||||
|
|
||||||
|
await wrapper.setProps({ columnsNum: 2 });
|
||||||
|
expect(wrapper.findAll('.van-picker-column').length).toEqual(2);
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render title slot correctly', () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
slots: {
|
||||||
|
title: () => 'Custom Title',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render columns-top、columns-bottom slot correctly', () => {
|
||||||
|
const wrapper = mount(Area, {
|
||||||
|
slots: {
|
||||||
|
'columns-top': () => 'Top',
|
||||||
|
'columns-bottom': () => 'Bottom',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user