-
diff --git a/packages/vant/src/notice-bar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/notice-bar/test/__snapshots__/demo.spec.ts.snap
index 07adec3dd..6fbedb4ec 100644
--- a/packages/vant/src/notice-bar/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/notice-bar/test/__snapshots__/demo.spec.ts.snap
@@ -124,16 +124,22 @@ exports[`should render demo and match snapshot 1`] = `
class="van-notice-bar__content van-ellipsis"
>
+
+
diff --git a/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
index 6ccee5f86..8ef8e141f 100644
--- a/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
Z
-
-
+
Content 1
-
+
-
Content 2
-
+
diff --git a/packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap
index e26af7a0b..09edde75a 100644
--- a/packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`should locate to reference element when showed 1`] = `
exports[`should locate to reference element when showed 2`] = `
Content 3
@@ -72,7 +72,7 @@ exports[`should locate to reference element when showed 3`] = `
exports[`should watch placement prop and update location 1`] = `
-
diff --git a/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap
index 038471e3f..68ca0e841 100644
--- a/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap
@@ -3,19 +3,27 @@
exports[`should render demo and match snapshot 1`] = `
diff --git a/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
index 072104e50..80b453770 100644
--- a/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
-
-
+
1
-
+
diff --git a/packages/vant/src/tab/test/index.legacy.js b/packages/vant/src/tab/test/index.legacy.js
deleted file mode 100644
index 09aada00d..000000000
--- a/packages/vant/src/tab/test/index.legacy.js
+++ /dev/null
@@ -1,409 +0,0 @@
-import { Tabs } from '../../tabs';
-import { mount, later, triggerDrag, mockScrollTop } from '../../../test';
-
-function createWrapper(options = {}) {
- return mount({
- template: `
-
- ${options.extraTemplate || ''}
- Text
- Text
- Text
-
- `,
- 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: `
-
- Text
- Text
- Text
-
- `,
- 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: `
-
- Text
- Text
- Text
-
- `,
- 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: `
- Nav Left
- Nav Right
- `,
- });
-
- 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: `
-
- Text
- Text
- Text
-
- `,
- 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: `
-
- Text
- Text
-
- `,
- 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: `
-
- Text
-
- `,
- });
-
- expect(wrapper.find('.van-tab').style.color).toEqual('red');
-});
-
-test('dot prop', () => {
- const wrapper = mount({
- template: `
-
- Text
-
- `,
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('badge prop', () => {
- const wrapper = mount({
- template: `
-
- Text
-
- `,
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('scrollspy prop', async () => {
- const onChange = jest.fn();
- window.scrollTo = jest.fn();
-
- const wrapper = mount({
- template: `
-
- Text
- Text
- Text
-
- `,
- 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: `
-
- Text
- Text
- Text
-
- `,
- 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: `
-
- Text
- Title2
-
- `,
- 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: `
-
- Text
- Title2
-
- `,
- methods: {
- onRendered,
- },
- });
-
- await later();
- expect(onRendered).toHaveBeenCalledTimes(0);
-});
-
-test('before-change prop', async () => {
- const onChange = jest.fn();
- const wrapper = mount({
- template: `
-
- Text
- Text
- Text
- Text
- Text
-
- `,
- 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: `
-
-
- `,
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/packages/vant/src/tab/test/index.spec.tsx b/packages/vant/src/tab/test/index.spec.tsx
index 7e3702fe4..eba005f21 100644
--- a/packages/vant/src/tab/test/index.spec.tsx
+++ b/packages/vant/src/tab/test/index.spec.tsx
@@ -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 (
+
+ Text
+ Text
+
+ Text
+
+
+ );
+ },
+ });
+
+ 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 (
+
+ Text
+ Text
+
+ Text
+
+
+ );
+ },
+ });
+
+ 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 (
+
+ Text
+ Text
+
+ );
+ },
+ 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 (
+
+
+ );
+ },
+ });
+
+ expect(wrapper.find('.van-tabs__content').html()).toMatchSnapshot();
+});
+
+test('should render dot prop correctly', async () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+ Text
+
+ );
+ },
+ });
+
+ 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 (
+
+ Text
+
+ );
+ },
+ });
+
+ 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 (
+
+
+ Text
+
+
+ );
+ },
+ });
+
+ 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 (
+ 'Custom nav left',
+ 'nav-right': () => 'Custom nav right',
+ }}
+ >
+ Text
+
+ );
+ },
+ });
+
+ 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 (
+
+
+ Text
+
+
+ Title2
+
+
+ );
+ },
+ });
+
+ 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 (
+
+ Text
+ Title2
+
+ );
+ },
+ });
+
+ 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 (
+
+
+ Text
+
+
+ Text
+
+
+ Text
+
+
+ );
+ },
+ });
+
+ 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 (
+
+
+ Text
+
+
+ Text
+
+
+ );
+ },
+ });
+
+ 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 (
+
+
+ Text
+
+
+ Text
+
+
+ );
+ },
+ });
+
+ 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();
+
+ mount({
+ render() {
+ return (
+
+
+ Text
+
+
+ Text
+
+
+ Text
+
+
+ );
+ },
+ });
+
+ 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 (
+
+ Text
+ Text
+ Text
+ Text
+ Text
+
+ );
+ },
+ });
+
+ 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');
});
diff --git a/packages/vant/src/utils/interceptor.ts b/packages/vant/src/utils/interceptor.ts
index 41e26a230..6644642d1 100644
--- a/packages/vant/src/utils/interceptor.ts
+++ b/packages/vant/src/utils/interceptor.ts
@@ -1,7 +1,9 @@
import { noop } from './basic';
import { isPromise } from './validate';
-export type Interceptor = (...args: unknown[]) => Promise | boolean;
+export type Interceptor = (
+ ...args: any[]
+) => Promise | boolean | undefined;
export function callInterceptor(
interceptor: Interceptor | undefined,
diff --git a/packages/vant/test/dom.ts b/packages/vant/test/dom.ts
index 5e89e7d9b..8f0bfb352 100644
--- a/packages/vant/test/dom.ts
+++ b/packages/vant/test/dom.ts
@@ -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,
+});
2
-
+
3
-
+
@@ -35,18 +43,26 @@ exports[`should render demo and match snapshot 1`] = `
4
-
@@ -139,7 +139,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
-
+
-
+
-
+
-
+
@@ -64,19 +80,27 @@ exports[`should render demo and match snapshot 1`] = `
-
-
@@ -447,21 +447,21 @@ exports[`should render demo and match snapshot 1`] = `
+
@@ -407,8 +407,8 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
>
1
-
+
@@ -378,7 +378,7 @@ exports[`should render demo and match snapshot 1`] = `
2
-
+
3
-
+
@@ -178,19 +202,27 @@ exports[`should render demo and match snapshot 1`] = `
4
-
-
@@ -278,7 +278,7 @@ exports[`should render demo and match snapshot 1`] = `
+
1
-
+
2
-
+
-
+
{{ t('content') }} {{ index }}
@@ -77,7 +87,7 @@ const beforeChange = (name: number) => {
-
+
{{ t('content') }} {{ index }}
@@ -85,7 +95,7 @@ const beforeChange = (name: number) => {
-
+
{
-
+
{{ t('content') }} {{ index }}
@@ -106,7 +116,7 @@ const beforeChange = (name: number) => {
-
+
{{ t('content') }} {{ index }}
@@ -114,7 +124,7 @@ const beforeChange = (name: number) => {
-
+
{{ t('content') }} {{ index }}
@@ -122,7 +132,7 @@ const beforeChange = (name: number) => {
-
+
-
+
{{ t('content') }} {{ index }}
@@ -139,7 +149,7 @@ const beforeChange = (name: number) => {
-
+
{{ t('content') }} {{ index }}
@@ -147,7 +157,7 @@ const beforeChange = (name: number) => {
-
+
{{ t('content') }} {{ index }}
@@ -155,7 +165,7 @@ const beforeChange = (name: number) => {
-
+
{{ t('content') }} {{ index }}
diff --git a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
index fae82d0b4..e464e9ebd 100644
--- a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
@@ -8,8 +8,8 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tabs__nav van-tabs__nav--line"
>
3
-
+
diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md
index 989e19165..b933ecdfc 100644
--- a/packages/vant/src/tab/README.md
+++ b/packages/vant/src/tab/README.md
@@ -36,7 +36,7 @@ import { ref } from 'vue';
export default {
setup() {
- const active = ref(2);
+ const active = ref(0);
return { active };
},
};
diff --git a/packages/vant/src/tab/README.zh-CN.md b/packages/vant/src/tab/README.zh-CN.md
index ce901ae90..26afb112d 100644
--- a/packages/vant/src/tab/README.zh-CN.md
+++ b/packages/vant/src/tab/README.zh-CN.md
@@ -37,7 +37,7 @@ import { ref } from 'vue';
export default {
setup() {
- const active = ref(2);
+ const active = ref(0);
return { active };
},
};
diff --git a/packages/vant/src/tab/demo/index.vue b/packages/vant/src/tab/demo/index.vue
index 9169569b6..666ff5437 100644
--- a/packages/vant/src/tab/demo/index.vue
+++ b/packages/vant/src/tab/demo/index.vue
@@ -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) => {
4
Tab 1
@@ -24,8 +24,8 @@ exports[`should render demo and match snapshot 1`] = `
Tab 3
@@ -40,27 +40,27 @@ exports[`should render demo and match snapshot 1`] = `
-
-
@@ -197,7 +197,7 @@ exports[`should render demo and match snapshot 1`] = `
- content of tab 3
+ content of tab 1
+
+
+
Tab 1
@@ -423,8 +423,8 @@ exports[`should render demo and match snapshot 1`] = `
Tab 3
@@ -439,7 +439,7 @@ exports[`should render demo and match snapshot 1`] = `
-
-
@@ -557,19 +557,20 @@ exports[`should render demo and match snapshot 1`] = `
- content of tab 3
+ content of tab 1
+
+
+
-
diff --git a/packages/vant/src/tab/test/__snapshots__/index.legacy.js.snap b/packages/vant/src/tab/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index 8558070bd..000000000
--- a/packages/vant/src/tab/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,368 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`badge prop 1`] = `
-
@@ -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
+
+
`;
+
+exports[`should emit rendered event after tab is rendered 1`] = `
+DOMWrapper {
+ "isDisabled": [Function],
+ "style": CSSStyleDeclaration {
+ "_importants": Object {},
+ "_length": 0,
+ "_onChange": [Function],
+ "_values": Object {},
+ },
+ "wrapperElement":
@@ -88,7 +88,7 @@ exports[`should render correctly after inserting a tab 1`] = `
content of tab 1
@@ -578,6 +579,7 @@ exports[`should render demo and match snapshot 1`] = `
-
-
@@ -841,7 +849,7 @@ exports[`should render demo and match snapshot 1`] = `
-
-`;
-
-exports[`border props 1`] = `
-
-
-
-
-
-
-
- 10
-
-
-Text
-
-
-`;
-
-exports[`change tabs data 1`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`change tabs data 2`] = `
-
-
-
-
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
-
-
-
-
-`;
-
-exports[`click to switch tab 1`] = `
-
-
-
-
- title1
- title2
- title3
-
-
-Text
-
-
-
-
-`;
-
-exports[`click to switch tab 2`] = `
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
-
-
-
-
-`;
-
-exports[`dot prop 1`] = `
-
-
-
-
- title1
- title2
- title3
-
-
-
-
-Text
-
-
-
-`;
-
-exports[`badge prop 1`] = `
-
-
-
-
-
-
-
-
-
-
-Text
-
-
-`;
-
-exports[`lazy render 1`] = `
-
-
-
-
-
-
-
- 10
-
-
-Text
-
-
-`;
-
-exports[`lazy render 2`] = `
-
-
-
-
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
-
-
-
-
-`;
-
-exports[`name prop 1`] = `
-
-
-
-
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
-
-
-
-
-`;
-
-exports[`render empty tab 1`] = `
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
-
-
-
-
-`;
-
-exports[`render nav-left & nav-right slot 1`] = `
-
-
-
-
- title1
- title2
-
-
-
-
-
-
-
-`;
-
-exports[`rendered event 1`] = `
-
-
-
-
-
- Nav Left
- title1
- title2
- title3
- Nav Right
-
-
-Text
-
-
- Text
`;
-
-exports[`scrollspy prop 1`] = `
-
-
-`;
-
-exports[`scrollspy prop 2`] = `
-
-
-
-
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
- Text
- Text
-
-
-`;
-
-exports[`swipe to switch tab 1`] = `
-
-
-
-
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
- Text
- Text
-
-
-`;
-
-exports[`swipe to switch tab 2`] = `
-
-
-
-
- title1
- title2
- title3
-
-
-
-Text
-
-
-
-
-`;
-
-exports[`swipe to switch tab 3`] = `
-
-
-
-
- title1
- title2
- title3
-
-
-
-
-Text
-
-
-
-`;
diff --git a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
index 6c5a6c868..c2cf71c17 100644
--- a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
@@ -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`] = `
+
-
-
-
- title1
- title2
- title3
-
-
-
-
-Text
-
-
+
+
+
+`;
+
+exports[`should allow to disable lazy-render prop 2`] = `
+
+
+`;
+
+exports[`should allow to set name prop 1`] = `
+ Text
+
+
+
-
-
-
-
+
+ title1
+
- 0
-
-
-
+
-
-
-
+
+ title2
+
+
+
+ title3
+
+
+ Text
+
+
,
+}
+`;
+
+exports[`should not render empty tab 1`] = `
+
+
+`;
+
+exports[`should render badge prop correctly 1`] = `
+
+
+`;
+
+exports[`should render nav-left、nav-right slot correctly 1`] = `
+
+
+
+
+
+ 10
+
+
+
+`;
+
+exports[`should switch tab after click the tab title 1`] = `
+
+ Custom nav left
+
+
+
+ Title
+
+
+
+
+ Custom nav right
+
+
+`;
+
+exports[`should switch tab after click the tab title 2`] = `
+
+
+
+
+
+
+ title1
+
+
+
+
+ title2
+
+
+
+
+ title3
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+`;
+
+exports[`swipe switch tab after swiping tab content 1`] = `
+
+
+
+
+
+
+ title1
+
+
+
+
+ title2
+
+
+
+
+ title3
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+`;
+
+exports[`swipe switch tab after swiping tab content 2`] = `
+
+
+
+
+
+
+ title1
+
+
+
+
+ title2
+
+
+
+
+ title3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+`;
+
+exports[`swipe switch tab after swiping tab content 3`] = `
+
+
+
+
+
+
+ title1
+
+
+
+
+ title2
+
+
+
+
+ title3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+`;
diff --git a/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
index 7db9f17e9..5dfbc4c21 100644
--- a/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`should render Tab inside a component correctly 1`] = `
+
+
+
+
+
+ title1
+
+
+
+
+ title2
+
+
+
+
+ title3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+