mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Radio): remove legacy and add some test cases (#8220)
This commit is contained in:
nemo-shen
GitHub
parent
70a598cf5a
commit
da68e1cda1
115
src/radio-group/test/index.spec.tsx
Normal file
115
src/radio-group/test/index.spec.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import { ref } from 'vue';
|
||||
import { mount } from '../../../test';
|
||||
import RadioGroup from '../index';
|
||||
import Radio from '../../radio';
|
||||
|
||||
test('should emit "update:modelValue" and "change" event when radio is clicked', async () => {
|
||||
const wrapper = mount({
|
||||
emits: ['change'],
|
||||
setup(props, { emit }) {
|
||||
return {
|
||||
result: ref('a'),
|
||||
list: ['a', 'b', 'c', 'd'],
|
||||
emit,
|
||||
change(value: string) {
|
||||
emit('change', value);
|
||||
},
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<RadioGroup
|
||||
onChange={(value) => this.emit('change', value)}
|
||||
v-model={this.result}
|
||||
>
|
||||
{this.list.map((item) => (
|
||||
<Radio key={item} name={item} disabled={item === 'd'}>
|
||||
{item}
|
||||
</Radio>
|
||||
))}
|
||||
</RadioGroup>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const icons = wrapper.findAll('.van-radio__icon');
|
||||
const labels = wrapper.findAll('.van-radio__label');
|
||||
|
||||
await icons[2].trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('c');
|
||||
expect(wrapper.emitted('change')[0]).toEqual(['c']);
|
||||
|
||||
await labels[1].trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('b');
|
||||
expect(wrapper.emitted('change')[1]).toEqual(['b']);
|
||||
|
||||
await icons[3].trigger('click');
|
||||
await labels[3].trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('b');
|
||||
});
|
||||
|
||||
test('should not emit "change" event when radio group is disabled and radio is clicked', async () => {
|
||||
const wrapper = mount({
|
||||
emits: ['change'],
|
||||
setup(props, { emit }) {
|
||||
return {
|
||||
result: ref('a'),
|
||||
list: ['a', 'b', 'c', 'd'],
|
||||
emit,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<RadioGroup
|
||||
v-model={this.result}
|
||||
disabled
|
||||
onChange={(value) => this.emit('change', value)}
|
||||
>
|
||||
{this.list.map((item) => (
|
||||
<Radio key={item} name={item}>
|
||||
label
|
||||
</Radio>
|
||||
))}
|
||||
</RadioGroup>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const icons = wrapper.findAll('.van-radio__icon');
|
||||
await icons[2].trigger('click');
|
||||
expect(wrapper.emitted('change')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should change icon size when using icon-size prop', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<RadioGroup iconSize="10rem">
|
||||
<Radio />
|
||||
<Radio iconSize="5rem" />
|
||||
</RadioGroup>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const icons = wrapper.findAll('.van-radio__icon');
|
||||
expect(icons[0].style.fontSize).toEqual('10rem');
|
||||
expect(icons[1].style.fontSize).toEqual('5rem');
|
||||
});
|
||||
|
||||
test('should change checked color when using checked-color prop', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<RadioGroup checkedColor="black">
|
||||
<Radio modelValue={true} />
|
||||
<Radio modelValue={true} checkedColor="white" />
|
||||
</RadioGroup>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const icons = wrapper.findAll('.van-icon');
|
||||
expect(icons[0].style.backgroundColor).toEqual('black');
|
||||
expect(icons[1].style.backgroundColor).toEqual('white');
|
||||
});
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`checked-color prop 1`] = `
|
||||
<div role="radiogroup" class="van-radio-group">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: black; background-color: black;">
|
||||
<!----></i></div><span class="van-radio__label">label</span>
|
||||
</div>
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: white; background-color: white;">
|
||||
<!----></i></div><span class="van-radio__label">label</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`icon-size prop 1`] = `
|
||||
<div role="radiogroup" class="van-radio-group">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 10rem;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">label</span>
|
||||
</div>
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 5rem;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">label</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,92 +0,0 @@
|
||||
import { mount } from '../../../test';
|
||||
|
||||
test('radio-group change', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-radio-group v-model="result" @change="$emit('change', $event)">
|
||||
<van-radio
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
:disabled="item === 'd'"
|
||||
>
|
||||
label
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
result: 'a',
|
||||
list: ['a', 'b', 'c', 'd'],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const icons = wrapper.findAll('.van-radio__icon');
|
||||
const labels = wrapper.findAll('.van-radio__label');
|
||||
|
||||
icons[2].trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('c');
|
||||
expect(wrapper.emitted('change')[0][0]).toEqual('c');
|
||||
|
||||
labels[1].trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('b');
|
||||
expect(wrapper.emitted('change')[1][0]).toEqual('b');
|
||||
|
||||
icons[3].trigger('click');
|
||||
labels[3].trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('b');
|
||||
});
|
||||
|
||||
test('radio group disabled', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-radio-group v-model="result" disabled @change="$emit('change', $event)">
|
||||
<van-radio
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
label
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
result: 'a',
|
||||
list: ['a', 'b', 'c', 'd'],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const icons = wrapper.findAll('.van-radio__icon');
|
||||
icons[2].trigger('click');
|
||||
|
||||
expect(wrapper.emitted('change')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('icon-size prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-radio-group icon-size="10rem">
|
||||
<van-radio>label</van-radio>
|
||||
<van-radio icon-size="5rem">label</van-radio>
|
||||
</van-radio-group>
|
||||
`,
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('checked-color prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-radio-group checked-color="black">
|
||||
<van-radio :value="true">label</van-radio>
|
||||
<van-radio :value="true" checked-color="white">label</van-radio>
|
||||
</van-radio-group>
|
||||
`,
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
89
src/radio/test/index.spec.ts
Normal file
89
src/radio/test/index.spec.ts
Normal file
@ -0,0 +1,89 @@
|
||||
import Radio from '..';
|
||||
import { mount } from '../../../test';
|
||||
|
||||
test('should emit "update:modelValue" event when radio icon or label is clicked', async () => {
|
||||
const props = { name: 'a' };
|
||||
const wrapper = mount(Radio, {
|
||||
props,
|
||||
slots: {
|
||||
default: () => 'Label',
|
||||
},
|
||||
});
|
||||
|
||||
const icon = wrapper.find('.van-radio__icon');
|
||||
const label = wrapper.find('.van-radio__label');
|
||||
icon.trigger('click');
|
||||
expect(wrapper.emitted('update:modelValue')[0]).toEqual([props.name]);
|
||||
|
||||
label.trigger('click');
|
||||
expect(wrapper.emitted('update:modelValue')[0]).toEqual([props.name]);
|
||||
});
|
||||
|
||||
test('should not emit "update:modelValue" event when radio icon is disabled and clicked', () => {
|
||||
const wrapper = mount(Radio, {
|
||||
props: {
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-radio__icon').trigger('click');
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should render "van-radio--label-disabled" class when using label-disabled prop', () => {
|
||||
const wrapper = mount(Radio, {
|
||||
props: {
|
||||
labelDisabled: true,
|
||||
},
|
||||
slots: {
|
||||
default: () => 'Label',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.classes()).toContain('van-radio--label-disabled');
|
||||
});
|
||||
|
||||
test('should not emit "update:modelValue" event when label is disabled and clicked', () => {
|
||||
const wrapper = mount(Radio, {
|
||||
props: {
|
||||
labelDisabled: true,
|
||||
},
|
||||
slots: {
|
||||
default: () => 'Label',
|
||||
},
|
||||
});
|
||||
|
||||
const label = wrapper.find('.van-radio__label');
|
||||
label.trigger('click');
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should adjust label position when using label-position prop', () => {
|
||||
const wrapper = mount(Radio, {
|
||||
props: {
|
||||
labelPosition: 'left',
|
||||
},
|
||||
slots: {
|
||||
default: () => 'Label',
|
||||
},
|
||||
});
|
||||
|
||||
const label = wrapper.find('.van-radio__label');
|
||||
expect(label.classes()).toContain('van-radio__label--left');
|
||||
});
|
||||
|
||||
test('should emit click event when radio icon is clicked', async () => {
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount(Radio, {
|
||||
props: {
|
||||
onClick,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
|
||||
const icon = wrapper.find('.van-radio__icon');
|
||||
icon.trigger('click');
|
||||
expect(onClick).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user