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

Browse Source
This commit is contained in:
chenjiahan 2020-11-14 15:09:28 +08:00
parent 3093ee1d84
commit 83b467ff8d
4 changed files with 124 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/switch/test/__snapshots__/index.legacy.js.snap
View File

@ -1,13 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`inactive-color prop 1`] = `
<div role="switch" aria-checked="false" class="van-switch" style="background-color: black;">
<div class="van-switch__node"></div>
</div>
`;
exports[`size prop 1`] = `
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
<div class="van-switch__node"></div>
</div>
`;

13
src/switch/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should apply active color to loading icon 1`] = `
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: red;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
<!---->
</div>
`;
exports[`should apply inactive color to loading icon 1`] = `
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: black;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
<!---->
</div>
`;

91
src/switch/test/index.legacy.js
View File

@ -1,91 +0,0 @@
import Switch from '..';
import { mount } from '@vue/test-utils';
test('emit event', () => {
const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
listeners: {
input,
change,
},
});
wrapper.trigger('click');
expect(input).toHaveBeenCalledWith(true);
expect(change).toHaveBeenCalledWith(true);
});
test('disabled', () => {
const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
listeners: {
input,
change,
},
props: {
disabled: true,
},
});
wrapper.trigger('click');
expect(input).toHaveBeenCalledTimes(0);
expect(change).toHaveBeenCalledTimes(0);
});
test('active-value & inactive-value prop', () => {
const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
props: {
value: '1',
activeValue: '1',
inactiveValue: '2',
},
listeners: {
input,
change,
},
});
wrapper.trigger('click');
expect(input).toHaveBeenCalledWith('2');
expect(change).toHaveBeenCalledWith('2');
});
test('inactive-color prop', () => {
const wrapper = mount(Switch, {
props: {
value: '2',
inactiveValue: '2',
inactiveColor: 'black',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('size prop', () => {
const wrapper = mount(Switch, {
props: {
size: 20,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('click event', () => {
const click = jest.fn();
const wrapper = mount(Switch, {
listeners: {
click,
},
});
wrapper.trigger('click');
expect(click).toHaveBeenCalledTimes(1);
});

111
src/switch/test/index.spec.js Normal file
View File

@ -0,0 +1,111 @@
import Switch from '..';
import { mount } from '@vue/test-utils';
test('should emit update:modelValue event when click the switch button', async () => {
const wrapper = mount(Switch);
wrapper.trigger('click');
expect(wrapper.emitted('update:modelValue').length).toEqual(1);
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(true);
await wrapper.setProps({ modelValue: true });
wrapper.trigger('click');
expect(wrapper.emitted('update:modelValue').length).toEqual(2);
expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(false);
});
test('should emit change event when click the switch button', async () => {
const wrapper = mount(Switch);
wrapper.trigger('click');
expect(wrapper.emitted('change').length).toEqual(1);
expect(wrapper.emitted('change')[0][0]).toEqual(true);
await wrapper.setProps({ modelValue: true });
wrapper.trigger('click');
expect(wrapper.emitted('change').length).toEqual(2);
expect(wrapper.emitted('change')[1][0]).toEqual(false);
});
test('should not emit change event or update:modelValue event if disabled', async () => {
const wrapper = mount(Switch, {
props: {
disabled: true,
},
});
wrapper.trigger('click');
expect(wrapper.emitted('change')).toBeFalsy();
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
});
test('should change active color when using active-color prop', () => {
const wrapper = mount(Switch, {
props: {
modelValue: true,
activeColor: 'black',
},
});
expect(wrapper.element.style.backgroundColor).toEqual('black');
});
test('should change inactive color when using inactive-color prop', () => {
const wrapper = mount(Switch, {
props: {
inactiveColor: 'black',
},
});
expect(wrapper.element.style.backgroundColor).toEqual('black');
});
test('should apply active color to loading icon', () => {
const wrapper = mount(Switch, {
props: {
loading: true,
modelValue: true,
activeColor: 'red',
},
});
const loading = wrapper.find('.van-switch__loading');
expect(loading.html()).toMatchSnapshot();
});
test('should apply inactive color to loading icon', () => {
const wrapper = mount(Switch, {
props: {
loading: true,
inactiveColor: 'black',
},
});
const loading = wrapper.find('.van-switch__loading');
expect(loading.html()).toMatchSnapshot();
});
test('should change size when using size prop', () => {
const wrapper = mount(Switch, {
props: {
size: 20,
},
});
expect(wrapper.element.style.fontSize).toEqual('20px');
});
test('should allow to custom active-value and inactive-value', () => {
const wrapper = mount(Switch, {
props: {
modelValue: 'on',
activeValue: 'on',
inactiveValue: 'off',
},
});
expect(wrapper.find('.van-switch--on').exists()).toBeTruthy();
wrapper.trigger('click');
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('off');
});