mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(DropdownMenu): test cases (#8425)
* test(DropdownMenu): test cases * test(DropdownMenu): test cases Co-authored-by: nemo-shen <1034131477@qq.com>
This commit is contained in:
nemo-shen
GitHub
parent
c761f04f10
commit
5eeaa2dd9b
@ -1,345 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`click option 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2014;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`close-on-click-outside 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`destroy one item 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`didn\`t find matched option 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`direction up 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`direction up 2`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px;">
|
|
||||||
<div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`disable close-on-click-outside 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`disable dropdown item 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar">
|
|
||||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render option icon 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"><i class="van-icon van-icon-success van-cell__left-icon">
|
|
||||||
<!----></i>
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
|
|
||||||
<!----></i>
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`show dropdown item 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`show dropdown item 2`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`show dropdown item 3`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
|
||||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
|
|
||||||
<div class="van-cell__title"><span>A</span></div>
|
|
||||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
|
|
||||||
<div class="van-cell__title"><span>B</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`title prop 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`title slot 1`] = `
|
|
||||||
<div class="van-dropdown-menu">
|
|
||||||
<div class="van-dropdown-menu__bar">
|
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
|
|
||||||
Custom Title
|
|
||||||
</div></span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
850
src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
Normal file
850
src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
Normal file
@ -0,0 +1,850 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`click option 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2007; position: absolute; animation-duration: 0.2s; display: none;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2007; transition-duration: 0.2s; display: none;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`close-on-click-outside 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2004; position: absolute; animation-duration: 0.2s; display: none;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2004; transition-duration: 0.2s; display: none;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`destroy one item 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`direction up 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--down">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--down">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="bottom: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--up"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="bottom: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--up"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`direction up 2`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--active">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--down">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="bottom: 768px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--up"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2006; position: absolute; animation-duration: 0.2s;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2006; transition-duration: 0.2s;"
|
||||||
|
class="van-popup van-popup--bottom van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="bottom: 768px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--up"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`disable close-on-click-outside 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2005; position: absolute; animation-duration: 0.2s;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2005; transition-duration: 0.2s;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`disable dropdown item 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`render option icon 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2003; position: absolute; animation-duration: 0.2s;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2003; transition-duration: 0.2s;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
|
||||||
|
</i>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
|
||||||
|
</i>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`show dropdown item 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2001; position: absolute; animation-duration: 0.2s;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2001; transition-duration: 0.2s;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`show dropdown item 2`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2001; transition-duration: 0s; display: none;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2002; position: absolute; animation-duration: 0.2s;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2002; transition-duration: 0.2s;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`show dropdown item 3`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2001; transition-duration: 0s; display: none;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2002; position: absolute; animation-duration: 0.2s; display: none;"
|
||||||
|
class="van-overlay"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div style="z-index: 2002; transition-duration: 0.2s; display: none;"
|
||||||
|
class="van-popup van-popup--top van-dropdown-item__content"
|
||||||
|
>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`title prop 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
Title
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
Title
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`title slot 1`] = `
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar">
|
||||||
|
<div role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
>
|
||||||
|
<span class="van-dropdown-menu__title">
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
Custom Title
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="top: 0px; display: none;"
|
||||||
|
class="van-dropdown-item van-dropdown-item--down"
|
||||||
|
>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
</transition-stub>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,255 +0,0 @@
|
|||||||
import { mount, later } from '../../../test';
|
|
||||||
|
|
||||||
function renderWrapper(options = {}) {
|
|
||||||
return mount({
|
|
||||||
template: `
|
|
||||||
<van-dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
|
|
||||||
<van-dropdown-item v-model="value" :title="title" :options="options" />
|
|
||||||
<van-dropdown-item v-model="value" :title="title" :options="options" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: options.value || 0,
|
|
||||||
title: options.title || '',
|
|
||||||
direction: options.direction || 'down',
|
|
||||||
closeOnClickOutside: options.closeOnClickOutside,
|
|
||||||
options: [
|
|
||||||
{ text: 'A', value: 0, icon: options.icon },
|
|
||||||
{ text: 'B', value: 1, icon: options.icon },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
test('show dropdown item', async () => {
|
|
||||||
const wrapper = renderWrapper();
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
|
||||||
|
|
||||||
titles[0].trigger('click');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
titles[1].trigger('click');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
titles[1].trigger('click');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render option icon', async () => {
|
|
||||||
const wrapper = renderWrapper({
|
|
||||||
icon: 'success',
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
|
||||||
|
|
||||||
titles[0].trigger('click');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('close-on-click-outside', async () => {
|
|
||||||
const wrapper = renderWrapper({
|
|
||||||
closeOnClickOutside: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
|
||||||
|
|
||||||
titles[0].trigger('click');
|
|
||||||
document.body.click();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disable close-on-click-outside', async () => {
|
|
||||||
const wrapper = renderWrapper({
|
|
||||||
closeOnClickOutside: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
|
||||||
|
|
||||||
titles[0].trigger('click');
|
|
||||||
document.body.click();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('direction up', async () => {
|
|
||||||
const { innerHeight } = window;
|
|
||||||
window.innerHeight = 1000;
|
|
||||||
|
|
||||||
const wrapper = renderWrapper({
|
|
||||||
direction: 'up',
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
|
||||||
titles[0].trigger('click');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
window.innerHeight = innerHeight;
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click option', async () => {
|
|
||||||
const wrapper = renderWrapper();
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
|
||||||
titles[0].trigger('click');
|
|
||||||
|
|
||||||
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
|
||||||
options[1].trigger('click');
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('title prop', async () => {
|
|
||||||
const wrapper = renderWrapper({ title: 'Title' });
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('didn`t find matched option', async () => {
|
|
||||||
const wrapper = renderWrapper({ value: -1 });
|
|
||||||
await later();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('destroy one item', async () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item v-if="render" v-model="value" :options="options" />
|
|
||||||
<van-dropdown-item v-model="value" :options="options" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: 0,
|
|
||||||
render: true,
|
|
||||||
options: [
|
|
||||||
{ text: 'A', value: 0 },
|
|
||||||
{ text: 'B', value: 1 },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
wrapper.setData({ render: false });
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disable dropdown item', async () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item disabled v-model="value" :options="options" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: 0,
|
|
||||||
options: [
|
|
||||||
{ text: 'A', value: 0 },
|
|
||||||
{ text: 'B', value: 1 },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const title = wrapper.find('.van-dropdown-menu__title');
|
|
||||||
title.trigger('click');
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('change event', async () => {
|
|
||||||
const onChange = jest.fn();
|
|
||||||
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item v-model="value" :options="options" @change="onChange" />
|
|
||||||
<van-dropdown-item v-model="value" :options="options" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: 0,
|
|
||||||
options: [
|
|
||||||
{ text: 'A', value: 0 },
|
|
||||||
{ text: 'B', value: 1 },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
|
||||||
titles[0].trigger('click');
|
|
||||||
|
|
||||||
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
|
||||||
options[0].trigger('click');
|
|
||||||
|
|
||||||
expect(onChange).toHaveBeenCalledTimes(0);
|
|
||||||
|
|
||||||
options[1].trigger('click');
|
|
||||||
expect(onChange).toHaveBeenCalledWith(1);
|
|
||||||
expect(onChange).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('toggle method', async (done) => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item ref="item" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
`,
|
|
||||||
async mounted() {
|
|
||||||
// show
|
|
||||||
this.$refs.item.toggle(true, { immediate: true });
|
|
||||||
await later();
|
|
||||||
|
|
||||||
const content = wrapper.find('.van-dropdown-item__content');
|
|
||||||
expect(content.style.display).toEqual('');
|
|
||||||
|
|
||||||
// hide
|
|
||||||
this.$refs.item.toggle(false, { immediate: true });
|
|
||||||
await later();
|
|
||||||
expect(content.style.display).toEqual('none');
|
|
||||||
|
|
||||||
done();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('title slot', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item>
|
|
||||||
<template #title>
|
|
||||||
Custom Title
|
|
||||||
</template>
|
|
||||||
</van-dropdown-item>
|
|
||||||
</van-dropdown-menu>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
280
src/dropdown-menu/test/index.spec.tsx
Normal file
280
src/dropdown-menu/test/index.spec.tsx
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
import { later, mount } from '../../../test';
|
||||||
|
import { reactive, ref, onMounted } from 'vue';
|
||||||
|
import DropdownItem from '../../dropdown-item';
|
||||||
|
import DropdownMenu, { DropdownMenuDirection } from '..';
|
||||||
|
|
||||||
|
function renderWrapper(
|
||||||
|
options: {
|
||||||
|
value?: number;
|
||||||
|
title?: string;
|
||||||
|
direction?: DropdownMenuDirection | undefined;
|
||||||
|
closeOnClickOutside?: boolean;
|
||||||
|
icon?: string;
|
||||||
|
} = {}
|
||||||
|
) {
|
||||||
|
return mount({
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
value: options.value || 0,
|
||||||
|
title: options.title || '',
|
||||||
|
direction: options.direction || 'down',
|
||||||
|
closeOnClickOutside: !!options.closeOnClickOutside,
|
||||||
|
options: [
|
||||||
|
{ text: 'A', value: 0, icon: options.icon },
|
||||||
|
{ text: 'B', value: 1, icon: options.icon },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<DropdownMenu
|
||||||
|
direction={state.direction}
|
||||||
|
closeOnClickOutside={state.closeOnClickOutside}
|
||||||
|
>
|
||||||
|
<DropdownItem
|
||||||
|
modelValue={state.value}
|
||||||
|
title={state.title}
|
||||||
|
options={state.options}
|
||||||
|
/>
|
||||||
|
<DropdownItem
|
||||||
|
modelValue={state.value}
|
||||||
|
title={state.title}
|
||||||
|
options={state.options}
|
||||||
|
/>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test('show dropdown item', async () => {
|
||||||
|
const wrapper = renderWrapper();
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
|
||||||
|
await titles[0].trigger('click');
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
|
||||||
|
await titles[1].trigger('click');
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
|
||||||
|
await titles[1].trigger('click');
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render option icon', async () => {
|
||||||
|
const wrapper = renderWrapper({
|
||||||
|
icon: 'success',
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
|
||||||
|
await titles[0].trigger('click');
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('close-on-click-outside', async () => {
|
||||||
|
const wrapper = renderWrapper({
|
||||||
|
closeOnClickOutside: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
|
||||||
|
await titles[0].trigger('click');
|
||||||
|
|
||||||
|
document.body.click();
|
||||||
|
await later();
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('disable close-on-click-outside', async () => {
|
||||||
|
const wrapper = renderWrapper({
|
||||||
|
closeOnClickOutside: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
|
||||||
|
await titles[0].trigger('click');
|
||||||
|
document.body.click();
|
||||||
|
await later();
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('direction up', async () => {
|
||||||
|
const wrapper = renderWrapper({
|
||||||
|
direction: 'up',
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
await titles[0].trigger('click');
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('click option', async () => {
|
||||||
|
const wrapper = renderWrapper();
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
await titles[0].trigger('click');
|
||||||
|
|
||||||
|
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
||||||
|
await options[1].trigger('click');
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('title prop', async () => {
|
||||||
|
const wrapper = renderWrapper({ title: 'Title' });
|
||||||
|
await later();
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('destroy one item', async () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
props: {
|
||||||
|
render: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const options = [
|
||||||
|
{ text: 'A', value: 0 },
|
||||||
|
{ text: 'B', value: 1 },
|
||||||
|
];
|
||||||
|
const value = 0;
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<DropdownMenu>
|
||||||
|
{props.render && (
|
||||||
|
<DropdownItem modelValue={value} options={options} />
|
||||||
|
)}
|
||||||
|
<DropdownItem modelValue={value} options={options} />
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
await wrapper.setProps({ render: false });
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('disable dropdown item', async () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
setup() {
|
||||||
|
const options = [
|
||||||
|
{ text: 'A', value: 0 },
|
||||||
|
{ text: 'B', value: 1 },
|
||||||
|
];
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem disabled modelValue={0} options={options} />
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
const title = wrapper.find('.van-dropdown-menu__title');
|
||||||
|
await title.trigger('click');
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('change event', async () => {
|
||||||
|
const onChange = jest.fn();
|
||||||
|
|
||||||
|
const wrapper = mount({
|
||||||
|
setup() {
|
||||||
|
const options = [
|
||||||
|
{ text: 'A', value: 0 },
|
||||||
|
{ text: 'B', value: 1 },
|
||||||
|
];
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem modelValue={0} options={options} onChange={onChange} />
|
||||||
|
<DropdownItem modelValue={0} options={options} />
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
await titles[0].trigger('click');
|
||||||
|
|
||||||
|
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
||||||
|
await options[0].trigger('click');
|
||||||
|
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(0);
|
||||||
|
|
||||||
|
await options[1].trigger('click');
|
||||||
|
expect(onChange).toHaveBeenCalledWith(1);
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('toggle method', async (done) => {
|
||||||
|
const wrapper = mount({
|
||||||
|
setup() {
|
||||||
|
const item = ref();
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// show
|
||||||
|
item.value.toggle(true, { immediate: true });
|
||||||
|
await later();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
wrapper.find('.van-dropdown-item__content').style.display
|
||||||
|
).toEqual('');
|
||||||
|
|
||||||
|
// hide
|
||||||
|
item.value.toggle(false, { immediate: true });
|
||||||
|
await later();
|
||||||
|
expect(
|
||||||
|
wrapper.find('.van-dropdown-item__content').style.display
|
||||||
|
).toEqual('none');
|
||||||
|
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem ref={item} />
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('title slot', async () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
setup() {
|
||||||
|
return () => (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem>{{ title: () => 'Custom Title' }}</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user