From dd7583e23f6209761a4bbdadefda1137ed3a6377 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 9 Jan 2021 15:38:03 +0800
Subject: [PATCH] test(Tab): update test cases
---
.../test/__snapshots__/insert.legacy.js.snap | 63 -------
.../test/__snapshots__/insert.spec.js.snap | 162 ++++++++++++++++++
src/tab/test/insert.legacy.js | 75 --------
src/tab/test/insert.spec.js | 85 +++++++++
4 files changed, 247 insertions(+), 138 deletions(-)
delete mode 100644 src/tab/test/__snapshots__/insert.legacy.js.snap
create mode 100644 src/tab/test/__snapshots__/insert.spec.js.snap
delete mode 100644 src/tab/test/insert.legacy.js
create mode 100644 src/tab/test/insert.spec.js
diff --git a/src/tab/test/__snapshots__/insert.legacy.js.snap b/src/tab/test/__snapshots__/insert.legacy.js.snap
deleted file mode 100644
index bd82b97fe..000000000
--- a/src/tab/test/__snapshots__/insert.legacy.js.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`insert tab dynamically 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"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
- <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
- <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</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;">
- <!---->
- </div>
- <div>
- <div role="tabpanel" class="van-tab__pane">2</div>
- </div>
- <div role="tabpanel" class="van-tab__pane" style="display: none;">3</div>
- </div>
-</div>
-`;
-
-exports[`insert tab with child component 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">1</span></div>
- <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
- <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</span></div>
- <div class="van-tabs__line"></div>
- </div>
- </div>
- <div class="van-tabs__content">
- <div role="tabpanel" class="van-tab__pane">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>
-</div>
-`;
-
-exports[`insert tab with name dynamically 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"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
- <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</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;">
- <!---->
- </div>
- <div role="tabpanel" class="van-tab__pane" style="">1</div>
- </div>
-</div>
-`;
diff --git a/src/tab/test/__snapshots__/insert.spec.js.snap b/src/tab/test/__snapshots__/insert.spec.js.snap
new file mode 100644
index 000000000..1fe777803
--- /dev/null
+++ b/src/tab/test/__snapshots__/insert.spec.js.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render Tab inside a component correctly 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"
+ aria-selected="false"
+ >
+ <span class="van-tab__text van-tab__text--ellipsis">
+ 2
+ </span>
+ </div>
+ <div role="tab"
+ class="van-tab van-tab--active"
+ aria-selected="true"
+ >
+ <span class="van-tab__text van-tab__text--ellipsis">
+ 1
+ </span>
+ </div>
+ <div role="tab"
+ class="van-tab"
+ aria-selected="false"
+ >
+ <span class="van-tab__text van-tab__text--ellipsis">
+ 3
+ </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
+ >
+ 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>
+</div>
+`;
+
+exports[`should render correctly after inserting a 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"
+ class="van-tab"
+ aria-selected="false"
+ >
+ <span class="van-tab__text van-tab__text--ellipsis">
+ 1
+ </span>
+ </div>
+ <div role="tab"
+ class="van-tab van-tab--active"
+ aria-selected="true"
+ >
+ <span class="van-tab__text van-tab__text--ellipsis">
+ 2
+ </span>
+ </div>
+ <div role="tab"
+ class="van-tab"
+ aria-selected="false"
+ >
+ <span class="van-tab__text van-tab__text--ellipsis">
+ 3
+ </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;"
+ >
+ </div>
+ <div>
+ <div role="tabpanel"
+ class="van-tab__pane"
+ >
+ 2
+ </div>
+ </div>
+ <div role="tabpanel"
+ class="van-tab__pane"
+ style="display: none;"
+ >
+ 3
+ </div>
+ </div>
+</div>
+`;
+
+exports[`should render correctly after inserting a tab with name 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">
+ bar
+ </span>
+ </div>
+ <div role="tab"
+ class="van-tab"
+ aria-selected="false"
+ >
+ <span class="van-tab__text van-tab__text--ellipsis">
+ foo
+ </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;"
+ >
+ bar
+ </div>
+ <div role="tabpanel"
+ class="van-tab__pane"
+ style
+ >
+ foo
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/tab/test/insert.legacy.js b/src/tab/test/insert.legacy.js
deleted file mode 100644
index 9ac0e07e3..000000000
--- a/src/tab/test/insert.legacy.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { mount, later } from '../../../test';
-
-// this case will throw wierd error in index.spec.js
-// so separate it
-test('insert tab dynamically', async () => {
- const wrapper = mount({
- template: `
- <van-tabs v-model="active">
- <van-tab title="1">1</van-tab>
- <div v-if="insert">
- <van-tab title="2">2</van-tab>
- </div>
- <van-tab title="3">3</van-tab>
- </van-tabs>
- `,
- data() {
- return {
- insert: false,
- active: 1,
- };
- },
- });
-
- await later();
- wrapper.setData({ insert: true });
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('insert tab with name dynamically', async () => {
- const onChange = jest.fn();
- const wrapper = mount({
- template: `
- <van-tabs v-model="active" @change="onChange">
- <van-tab v-if="insert" title="1" name="bar">2</van-tab>
- <van-tab title="2" name="foo">1</van-tab>
- </van-tabs>
- `,
- data() {
- return {
- insert: false,
- active: 'foo',
- };
- },
- methods: {
- onChange,
- },
- });
-
- await later();
- wrapper.setData({ insert: true });
- expect(wrapper.html()).toMatchSnapshot();
- expect(onChange).toHaveBeenCalledTimes(0);
-});
-
-// this case will throw wierd error in index.spec.js
-// so separate it
-test('insert tab with child component', async () => {
- const wrapper = mount({
- template: `
- <van-tabs v-model="active">
- <van-tab title="1">1</van-tab>
- <my-tab />
- <van-tab title="3">3</van-tab>
- </van-tabs>
- `,
- components: {
- 'my-tab': {
- template: `<van-tab title="2">2</van-tab>`,
- },
- },
- });
-
- await later();
- expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/tab/test/insert.spec.js b/src/tab/test/insert.spec.js
new file mode 100644
index 000000000..0254a37aa
--- /dev/null
+++ b/src/tab/test/insert.spec.js
@@ -0,0 +1,85 @@
+import { mount, later } from '../../../test';
+import Tab from '..';
+import Tabs from '../../tabs';
+
+test('should render correctly after inserting a tab', async () => {
+ const wrapper = mount({
+ render() {
+ return (
+ <Tabs v-model={[this.active, 'active']}>
+ <Tab title="1">1</Tab>
+ {this.insert && (
+ <div>
+ <Tab title="2">2</Tab>
+ </div>
+ )}
+ <Tab title="3">3</Tab>
+ </Tabs>
+ );
+ },
+ data() {
+ return {
+ insert: false,
+ active: 1,
+ };
+ },
+ });
+
+ await later();
+ await wrapper.setData({ insert: true });
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render correctly after inserting a tab with name', async () => {
+ const onChange = jest.fn();
+ const wrapper = mount({
+ render() {
+ return (
+ <Tabs v-model={[this.active, 'active']} onChange={onChange}>
+ {this.insert && (
+ <Tab title="bar" name="bar">
+ bar
+ </Tab>
+ )}
+ <Tab title="foo" name="foo">
+ foo
+ </Tab>
+ </Tabs>
+ );
+ },
+ data() {
+ return {
+ insert: false,
+ active: 'foo',
+ };
+ },
+ });
+
+ await later();
+ await wrapper.setData({ insert: true });
+ expect(wrapper.html()).toMatchSnapshot();
+ expect(onChange).toHaveBeenCalledTimes(0);
+});
+
+test('should render Tab inside a component correctly', async () => {
+ const MyTab = {
+ render() {
+ return <Tab title="2">2</Tab>;
+ },
+ };
+
+ const wrapper = mount({
+ render() {
+ return (
+ <Tabs active={1}>
+ <Tab title="1">1</Tab>
+ <MyTab />
+ <Tab title="3">3</Tab>
+ </Tabs>
+ );
+ },
+ });
+
+ await later();
+ expect(wrapper.html()).toMatchSnapshot();
+});