mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 06:31:45 +08:00
test(Checkbox): update test cases
This commit is contained in:
chenjiahan
parent
f8234a5b5f
commit
999bdccdbb
@ -1,41 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`checked-color prop 1`] = `
|
|
||||||
<div class="van-checkbox-group">
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: black; background-color: black;">
|
|
||||||
<!----></i></div><span class="van-checkbox__label">label</span>
|
|
||||||
</div>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: white; background-color: white;">
|
|
||||||
<!----></i></div><span class="van-checkbox__label">label</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`icon-size prop 1`] = `
|
|
||||||
<div class="van-checkbox-group">
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round" style="font-size: 10rem;"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div><span class="van-checkbox__label">label</span>
|
|
||||||
</div>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round" style="font-size: 5rem;"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div><span class="van-checkbox__label">label</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`label disabled 1`] = `
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox van-checkbox--label-disabled">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div><span class="van-checkbox__label">Label</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`label-position prop 1`] = `
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox"><span class="van-checkbox__label van-checkbox__label--left">Label</span>
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
16
src/checkbox/test/__snapshots__/index.spec.js.snap
Normal file
16
src/checkbox/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should adjust label position when using label-position prop 1`] = `
|
||||||
|
<div role="checkbox"
|
||||||
|
class="van-checkbox"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span class="van-checkbox__label van-checkbox__label--left">
|
||||||
|
Label
|
||||||
|
</span>
|
||||||
|
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,197 +0,0 @@
|
|||||||
import Checkbox from '..';
|
|
||||||
import { mount, later } from '../../../test';
|
|
||||||
|
|
||||||
test('switch checkbox', async () => {
|
|
||||||
const wrapper = mount(Checkbox);
|
|
||||||
|
|
||||||
wrapper.vm.$on('input', (value) => {
|
|
||||||
wrapper.setData({ value });
|
|
||||||
});
|
|
||||||
|
|
||||||
const icon = wrapper.find('.van-checkbox__icon');
|
|
||||||
icon.trigger('click');
|
|
||||||
await later();
|
|
||||||
icon.trigger('click');
|
|
||||||
await later();
|
|
||||||
expect(wrapper.emitted('input')).toEqual([[true], [false]]);
|
|
||||||
expect(wrapper.emitted('change')).toEqual([[true], [false]]);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disabled', () => {
|
|
||||||
const wrapper = mount(Checkbox, {
|
|
||||||
props: {
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('.van-checkbox__icon').trigger('click');
|
|
||||||
expect(wrapper.emitted('input')).toBeFalsy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('label disabled', () => {
|
|
||||||
const wrapper = mount(Checkbox, {
|
|
||||||
slots: {
|
|
||||||
default: () => 'Label',
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
labelDisabled: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('.van-checkbox__label').trigger('click');
|
|
||||||
expect(wrapper.emitted('input')).toBeFalsy();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('checkbox group', async () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-checkbox-group v-model="result" :max="2">
|
|
||||||
<van-checkbox name="a" />
|
|
||||||
<van-checkbox name="b" />
|
|
||||||
<van-checkbox name="c" />
|
|
||||||
</van-checkbox-group>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
result: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const icons = wrapper.findAll('.van-checkbox__icon');
|
|
||||||
icons.at(0).trigger('click');
|
|
||||||
await later();
|
|
||||||
icons.at(1).trigger('click');
|
|
||||||
await later();
|
|
||||||
icons.at(2).trigger('click');
|
|
||||||
expect(wrapper.vm.result).toEqual(['a', 'b']);
|
|
||||||
|
|
||||||
await later();
|
|
||||||
icons.at(0).trigger('click');
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual(['b']);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click event', async () => {
|
|
||||||
const onClick = jest.fn();
|
|
||||||
const wrapper = mount(Checkbox, {
|
|
||||||
listeners: {
|
|
||||||
click: onClick,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.trigger('click');
|
|
||||||
await later();
|
|
||||||
expect(onClick).toHaveBeenCalledTimes(1);
|
|
||||||
|
|
||||||
const icon = wrapper.find('.van-checkbox__icon');
|
|
||||||
icon.trigger('click');
|
|
||||||
await later();
|
|
||||||
expect(onClick).toHaveBeenCalledTimes(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('label-position prop', () => {
|
|
||||||
const wrapper = mount(Checkbox, {
|
|
||||||
slots: {
|
|
||||||
default: () => 'Label',
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
labelPosition: 'left',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('icon-size prop', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-checkbox-group icon-size="10rem">
|
|
||||||
<van-checkbox>label</van-checkbox>
|
|
||||||
<van-checkbox icon-size="5rem">label</van-checkbox>
|
|
||||||
</van-checkbox-group>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('checked-color prop', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-checkbox-group :value="['a', 'b']" checked-color="black">
|
|
||||||
<van-checkbox name="a" :value="true">label</van-checkbox>
|
|
||||||
<van-checkbox name="b" :value="true" checked-color="white">label</van-checkbox>
|
|
||||||
</van-checkbox-group>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('bind-group prop', async () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-checkbox-group v-model="result">
|
|
||||||
<van-checkbox v-model="value" :bind-group="false" />
|
|
||||||
<van-checkbox v-for="item in list" :key="item" :name="item"></van-checkbox>
|
|
||||||
</van-checkbox-group>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: false,
|
|
||||||
result: [],
|
|
||||||
list: ['a', 'b', 'c'],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const icons = wrapper.findAll('.van-checkbox__icon');
|
|
||||||
icons.at(0).trigger('click');
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual([]);
|
|
||||||
expect(wrapper.vm.value).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('toggleAll method', async () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-checkbox-group v-model="result" ref="group">
|
|
||||||
<van-checkbox name="a" />
|
|
||||||
<van-checkbox name="b" />
|
|
||||||
<van-checkbox name="c" disabled />
|
|
||||||
</van-checkbox-group>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
result: ['a'],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleAll(checked) {
|
|
||||||
this.$refs.group.toggleAll(checked);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.vm.toggleAll();
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual(['b', 'c']);
|
|
||||||
|
|
||||||
wrapper.vm.toggleAll(false);
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual([]);
|
|
||||||
|
|
||||||
wrapper.vm.toggleAll(true);
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
|
|
||||||
|
|
||||||
wrapper.vm.toggleAll({ skipDisabled: true });
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual(['c']);
|
|
||||||
|
|
||||||
wrapper.vm.toggleAll({ checked: true, skipDisabled: true });
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
|
|
||||||
});
|
|
||||||
109
src/checkbox/test/index.spec.js
Normal file
109
src/checkbox/test/index.spec.js
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
import Checkbox from '..';
|
||||||
|
import { mount } from '../../../test';
|
||||||
|
|
||||||
|
test('should emit "update:modelValue" event when checkbox icon is clicked', async () => {
|
||||||
|
const wrapper = mount(Checkbox);
|
||||||
|
|
||||||
|
const icon = wrapper.find('.van-checkbox__icon');
|
||||||
|
icon.trigger('click');
|
||||||
|
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(true);
|
||||||
|
|
||||||
|
await wrapper.setProps({ modelValue: true });
|
||||||
|
icon.trigger('click');
|
||||||
|
expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit change event when modelValue is changed', async () => {
|
||||||
|
const wrapper = mount(Checkbox);
|
||||||
|
|
||||||
|
const icon = wrapper.find('.van-checkbox__icon');
|
||||||
|
icon.trigger('click');
|
||||||
|
await wrapper.setProps({ modelValue: true });
|
||||||
|
expect(wrapper.emitted('change')[0][0]).toEqual(true);
|
||||||
|
|
||||||
|
icon.trigger('click');
|
||||||
|
await wrapper.setProps({ modelValue: false });
|
||||||
|
expect(wrapper.emitted('change')[1][0]).toEqual(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit "update:modelValue" event when checkbox icon is disabled and clicked', () => {
|
||||||
|
const wrapper = mount(Checkbox, {
|
||||||
|
props: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.find('.van-checkbox__icon').trigger('click');
|
||||||
|
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render "van-checkbox--label-disabled" class when using label-disabled prop', () => {
|
||||||
|
const wrapper = mount(Checkbox, {
|
||||||
|
props: {
|
||||||
|
labelDisabled: true,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
default: () => 'Label',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(
|
||||||
|
wrapper.element.classList.contains('van-checkbox--label-disabled')
|
||||||
|
).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit "update:modelValue" event when label is clicked', () => {
|
||||||
|
const wrapper = mount(Checkbox, {
|
||||||
|
slots: {
|
||||||
|
default: () => 'Label',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const icon = wrapper.find('.van-checkbox__label');
|
||||||
|
icon.trigger('click');
|
||||||
|
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit "update:modelValue" event when label is disabled and clicked', () => {
|
||||||
|
const wrapper = mount(Checkbox, {
|
||||||
|
props: {
|
||||||
|
labelDisabled: true,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
default: () => 'Label',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const icon = wrapper.find('.van-checkbox__label');
|
||||||
|
icon.trigger('click');
|
||||||
|
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should adjust label position when using label-position prop', () => {
|
||||||
|
const wrapper = mount(Checkbox, {
|
||||||
|
props: {
|
||||||
|
labelPosition: 'left',
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
default: () => 'Label',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit click event when checkbox icon is clicked', async () => {
|
||||||
|
const onClick = jest.fn();
|
||||||
|
const wrapper = mount(Checkbox, {
|
||||||
|
props: {
|
||||||
|
onClick,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.trigger('click');
|
||||||
|
expect(onClick).toHaveBeenCalledTimes(1);
|
||||||
|
|
||||||
|
const icon = wrapper.find('.van-checkbox__icon');
|
||||||
|
icon.trigger('click');
|
||||||
|
expect(onClick).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user