blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

test(Tab): update test cases

Browse Source
This commit is contained in:
chenjiahan 2021-01-09 15:38:03 +08:00
parent a9eff85979
commit dd7583e23f
4 changed files with 247 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/tab/test/__snapshots__/insert.legacy.js.snap
View File

@ -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>
`;

162
src/tab/test/__snapshots__/insert.spec.js.snap Normal file
View File

@ -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>
`;

75
src/tab/test/insert.legacy.js
View File

@ -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();
});

85
src/tab/test/insert.spec.js Normal file
View File

@ -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();
});