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