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(Tabbar): update test cases

Browse Source
This commit is contained in:
chenjiahan 2021-01-02 13:13:53 +08:00
parent 474a27038c
commit 477e9f2e02
4 changed files with 182 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/tabbar/test/__snapshots__/index.legacy.js.snap
View File

@ -1,179 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`disable border 1`] = `<div class="van-tabbar van-tabbar--fixed"></div>`;
exports[`placeholder prop 1`] = `
<div class="van-tabbar__placeholder" style="height: 50px;">
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed"></div>
</div>
`;
exports[`route mode 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
</div>
`;
exports[`route mode 2`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
</div>
`;
exports[`route mode 3`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
</div>
`;
exports[`route mode match by name 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
</div>
`;
exports[`route mode match by name 2`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">
Tab
</div>
</div>
</div>
`;
exports[`watch tabbar value 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">Tab</div>
</div>
<div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon">
<!---->
</div>
<div class="van-tabbar-item__text">Tab</div>
</div>
</div>
`;

10
src/tabbar/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render placeholder element when using placeholder prop 1`] = `
<div class="van-tabbar__placeholder"
style="height: 50px;"
>
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
</div>
</div>
`;

188
src/tabbar/test/index.legacy.js
View File

@ -1,188 +0,0 @@
import VueRouter from 'vue-router';
import { mount, later, mockGetBoundingClientRect } from '../../../test';
import Vue from 'vue';
import Tabbar from '..';
Vue.use(VueRouter);
test('route mode', async () => {
const router = new VueRouter();
const wrapper = mount({
router,
template: `
<van-tabbar route>
<van-tabbar-item replace to="/">
Tab
</van-tabbar-item>
<van-tabbar-item replace to="/search">
Tab
</van-tabbar-item>
<van-tabbar-item replace :to="{ path: '/star' }">
Tab
</van-tabbar-item>
<van-tabbar-item>
Tab
</van-tabbar-item>
</van-tabbar>
`,
});
expect(wrapper.html()).toMatchSnapshot();
const items = wrapper.findAll('.van-tabbar-item');
items.at(1).trigger('click');
await later();
expect(wrapper.html()).toMatchSnapshot();
items.at(2).trigger('click');
items.at(3).trigger('click');
await later();
expect(wrapper.html()).toMatchSnapshot();
});
test('route mode match by name', async () => {
const Foo = { render: () => 'Foo' };
const Bar = { render: () => 'Bar' };
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo, name: 'foo' },
{ path: '/bar', component: Bar, name: 'bar' },
],
});
const wrapper = mount({
router,
template: `
<van-tabbar route>
<van-tabbar-item :to="{ name: 'foo' }">
Tab
</van-tabbar-item>
<van-tabbar-item :to="{ name: 'bar' }">
Tab
</van-tabbar-item>
</van-tabbar>
`,
});
const items = wrapper.findAll('.van-tabbar-item');
items.at(0).trigger('click');
await later();
expect(wrapper.html()).toMatchSnapshot();
items.at(1).trigger('click');
await later();
expect(wrapper.html()).toMatchSnapshot();
});
test('router NavigationDuplicated', async (done) => {
expect(async () => {
const router = new VueRouter();
const wrapper = mount({
router,
template: `
<van-tabbar route>
<van-tabbar-item replace to="/home">
Tab
</van-tabbar-item>
</van-tabbar>
`,
});
const item = wrapper.find('.van-tabbar-item');
item.trigger('click');
item.trigger('click');
await later();
done();
}).not.toThrow();
});
test('watch tabbar value', () => {
const wrapper = mount({
template: `
<van-tabbar :value="value">
<van-tabbar-item>Tab</van-tabbar-item>
<van-tabbar-item>Tab</van-tabbar-item>
</van-tabbar>
`,
data() {
return {
value: 0,
};
},
});
wrapper.setData({ value: 1 });
expect(wrapper.html()).toMatchSnapshot();
});
test('click event', () => {
const onClick = jest.fn();
const onChange = jest.fn();
const wrapper = mount({
template: `
<van-tabbar @change="onChange">
<van-tabbar-item @click="onClick">Tab</van-tabbar-item>
</van-tabbar>
`,
methods: {
onClick,
onChange,
},
});
wrapper.find('.van-tabbar-item').trigger('click');
expect(onClick).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledTimes(0);
});
test('name prop', () => {
const onChange = jest.fn();
const wrapper = mount({
template: `
<van-tabbar :value="value" @change="onChange">
<van-tabbar-item name="a">Tab</van-tabbar-item>
<van-tabbar-item name="b">Tab</van-tabbar-item>
</van-tabbar>
`,
data() {
return {
value: 'a',
};
},
methods: {
onChange,
},
});
wrapper.findAll('.van-tabbar-item').at(1).trigger('click');
expect(onChange).toHaveBeenCalledWith('b');
});
test('disable border', () => {
const wrapper = mount(Tabbar, {
props: {
border: false,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('placeholder prop', () => {
const restore = mockGetBoundingClientRect({ height: 50 });
const wrapper = mount(Tabbar, {
props: {
fixed: true,
placeholder: true,
},
});
expect(wrapper.html()).toMatchSnapshot();
restore();
});

172
src/tabbar/test/index.spec.js Normal file
View File

@ -0,0 +1,172 @@
import { nextTick, reactive, ref } from 'vue';
import { mount, later, mockGetBoundingClientRect } from '../../../test';
import Tabbar from '..';
import TabbarItem from '../../tabbar-item';
const activeClass = 'van-tabbar-item--active';
function getMockRouter() {
const $route = reactive({
name: '/',
path: '/',
});
const push = (val) => {
if (typeof val === 'string') {
$route.name = val;
$route.path = val;
} else {
Object.assign($route, val);
}
};
const $router = {
push,
replace: push,
};
return {
$route,
$router,
};
}
test('should match active tab by route path in route mode', async () => {
const wrapper = mount(
{
render: () => (
<Tabbar route>
<TabbarItem replace to="/">
Tab
</TabbarItem>
<TabbarItem replace to="/search">
Tab
</TabbarItem>
<TabbarItem replace to={{ path: '/star' }}>
Tab
</TabbarItem>
<TabbarItem>Tab</TabbarItem>
</Tabbar>
),
},
{
global: {
mocks: getMockRouter(),
},
}
);
const items = wrapper.findAll('.van-tabbar-item');
expect(items[0].element.classList.contains(activeClass)).toBeTruthy();
await items[1].trigger('click');
expect(items[1].element.classList.contains(activeClass)).toBeTruthy();
await items[2].trigger('click');
expect(items[2].element.classList.contains(activeClass)).toBeTruthy();
await items[3].trigger('click');
expect(items[2].element.classList.contains(activeClass)).toBeTruthy();
});
test('should match active tab by route name in route mode', async () => {
const wrapper = mount(
{
render: () => (
<Tabbar route>
<TabbarItem to={{ name: 'foo' }}>Tab</TabbarItem>
<TabbarItem to={{ name: 'bar' }}>Tab</TabbarItem>
</Tabbar>
),
},
{
global: {
mocks: getMockRouter(),
},
}
);
const items = wrapper.findAll('.van-tabbar-item');
await items[0].trigger('click');
expect(items[0].element.classList.contains(activeClass)).toBeTruthy();
await items[1].trigger('click');
expect(items[1].element.classList.contains(activeClass)).toBeTruthy();
});
test('should watch model-value and update active tab', async () => {
const wrapper = mount({
setup() {
const active = ref(0);
const updateActive = () => {
active.value = 1;
};
return {
active,
updateActive,
};
},
render() {
return (
<Tabbar modelValue={this.active}>
<TabbarItem>Tab</TabbarItem>
<TabbarItem>Tab</TabbarItem>
</Tabbar>
);
},
});
wrapper.vm.updateActive();
await nextTick();
const items = wrapper.findAll('.van-tabbar-item');
expect(items[1].element.classList.contains(activeClass)).toBeTruthy();
});
test('should match active tab by name when using name prop', () => {
const onChange = jest.fn();
const wrapper = mount({
setup() {
const active = ref('a');
return {
active,
};
},
render() {
return (
<Tabbar modelValue={this.active} onChange={onChange}>
<TabbarItem name="a">Tab</TabbarItem>
<TabbarItem name="b">Tab</TabbarItem>
</Tabbar>
);
},
});
wrapper.findAll('.van-tabbar-item')[1].trigger('click');
expect(onChange).toHaveBeenCalledWith('b');
});
test('should not render border when border prop is false', () => {
const wrapper = mount(Tabbar, {
props: {
border: false,
},
});
expect(
wrapper.element.classList.contains('van-hairline--top-bottom')
).toBeFalsy();
});
test('should render placeholder element when using placeholder prop', async () => {
const restore = mockGetBoundingClientRect({ height: 50 });
const wrapper = mount(Tabbar, {
props: {
fixed: true,
placeholder: true,
},
});
await later();
expect(wrapper.html()).toMatchSnapshot();
restore();
});