blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

test(Tabs): migrate all test cases (#9749)

Browse Source
This commit is contained in:
neverland 2021-10-29 11:24:40 +08:00 committed by GitHub
parent 8d9bc34a60
commit 112215a74d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 1062 additions and 918 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -57,19 +57,20 @@ exports[`should update tabs when previous tab is clicked 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"
style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
>
</div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div style="transition-duration: 0ms; transform: translateX(0px);"
<div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
<ul class="van-cascader__options">
@ -91,6 +92,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
<div class="van-swipe-item van-tab__pane-wrapper"
role="tabpanel"
aria-hidden="false"
style="width: 100px;"
>
<div class="van-tab__pane">
<ul class="van-cascader__options">

8
packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
View File

@ -46,7 +46,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -322,7 +322,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -416,7 +416,7 @@ exports[`should render list-footer slot correctly 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"
style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
>
</div>
</div>
@ -512,7 +512,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>

28
packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
View File

@ -24,7 +24,7 @@ exports[`click option 1`] = `
</span>
</div>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -66,7 +66,7 @@ exports[`click option 1`] = `
</div>
</transition-stub>
</div>
<div style="top: 0px; display: none;"
<div style="top: 100px; display: none;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -101,7 +101,7 @@ exports[`close-on-click-outside 1`] = `
</span>
</div>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -143,7 +143,7 @@ exports[`close-on-click-outside 1`] = `
</div>
</transition-stub>
</div>
<div style="top: 0px; display: none;"
<div style="top: 100px; display: none;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -323,7 +323,7 @@ exports[`disable close-on-click-outside 1`] = `
</span>
</div>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -365,7 +365,7 @@ exports[`disable close-on-click-outside 1`] = `
</div>
</transition-stub>
</div>
<div style="top: 0px; display: none;"
<div style="top: 100px; display: none;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -425,7 +425,7 @@ exports[`render option icon 1`] = `
</span>
</div>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -471,7 +471,7 @@ exports[`render option icon 1`] = `
</div>
</transition-stub>
</div>
<div style="top: 0px; display: none;"
<div style="top: 100px; display: none;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -506,7 +506,7 @@ exports[`show dropdown item 1`] = `
</span>
</div>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -548,7 +548,7 @@ exports[`show dropdown item 1`] = `
</div>
</transition-stub>
</div>
<div style="top: 0px; display: none;"
<div style="top: 100px; display: none;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -583,7 +583,7 @@ exports[`show dropdown item 2`] = `
</span>
</div>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -625,7 +625,7 @@ exports[`show dropdown item 2`] = `
</div>
</transition-stub>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -694,7 +694,7 @@ exports[`show dropdown item 3`] = `
</span>
</div>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>
@ -736,7 +736,7 @@ exports[`show dropdown item 3`] = `
</div>
</transition-stub>
</div>
<div style="top: 0px;"
<div style="top: 100px;"
class="van-dropdown-item van-dropdown-item--down"
>
<transition-stub>

2
packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
View File

@ -42,7 +42,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>

2
packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
View File

@ -41,7 +41,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>

8
packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
View File

@ -23,7 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -867,8 +867,10 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div style="height: 0px;">
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom">
<div style="height: 100px;">
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom"
style="width: 100px;"
>
Z
</div>
</div>

2
packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
View File

@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>

14
packages/vant/src/notice-bar/test/__snapshots__/demo.spec.ts.snap
View File

@ -124,16 +124,22 @@ exports[`should render demo and match snapshot 1`] = `
class="van-notice-bar__content van-ellipsis"
>
<div class="van-swipe notice-swipe">
<div style="transition-duration: 0ms; transform: translateY(0px);"
<div style="transition-duration: 0ms; transform: translateY(0px); height: 300px;"
class="van-swipe__track van-swipe__track--vertical"
>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="height: 100px;"
>
Content 1
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="height: 100px;"
>
Content 2
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="height: 100px;"
>
Content 3
</div>
</div>

4
packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap
View File

@ -41,7 +41,7 @@ exports[`should locate to reference element when showed 1`] = `
exports[`should locate to reference element when showed 2`] = `
<transition-stub>
<div style="z-index: 2007; position: absolute; left: 0px; top: 8px; margin: 0px;"
<div style="z-index: 2007; position: absolute; left: 0px; top: 108px; margin: 0px;"
class="van-popup van-popover van-popover--light"
data-popper-placement="bottom"
>
@ -72,7 +72,7 @@ exports[`should locate to reference element when showed 3`] = `
exports[`should watch placement prop and update location 1`] = `
<transition-stub>
<div style="z-index: 2008; position: absolute; left: 0px; top: -8px; margin: 0px;"
<div style="z-index: 2008; position: absolute; left: 0px; top: -108px; margin: 0px;"
class="van-popup van-popover van-popover--light"
data-popper-placement="top"
>

2
packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
View File

@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>

72
packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap
View File

@ -3,19 +3,27 @@
exports[`should render demo and match snapshot 1`] = `
<div>
<div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px);"
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
1
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
2
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
3
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
4
</div>
</div>
@ -35,18 +43,26 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div>
<div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px);"
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
<img src="https://img.yzcdn.cn/vant/apple-1.jpg">
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
<img src="https://img.yzcdn.cn/vant/apple-2.jpg">
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
<img src="https://img.yzcdn.cn/vant/apple-4.jpg">
</div>
</div>
@ -64,19 +80,27 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div>
<div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px);"
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
1
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
2
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
3
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
4
</div>
</div>
@ -178,19 +202,27 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div>
<div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px);"
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
1
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
2
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
3
</div>
<div class="van-swipe-item">
<div class="van-swipe-item"
style="width: 100px;"
>
4
</div>
</div>

2
packages/vant/src/tab/README.md
View File

@ -36,7 +36,7 @@ import { ref } from 'vue';
export default {
setup() {
const active = ref(2);
const active = ref(0);
return { active };
},
};

2
packages/vant/src/tab/README.zh-CN.md
View File

@ -37,7 +37,7 @@ import { ref } from 'vue';
export default {
setup() {
const active = ref(2);
const active = ref(0);
return { active };
},
};

34
packages/vant/src/tab/demo/index.vue
View File

@ -40,7 +40,17 @@ const t = useTranslate({
},
});
const active = ref(2);
const active1 = ref(0);
const active2 = ref(0);
const active3 = ref(0);
const active4 = ref(0);
const active5 = ref(0);
const active6 = ref(0);
const active7 = ref(0);
const active8 = ref(0);
const active9 = ref(0);
const active10 = ref(0);
const active11 = ref(0);
const activeName = ref('b');
const tabs = [1, 2, 3, 4];
@ -61,7 +71,7 @@ const beforeChange = (name: number) => {
<template>
<demo-block :title="t('basicUsage')">
<van-tabs v-model:active="active">
<van-tabs v-model:active="active1">
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -77,7 +87,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title2')">
<van-tabs>
<van-tabs v-model:active="active2">
<van-tab v-for="index in 8" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -85,7 +95,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title3')">
<van-tabs>
<van-tabs v-model:active="active3">
<van-tab
v-for="index in 3"
:title="t('tab') + index"
@ -98,7 +108,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title4')">
<van-tabs type="card">
<van-tabs v-model:active="active4" type="card">
<van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -106,7 +116,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title5')">
<van-tabs @click-tab="onClickTab">
<van-tabs v-model:active="active5" @click-tab="onClickTab">
<van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -114,7 +124,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title6')">
<van-tabs :active="active" sticky>
<van-tabs v-model:active="active6" sticky>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -122,7 +132,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title7')">
<van-tabs :active="active">
<van-tabs v-model:active="active7">
<van-tab v-for="index in 2" :key="index">
<template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
{{ t('content') }} {{ index }}
@ -131,7 +141,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title8')">
<van-tabs animated>
<van-tabs v-model:active="active8" animated>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -139,7 +149,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title9')">
<van-tabs :active="active" swipeable>
<van-tabs v-model:active="active9" swipeable>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -147,7 +157,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('title10')">
<van-tabs scrollspy sticky>
<van-tabs v-model:active="active10" scrollspy sticky>
<van-tab :title="t('tab') + index" v-for="index in 8" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@ -155,7 +165,7 @@ const beforeChange = (name: number) => {
</demo-block>
<demo-block :title="t('beforeChange')">
<van-tabs :before-change="beforeChange">
<van-tabs v-model:active="active11" :before-change="beforeChange">
<van-tab :title="t('tab') + index" v-for="index in 4" :key="index">
{{ t('content') }} {{ index }}
</van-tab>

110
packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
View File

@ -8,8 +8,8 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab"
aria-selected="false"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
@ -24,8 +24,8 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
@ -40,27 +40,27 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style
>
content of tab 3
content of tab 1
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
@ -101,7 +101,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -197,7 +197,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -278,7 +278,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -378,7 +378,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -407,8 +407,8 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab"
aria-selected="false"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
@ -423,8 +423,8 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
@ -439,7 +439,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -447,21 +447,21 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style
>
content of tab 3
content of tab 1
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
@ -498,7 +498,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -557,19 +557,20 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div style="transition-duration: 0ms; transform: translateX(0px);"
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper"
role="tabpanel"
aria-hidden="false"
style="width: 100px;"
>
<div class="van-tab__pane">
content of tab 1
@ -578,6 +579,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
content of tab 2
@ -586,11 +588,13 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
</div>
</div>
@ -605,8 +609,8 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab"
aria-selected="false"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
@ -621,8 +625,8 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
@ -637,19 +641,20 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div style="transition-duration: 0ms; transform: translateX(0px);"
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
<div class="van-swipe-item van-tab__pane-wrapper"
role="tabpanel"
aria-hidden="true"
aria-hidden="false"
style="width: 100px;"
>
<div class="van-tab__pane">
content of tab 1
@ -658,19 +663,22 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
content of tab 2
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="false"
aria-hidden="true"
style="width: 100px;"
>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
</div>
</div>
@ -751,7 +759,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -841,7 +849,7 @@ exports[`should render demo and match snapshot 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>

368
packages/vant/src/tab/test/__snapshots__/index.legacy.js.snap
View File

@ -1,368 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`badge prop 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
<div class="van-info">10</div>
</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
</div>
</div>
`;
exports[`border props 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content"></div>
</div>
`;
exports[`change tabs data 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`change tabs data 2`] = `
<div class="van-tabs van-tabs--card">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--card" style="border-color: blue;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="border-color: blue; background-color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab" style="border-color: blue; color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled" style="border-color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`click to switch tab 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style="">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`click to switch tab 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
<div role="tabpanel" class="van-tab__pane" style="">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`dot prop 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
<div class="van-badge van-badge--dot"></div>
</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
</div>
</div>
`;
exports[`badge prop 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
<div class="van-badge">10</div>
</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
</div>
</div>
`;
exports[`lazy render 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`lazy render 2`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="background-color: rgb(238, 10, 36); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
</div>
</div>
`;
exports[`name prop 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style="">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`render empty tab 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<!---->
<!---->
</div>
</div>
`;
exports[`render nav-left & nav-right slot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>Nav Right
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`rendered event 1`] = `<div role="tabpanel" class="van-tab__pane" style="">Text</div>`;
exports[`scrollspy prop 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane">Text</div>
</div>
</div>
`;
exports[`scrollspy prop 2`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
</div>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane">Text</div>
</div>
</div>
`;
exports[`swipe to switch tab 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`swipe to switch tab 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
<div role="tabpanel" class="van-tab__pane" style="">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`swipe to switch tab 3`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
<div role="tabpanel" class="van-tab__pane" style="">Text</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;

466
packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
View File

@ -1,6 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should not render zero badge when show-zero-badge prop is false 1`] = `
exports[`should allow to disable lazy-render prop 1`] = `
<div class="van-tabs__content">
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
</div>
`;
exports[`should allow to disable lazy-render prop 2`] = `
<div class="van-tabs__content">
<div role="tabpanel"
class="van-tab__pane"
style
>
Text
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
Text
</div>
</div>
`;
exports[`should allow to set name prop 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist"
@ -10,25 +42,28 @@ exports[`should not render zero badge when show-zero-badge prop is false 1`] = `
class="van-tab van-tab--active"
aria-selected="true"
>
<div class="van-badge__wrapper">
<span class="van-tab__text van-tab__text--ellipsis">
</span>
<div class="van-badge van-badge--fixed">
0
</div>
</div>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
class="van-tab"
aria-selected="false"
>
<div class="van-badge__wrapper">
<span class="van-tab__text van-tab__text--ellipsis">
</span>
</div>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -38,7 +73,12 @@ exports[`should not render zero badge when show-zero-badge prop is false 1`] = `
class="van-tab__pane"
style
>
1
Text
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
@ -48,3 +88,401 @@ exports[`should not render zero badge when show-zero-badge prop is false 1`] = `
</div>
</div>
`;
exports[`should emit rendered event after tab is rendered 1`] = `
DOMWrapper {
"isDisabled": [Function],
"style": CSSStyleDeclaration {
"_importants": Object {},
"_length": 0,
"_onChange": [Function],
"_values": Object {},
},
"wrapperElement": <div
class="van-tab__pane"
role="tabpanel"
style=""
>
Text
</div>,
}
`;
exports[`should not render empty tab 1`] = `
<div class="van-tabs__content">
</div>
`;
exports[`should render badge prop correctly 1`] = `
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
>
<div class="van-badge__wrapper">
<span class="van-tab__text van-tab__text--ellipsis">
</span>
<div class="van-badge van-badge--fixed">
10
</div>
</div>
</div>
`;
exports[`should render nav-left、nav-right slot correctly 1`] = `
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
>
Custom nav left
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
Title
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
Custom nav right
</div>
</div>
`;
exports[`should switch tab after click the tab title 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
class="van-tab__pane"
style
>
Text
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
</div>
</div>
`;
exports[`should switch tab after click the tab title 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
>
</div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
Text
</div>
<div role="tabpanel"
class="van-tab__pane"
style
>
Text
</div>
<div role="tabpanel"
class="van-tab__pane"
style="display: none;"
>
</div>
</div>
</div>
`;
exports[`swipe switch tab after swiping tab content 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper"
role="tabpanel"
aria-hidden="false"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
</div>
</div>
</div>
</div>
</div>
`;
exports[`swipe switch tab after swiping tab content 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
role="tabpanel"
aria-hidden="false"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`swipe switch tab after swiping tab content 3`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
>
<div role="tab"
class="van-tab"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
</span>
</div>
<div role="tab"
class="van-tab van-tab--active"
aria-selected="true"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
</span>
</div>
<div role="tab"
class="van-tab van-tab--disabled"
aria-selected="false"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
>
</div>
</div>
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-swipe van-tabs__track">
<div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper"
role="tabpanel"
aria-hidden="false"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
role="tabpanel"
aria-hidden="true"
style="width: 100px;"
>
<div class="van-tab__pane">
Text
</div>
</div>
</div>
</div>
</div>
</div>
`;

6
packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
View File

@ -31,7 +31,7 @@ exports[`should render Tab inside a component correctly 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%);"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
@ -88,7 +88,7 @@ exports[`should render correctly after inserting a tab 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"
style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
>
</div>
</div>
@ -139,7 +139,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"
style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
>
</div>
</div>

409
packages/vant/src/tab/test/index.legacy.js
View File

@ -1,409 +0,0 @@
import { Tabs } from '../../tabs';
import { mount, later, triggerDrag, mockScrollTop } from '../../../test';
function createWrapper(options = {}) {
return mount({
template: `
<van-tabs
:color="color"
:type="type"
:sticky="sticky"
:line-width="lineWidth"
:lazy-render="lazyRender"
@change="onChange"
>
${options.extraTemplate || ''}
<van-tab title="title1">Text</van-tab>
<van-tab title="title2">Text</van-tab>
<van-tab title="title3" disabled>Text</van-tab>
</van-tabs>
`,
data() {
return {
color: '#ee0a24',
type: 'line',
sticky: true,
lineWidth: 2,
lazyRender: true,
};
},
...options,
});
}
test('click to switch tab', async () => {
const onChange = jest.fn();
const wrapper = mount({
template: `
<van-tabs @change="onChange">
<van-tab title="title1">Text</van-tab>
<van-tab title="title2">Text</van-tab>
<van-tab title="title3" disabled>Text</van-tab>
</van-tabs>
`,
methods: {
onChange,
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
tabs[1].trigger('click');
tabs[2].trigger('click');
await later();
expect(wrapper.html()).toMatchSnapshot();
expect(onChange).toHaveBeenCalledTimes(1);
});
test('swipe to switch tab', async () => {
const onChange = jest.fn();
const wrapper = mount({
template: `
<van-tabs v-model:active="active" swipeable @change="onChange">
<van-tab title="title1">Text</van-tab>
<van-tab title="title2">Text</van-tab>
<van-tab title="title3" disabled>Text</van-tab>
</van-tabs>
`,
data() {
return {
active: 0,
};
},
methods: {
onChange,
},
});
const content = wrapper.find('.van-tabs__content');
await later();
expect(wrapper.html()).toMatchSnapshot();
triggerDrag(content, -100, 0);
expect(wrapper.html()).toMatchSnapshot();
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith(1, 'title2');
triggerDrag(content, -100, 0);
expect(onChange).toHaveBeenCalledTimes(1);
expect(wrapper.html()).toMatchSnapshot();
await later();
wrapper.unmount();
});
test('change tabs data', async () => {
const wrapper = createWrapper();
await later();
expect(wrapper.html()).toMatchSnapshot();
wrapper.setData({
swipeable: false,
sticky: false,
type: 'card',
color: 'blue',
});
await later();
expect(wrapper.html()).toMatchSnapshot();
});
test('lazy render', async () => {
const wrapper = createWrapper();
expect(wrapper.html()).toMatchSnapshot();
wrapper.setData({
lazyRender: false,
});
await later();
expect(wrapper.html()).toMatchSnapshot();
});
test('render nav-left & nav-right slot', async () => {
const wrapper = createWrapper({
extraTemplate: `
<template v-slot:nav-left>Nav Left</template>
<template v-slot:nav-right>Nav Right</template>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('border props', async () => {
const wrapper = mount(Tabs, {
props: {
border: false,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('name prop', async () => {
const onClick = jest.fn();
const onChange = jest.fn();
const onDisabled = jest.fn();
const wrapper = mount({
template: `
<van-tabs v-model:active="active" @click="onClick" @disabled="onDisabled" @change="onChange">
<van-tab title="title1" name="a">Text</van-tab>
<van-tab title="title2" name="b">Text</van-tab>
<van-tab title="title3" name="c" disabled>Text</van-tab>
</van-tabs>
`,
methods: {
onClick,
onChange,
onDisabled,
},
data() {
return {
active: 0,
};
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
tabs[1].trigger('click');
expect(onClick).toHaveBeenCalledWith('b', 'title2');
expect(onChange).toHaveBeenCalledWith('b', 'title2');
expect(onChange).toHaveBeenCalledTimes(1);
tabs[2].trigger('click');
expect(onDisabled).toHaveBeenCalledWith('c', 'title3');
expect(onChange).toHaveBeenCalledTimes(1);
});
test('set name to zero', async () => {
const onClick = jest.fn();
const wrapper = mount({
template: `
<van-tabs @click="onClick">
<van-tab title="title1" :name="1">Text</van-tab>
<van-tab title="title2" :name="0">Text</van-tab>
</van-tabs>
`,
methods: {
onClick,
},
});
const tabs = wrapper.findAll('.van-tab');
tabs[1].trigger('click');
expect(onClick).toHaveBeenCalledWith(0, 'title2');
});
test('title-style prop', () => {
const wrapper = mount({
template: `
<van-tabs>
<van-tab title="title1" title-style="color: red;">Text</van-tab>
</van-tabs>
`,
});
expect(wrapper.find('.van-tab').style.color).toEqual('red');
});
test('dot prop', () => {
const wrapper = mount({
template: `
<van-tabs>
<van-tab dot>Text</van-tab>
</van-tabs>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('badge prop', () => {
const wrapper = mount({
template: `
<van-tabs>
<van-tab badge="10">Text</van-tab>
</van-tabs>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('scrollspy prop', async () => {
const onChange = jest.fn();
window.scrollTo = jest.fn();
const wrapper = mount({
template: `
<van-tabs scrollspy sticky @change="onChange">
<van-tab name="a" title="title1">Text</van-tab>
<van-tab name="b" title="title2">Text</van-tab>
<van-tab name="c" title="title3">Text</van-tab>
</van-tabs>
`,
methods: {
onChange,
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
tabs[2].trigger('click');
expect(onChange).toHaveBeenCalledWith('c', 'title3');
await later();
mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
expect(onChange).toHaveBeenCalledWith('c', 'title3');
});
test('scrollTo method', async () => {
const onChange = jest.fn();
window.scrollTo = jest.fn();
mount({
template: `
<van-tabs scrollspy sticky @change="onChange" ref="root">
<van-tab name="a" title="title1">Text</van-tab>
<van-tab name="b" title="title2">Text</van-tab>
<van-tab name="c" title="title3">Text</van-tab>
</van-tabs>
`,
methods: {
onChange,
},
mounted() {
this.$refs.root.scrollTo('b');
},
});
await later();
expect(onChange).toHaveBeenCalledWith('b', 'title2');
});
test('rendered event', async () => {
const onRendered = jest.fn();
const wrapper = mount({
template: `
<van-tabs v-model:active="active" @rendered="onRendered">
<van-tab name="a" title="title1">Text</van-tab>
<van-tab name="b" title="title2">Title2</van-tab>
</van-tabs>
`,
data() {
return {
active: 'a',
};
},
methods: {
onRendered,
},
});
await later();
expect(onRendered).toHaveBeenCalledWith('a', 'title1');
expect(wrapper.find('.van-tab__pane')).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
tabs[1].trigger('click');
tabs[0].trigger('click');
await later();
expect(onRendered).toHaveBeenCalledTimes(2);
});
test('should not trigger rendered event when disable lazy-render', async () => {
const onRendered = jest.fn();
mount({
template: `
<van-tabs :lazy-render="false" @rendered="onRendered">
<van-tab>Text</van-tab>
<van-tab>Title2</van-tab>
</van-tabs>
`,
methods: {
onRendered,
},
});
await later();
expect(onRendered).toHaveBeenCalledTimes(0);
});
test('before-change prop', async () => {
const onChange = jest.fn();
const wrapper = mount({
template: `
<van-tabs @change="onChange" :before-change="beforeChange">
<van-tab title="title1">Text</van-tab>
<van-tab title="title2">Text</van-tab>
<van-tab title="title3">Text</van-tab>
<van-tab title="title4">Text</van-tab>
<van-tab title="title5">Text</van-tab>
</van-tabs>
`,
methods: {
onChange,
beforeChange(name) {
switch (name) {
case 1:
return false;
case 2:
return true;
case 3:
return Promise.resolve(false);
case 4:
return Promise.resolve(true);
}
},
},
});
await later();
const tabs = wrapper.findAll('.van-tab');
tabs[1].trigger('click');
expect(onChange).toHaveBeenCalledTimes(0);
tabs[2].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith(2, 'title3');
tabs[3].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
tabs[4].trigger('click');
await later();
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenLastCalledWith(4, 'title5');
});
test('render empty tab', async () => {
const wrapper = mount({
template: `
<van-tabs>
<van-tab title="title1" />
<van-tab title="title2" />
</van-tabs>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});

419
packages/vant/src/tab/test/index.spec.tsx
View File

@ -1,6 +1,7 @@
import { mount, later } from '../../../test';
import { ref } from 'vue';
import { mount, later, triggerDrag, mockScrollTop } from '../../../test';
import { Tab } from '..';
import { Tabs } from '../../tabs';
import { Tabs, TabsInstance } from '../../tabs';
test('should emit click-tab event when tab is clicked', async () => {
const onClickTab = jest.fn();
@ -43,5 +44,417 @@ test('should not render zero badge when show-zero-badge prop is false', async ()
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.findAll('.van-badge').length).toEqual(1);
});
test('should switch tab after click the tab title', async () => {
const onChange = jest.fn();
const wrapper = mount({
render() {
return (
<Tabs onChange={onChange}>
<Tab title="title1">Text</Tab>
<Tab title="title2">Text</Tab>
<Tab title="title3" disabled>
Text
</Tab>
</Tabs>
);
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
await tabs[1].trigger('click');
await tabs[2].trigger('click');
await later();
expect(wrapper.html()).toMatchSnapshot();
expect(onChange).toHaveBeenCalledTimes(1);
});
test('swipe switch tab after swiping tab content', async () => {
const onChange = jest.fn();
const wrapper = mount({
data() {
return {
active: 0,
};
},
render() {
return (
<Tabs v-model:active={this.active} swipeable onChange={onChange}>
<Tab title="title1">Text</Tab>
<Tab title="title2">Text</Tab>
<Tab title="title3" disabled>
Text
</Tab>
</Tabs>
);
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
const content = wrapper.find('.van-swipe__track');
await triggerDrag(content, -100, 0);
expect(wrapper.html()).toMatchSnapshot();
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith(1, 'title2');
await triggerDrag(content, -100, 0);
expect(onChange).toHaveBeenCalledTimes(1);
expect(wrapper.html()).toMatchSnapshot();
await later();
wrapper.unmount();
});
test('should allow to disable lazy-render prop', async () => {
const wrapper = mount({
render() {
return (
<Tabs lazyRender={this.lazyRender}>
<Tab title="title1">Text</Tab>
<Tab title="title2">Text</Tab>
</Tabs>
);
},
data() {
return {
lazyRender: true,
};
},
});
expect(wrapper.find('.van-tabs__content').html()).toMatchSnapshot();
await wrapper.setData({ lazyRender: false });
expect(wrapper.find('.van-tabs__content').html()).toMatchSnapshot();
});
test('should not render empty tab', async () => {
const wrapper = mount({
render() {
return (
<Tabs>
<Tab title="title1" />
<Tab title="title2" />
</Tabs>
);
},
});
expect(wrapper.find('.van-tabs__content').html()).toMatchSnapshot();
});
test('should render dot prop correctly', async () => {
const wrapper = mount({
render() {
return (
<Tabs>
<Tab dot>Text</Tab>
</Tabs>
);
},
});
await later();
const firstTab = wrapper.find('.van-tab');
expect(firstTab.find('.van-badge--dot').exists()).toBeTruthy();
});
test('should render badge prop correctly', async () => {
const wrapper = mount({
render() {
return (
<Tabs>
<Tab badge="10">Text</Tab>
</Tabs>
);
},
});
await later();
expect(wrapper.find('.van-tab').html()).toMatchSnapshot();
});
test('should change title style when using title-style prop', async () => {
const wrapper = mount({
render() {
return (
<Tabs>
<Tab title="title1" titleStyle="color: red;">
Text
</Tab>
</Tabs>
);
},
});
await later();
expect(wrapper.find('.van-tab').style.color).toEqual('red');
});
test('should allot to hide bottom border by border prop', async () => {
const wrapper = mount(Tabs, {
props: {
border: true,
},
});
expect(wrapper.find('.van-hairline--top-bottom').exists()).toBeTruthy();
await wrapper.setProps({ border: false });
expect(wrapper.find('.van-hairline--top-bottom').exists()).toBeFalsy();
});
test('should render nav-left、nav-right slot correctly', async () => {
const wrapper = mount({
render() {
return (
<Tabs
v-slots={{
'nav-left': () => 'Custom nav left',
'nav-right': () => 'Custom nav right',
}}
>
<Tab title="Title">Text</Tab>
</Tabs>
);
},
});
await later();
expect(wrapper.find('.van-tabs__wrap').html()).toMatchSnapshot();
});
test('should emit rendered event after tab is rendered', async () => {
const onRendered = jest.fn();
const wrapper = mount({
data() {
return {
active: 'a',
};
},
render() {
return (
<Tabs v-model:active={this.active} onRendered={onRendered}>
<Tab name="a" title="title1">
Text
</Tab>
<Tab name="b" title="title2">
Title2
</Tab>
</Tabs>
);
},
});
await later();
expect(onRendered).toHaveBeenCalledWith('a', 'title1');
expect(wrapper.find('.van-tab__pane')).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
await tabs[1].trigger('click');
await tabs[0].trigger('click');
await later();
expect(onRendered).toHaveBeenCalledTimes(2);
});
test('should not trigger rendered event when lazy-render prop is disabled', async () => {
const onRendered = jest.fn();
mount({
render() {
return (
<Tabs lazyRender={false} onRendered={onRendered}>
<Tab>Text</Tab>
<Tab>Title2</Tab>
</Tabs>
);
},
});
await later();
expect(onRendered).toHaveBeenCalledTimes(0);
});
test('should allow to set name prop', async () => {
const onChange = jest.fn();
const onClickTab = jest.fn();
const wrapper = mount({
data() {
return {
active: 'a',
};
},
render() {
return (
<Tabs
v-model:active={this.active}
onChange={onChange}
onClick-tab={onClickTab}
>
<Tab title="title1" name="a">
Text
</Tab>
<Tab title="title2" name="b">
Text
</Tab>
<Tab title="title3" name="c" disabled>
Text
</Tab>
</Tabs>
);
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
const tabs = wrapper.findAll('.van-tab');
await tabs[1].trigger('click');
expect(onChange.mock.calls[0][0]).toEqual('b');
expect(onClickTab.mock.calls[0][0].name).toEqual('b');
expect(onChange).toHaveBeenCalledTimes(1);
await tabs[2].trigger('click');
expect(onClickTab.mock.calls[1][0].name).toEqual('c');
expect(onChange).toHaveBeenCalledTimes(1);
});
test('should allow name prop to be zero', async () => {
const onClickTab = jest.fn();
const wrapper = mount({
render() {
return (
<Tabs onClick-tab={onClickTab}>
<Tab title="title1" name={1}>
Text
</Tab>
<Tab title="title2" name={0}>
Text
</Tab>
</Tabs>
);
},
});
await later();
const tabs = wrapper.findAll('.van-tab');
await tabs[1].trigger('click');
expect(onClickTab.mock.calls[0][0].name).toEqual(0);
});
test('should change active tab after scrolling when using scrollspy prop', async () => {
const onChange = jest.fn();
window.scrollTo = jest.fn();
mount({
data() {
return {
active: 'a',
};
},
render() {
return (
<Tabs v-model:active={this.active} scrollspy onChange={onChange}>
<Tab name="a" title="title1">
Text
</Tab>
<Tab name="b" title="title2">
Text
</Tab>
</Tabs>
);
},
});
await later();
mockScrollTop(100);
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith('b', 'title2');
});
test('should allow to call scrollTo method when scrollspy is enabled', async () => {
const onChange = jest.fn();
const tabs = ref<TabsInstance>();
mount({
render() {
return (
<Tabs ref={tabs} scrollspy sticky onChange={onChange}>
<Tab name="a" title="title1">
Text
</Tab>
<Tab name="b" title="title2">
Text
</Tab>
<Tab name="c" title="title3">
Text
</Tab>
</Tabs>
);
},
});
tabs.value?.scrollTo('b');
await later();
expect(onChange).toHaveBeenCalledWith('b', 'title2');
});
test('should call before-change prop before changing', async () => {
const onChange = jest.fn();
const beforeChange = (name: number) => {
switch (name) {
case 1:
return false;
case 2:
return true;
case 3:
return Promise.resolve(false);
case 4:
return Promise.resolve(true);
}
};
const wrapper = mount({
render() {
return (
<Tabs onChange={onChange} beforeChange={beforeChange}>
<Tab title="title1">Text</Tab>
<Tab title="title2">Text</Tab>
<Tab title="title3">Text</Tab>
<Tab title="title4">Text</Tab>
<Tab title="title5">Text</Tab>
</Tabs>
);
},
});
await later();
const tabs = wrapper.findAll('.van-tab');
await tabs[1].trigger('click');
expect(onChange).toHaveBeenCalledTimes(0);
await tabs[2].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith(2, 'title3');
await tabs[3].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
await tabs[4].trigger('click');
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenLastCalledWith(4, 'title5');
});

4
packages/vant/src/utils/interceptor.ts
View File

@ -1,7 +1,9 @@
import { noop } from './basic';
import { isPromise } from './validate';
export type Interceptor = (...args: unknown[]) => Promise<boolean> | boolean;
export type Interceptor = (
...args: any[]
) => Promise<boolean> | boolean | undefined;
export function callInterceptor(
interceptor: Interceptor | undefined,

12
packages/vant/test/dom.ts
View File

@ -20,12 +20,12 @@ function mockHTMLElementOffset() {
},
offsetHeight: {
get() {
return parseFloat(window.getComputedStyle(this).height) || 0;
return parseFloat(window.getComputedStyle(this).height) || 100;
},
},
offsetWidth: {
get() {
return parseFloat(window.getComputedStyle(this).width) || 0;
return parseFloat(window.getComputedStyle(this).width) || 100;
},
},
});
@ -51,3 +51,11 @@ export async function mockScrollTop(value: number) {
mockScrollIntoView();
mockHTMLElementOffset();
mockGetBoundingClientRect({
width: 100,
height: 100,
top: 0,
left: 0,
right: 100,
bottom: 100,
});