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