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

Browse Source
This commit is contained in:
chenjiahan 2020-11-08 20:12:52 +08:00
parent fffb9b3d5d
commit f6db213aa4
4 changed files with 103 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/button/test/__snapshots__/index.legacy.js.snap
View File

@ -1,29 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`icon-position prop 1`] = `
<button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
<!----></i></div>
</button>
`;
exports[`icon-prefix prop 1`] = `
<button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">
<!----></i></div>
</button>
`;
exports[`loading slot 1`] = `
<button class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-button__content">Custom Loading</div>
</button>
`;
exports[`loading-size prop 1`] = `
<button class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</button>
`;

30
src/button/test/__snapshots__/index.spec.js.snap
View File

@ -1,11 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`loading-size prop 1`] = `
<button type="button" class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
exports[`should change icon class prefix when using icon-prefix prop 1`] = `
<button type="button" class="van-button van-button--default van-button--normal">
<div class="van-button__content"><i class="van-badge__wrapper my-icon my-icon-success van-button__icon">
<!---->
</div>
<!---->
<!----></i>
<!---->
<!---->
</div>
</button>
`;
exports[`should render icon in the right side when setting icon-position to right 1`] = `
<button type="button" class="van-button van-button--default van-button--normal">
<div class="van-button__content">
<!---->
<!----><i class="van-badge__wrapper van-icon van-icon-plus van-button__icon">
<!---->
<!---->
<!----></i></div>
</button>
`;
exports[`should render loading slot and match snapshot 1`] = `
<button type="button" class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-button__content">Custom Loading
<!---->
<!---->
</div>

118
src/button/test/index.legacy.js
View File

@ -1,118 +0,0 @@
import { mount } from '../../../test';
import Button from '..';
test('loading-size prop', () => {
const wrapper = mount(Button, {
propsData: {
loading: true,
loadingSize: '10px',
},
});
expect(wrapper).toMatchSnapshot();
});
test('icon-position prop', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'plus',
iconPosition: 'right',
},
});
expect(wrapper).toMatchSnapshot();
});
test('click event', () => {
const onClick = jest.fn();
const wrapper = mount(Button, {
context: {
on: {
click: onClick,
},
},
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalled();
});
test('not trigger click event when disabled', () => {
const onClick = jest.fn();
const wrapper = mount(Button, {
propsData: {
disabled: true,
},
context: {
on: {
click: onClick,
},
},
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalledTimes(0);
});
test('not trigger click event when loading', () => {
const onClick = jest.fn();
const wrapper = mount(Button, {
propsData: {
loading: true,
},
context: {
on: {
click: onClick,
},
},
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalledTimes(0);
});
test('touchstart event', () => {
const onTouchstart = jest.fn();
const wrapper = mount(Button, {
context: {
on: {
touchstart: onTouchstart,
},
},
});
wrapper.trigger('touchstart');
expect(onTouchstart).toHaveBeenCalled();
});
test('hide border when color is gradient', () => {
const wrapper = mount(Button, {
propsData: {
color: 'linear-gradient(#000, #fff)',
},
});
expect(wrapper.element.style.border).toEqual('0px');
});
test('icon-prefix prop', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'success',
iconPrefix: 'my-icon',
},
});
expect(wrapper).toMatchSnapshot();
});
test('loading slot', () => {
const wrapper = mount(Button, {
propsData: {
loading: true,
},
scopedSlots: {
loading: () => 'Custom Loading',
},
});
expect(wrapper).toMatchSnapshot();
});

80
src/button/test/index.spec.js
View File

@ -1,12 +1,88 @@
import { mount } from '../../../test';
import { mount } from '@vue/test-utils';
import Button from '..';
test('loading-size prop', () => {
test('should emit click event', () => {
const wrapper = mount(Button);
wrapper.trigger('click');
expect(wrapper.emitted('click').length).toEqual(1);
});
test('should not emit click event when disabled', () => {
const wrapper = mount(Button, {
propsData: {
disabled: true,
},
});
wrapper.trigger('click');
expect(wrapper.emitted('click')).toBeFalsy();
});
test('should not emit click event when loading', () => {
const wrapper = mount(Button, {
propsData: {
loading: true,
},
});
wrapper.trigger('click');
expect(wrapper.emitted('click')).toBeFalsy();
});
test('should hide border when color is gradient', () => {
const wrapper = mount(Button, {
propsData: {
color: 'linear-gradient(#000, #fff)',
},
});
expect(wrapper.element.style.border).toEqual('0px');
});
test('should change icon class prefix when using icon-prefix prop', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'success',
iconPrefix: 'my-icon',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render loading slot and match snapshot', () => {
const wrapper = mount(Button, {
propsData: {
loading: true,
},
slots: {
loading: () => 'Custom Loading',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render loading of a specific size when using loading-size prop', () => {
const wrapper = mount(Button, {
propsData: {
loading: true,
loadingSize: '10px',
},
});
const loading = wrapper.find('.van-loading__spinner').element;
expect(loading.style.width).toEqual('10px');
expect(loading.style.height).toEqual('10px');
});
test('should render icon in the right side when setting icon-position to right', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'plus',
iconPosition: 'right',
},
});
expect(wrapper.html()).toMatchSnapshot();
});