mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Tabbar): update test cases
This commit is contained in:
chenjiahan
parent
474a27038c
commit
477e9f2e02
@ -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
10
src/tabbar/test/__snapshots__/index.spec.js.snap
Normal 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>
|
||||
`;
|
||||
@ -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
172
src/tabbar/test/index.spec.js
Normal 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();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user