ant-design-vue/components/radio/__tests__/group.test.js

239 lines
6.5 KiB
JavaScript
Raw Normal View History

2019-01-12 03:33:27 +00:00
import { mount } from '@vue/test-utils';
import { asyncExpect } from '@/tests/utils';
import Radio from '../Radio';
import RadioGroup from '../Group';
2019-09-23 12:45:58 +00:00
import RadioButton from '../RadioButton';
2018-06-17 09:25:54 +00:00
describe('Radio', () => {
2019-01-12 03:33:27 +00:00
function createRadioGroup(props, listeners = {}) {
2018-06-17 09:25:54 +00:00
return {
props: ['value'],
2019-01-12 03:33:27 +00:00
render() {
const groupProps = { ...props };
2018-06-17 09:25:54 +00:00
if (this.value !== undefined) {
2019-01-12 03:33:27 +00:00
groupProps.value = this.value;
2018-06-17 09:25:54 +00:00
}
return (
2019-01-12 03:33:27 +00:00
<RadioGroup ref="radioGroup" {...{ props: groupProps, on: listeners }}>
<Radio value="A">A</Radio>
<Radio value="B">B</Radio>
<Radio value="C">C</Radio>
2018-06-17 09:25:54 +00:00
</RadioGroup>
2019-01-12 03:33:27 +00:00
);
2018-06-17 09:25:54 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-06-17 09:25:54 +00:00
}
2019-01-12 03:33:27 +00:00
function createRadioGroupByOption() {
2018-06-17 09:25:54 +00:00
const options = [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
{ label: 'C', value: 'C' },
2019-01-12 03:33:27 +00:00
];
2018-06-17 09:25:54 +00:00
return {
2019-01-12 03:33:27 +00:00
render() {
return <RadioGroup options={options} />;
2018-06-17 09:25:54 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-06-17 09:25:54 +00:00
}
it('responses hover events', () => {
2019-01-12 03:33:27 +00:00
const onMouseEnter = jest.fn();
const onMouseLeave = jest.fn();
2018-06-17 09:25:54 +00:00
const wrapper = mount({
2019-01-12 03:33:27 +00:00
render() {
2018-06-17 09:25:54 +00:00
return (
2019-01-12 03:33:27 +00:00
<RadioGroup onMouseenter={onMouseEnter} onMouseleave={onMouseLeave}>
2018-06-17 09:25:54 +00:00
<Radio />
</RadioGroup>
2019-01-12 03:33:27 +00:00
);
2018-06-17 09:25:54 +00:00
},
2019-01-12 03:33:27 +00:00
});
2018-06-17 09:25:54 +00:00
2019-09-18 12:03:13 +00:00
wrapper
.findAll('div')
.at(0)
.trigger('mouseenter');
2019-01-12 03:33:27 +00:00
expect(onMouseEnter).toHaveBeenCalled();
2018-06-17 09:25:54 +00:00
2019-09-18 12:03:13 +00:00
wrapper
.findAll('div')
.at(0)
.trigger('mouseleave');
2019-01-12 03:33:27 +00:00
expect(onMouseLeave).toHaveBeenCalled();
});
2018-06-17 09:25:54 +00:00
it('fire change events when value changes', async () => {
2019-01-12 03:33:27 +00:00
const onChange = jest.fn();
const props = {};
2018-06-17 09:25:54 +00:00
const wrapper = mount(
createRadioGroup(props, {
change: onChange,
}),
2019-01-12 03:33:27 +00:00
{ sync: false },
);
let radios = null;
2018-06-17 09:25:54 +00:00
await asyncExpect(() => {
2019-01-12 03:33:27 +00:00
radios = wrapper.findAll('input');
2018-06-17 09:25:54 +00:00
// uncontrolled component
2019-01-12 03:33:27 +00:00
wrapper.vm.$refs.radioGroup.stateValue = 'B';
2018-06-17 09:25:54 +00:00
// wrapper.setData({ value: 'B' })
2019-01-12 03:33:27 +00:00
radios.at(0).trigger('change');
2019-10-16 06:47:49 +00:00
});
await asyncExpect(() => {
2019-01-12 03:33:27 +00:00
expect(onChange.mock.calls.length).toBe(1);
});
2018-06-17 09:25:54 +00:00
await asyncExpect(() => {
2019-01-12 03:33:27 +00:00
expect(wrapper.html()).toMatchSnapshot();
});
2018-06-17 09:25:54 +00:00
await asyncExpect(() => {
// controlled component
2019-01-12 03:33:27 +00:00
wrapper.setProps({ value: 'A' });
radios.at(1).trigger('change');
2019-10-16 06:47:49 +00:00
});
await asyncExpect(() => {
2019-01-12 03:33:27 +00:00
expect(onChange.mock.calls.length).toBe(2);
});
2018-06-17 09:25:54 +00:00
await asyncExpect(() => {
2019-01-12 03:33:27 +00:00
expect(wrapper.html()).toMatchSnapshot();
});
});
2018-06-17 09:25:54 +00:00
2019-09-18 12:03:13 +00:00
it('both of radio and radioGroup will trigger onchange event when they exists', async () => {
const onChange = jest.fn();
const onChangeRadioGroup = jest.fn();
const wrapper = mount(
{
props: ['value'],
render() {
const groupProps = {};
if (this.value !== undefined) {
groupProps.value = this.value;
}
return (
<RadioGroup ref="radioGroup" {...groupProps} onChange={onChangeRadioGroup}>
<Radio value="A" onChange={onChange}>
A
</Radio>
<Radio value="B" onChange={onChange}>
B
</Radio>
<Radio value="C" onChange={onChange}>
C
</Radio>
</RadioGroup>
);
},
},
{ sync: false },
);
const radios = wrapper.findAll('input');
// uncontrolled component
wrapper.vm.$refs.radioGroup.stateValue = 'B';
radios.at(0).trigger('change');
expect(onChange.mock.calls.length).toBe(1);
2019-10-16 06:47:49 +00:00
await asyncExpect(() => {
expect(onChangeRadioGroup.mock.calls.length).toBe(1);
});
2019-09-18 12:03:13 +00:00
// controlled component
wrapper.setProps({ value: 'A' });
radios.at(1).trigger('change');
expect(onChange.mock.calls.length).toBe(2);
});
2019-10-16 06:47:49 +00:00
it('Trigger onChange when both of radioButton and radioGroup exists', async () => {
2019-09-18 12:03:13 +00:00
const onChange = jest.fn();
const props = {};
const wrapper = mount(
createRadioGroup(props, {
change: onChange,
}),
{ sync: false },
);
const radios = wrapper.findAll('input');
// uncontrolled component
wrapper.vm.$refs.radioGroup.stateValue = 'B';
radios.at(0).trigger('change');
2019-10-16 06:47:49 +00:00
await asyncExpect(() => {
expect(onChange.mock.calls.length).toBe(1);
});
2019-09-18 12:03:13 +00:00
// controlled component
wrapper.setProps({ value: 'A' });
radios.at(1).trigger('change');
2019-10-16 06:47:49 +00:00
await asyncExpect(() => {
expect(onChange.mock.calls.length).toBe(2);
});
2019-09-18 12:03:13 +00:00
});
// it('should only trigger once when in group with options', () => {
// const onChange = jest.fn();
// const options = [{ label: 'Bamboo', value: 'Bamboo' }];
// const wrapper = mount(<RadioGroup options={options} onChange={onChange} />);
// wrapper.find('input').trigger('change');
// expect(onChange).toHaveBeenCalledTimes(1);
// });
2018-06-17 09:25:54 +00:00
// it('won\'t fire change events when value not changes', async () => {
// const onChange = jest.fn()
// const wrapper = mount(
// createRadioGroup({}, {
// change: onChange,
// }),
// { sync: false }
// )
// const radios = wrapper.findAll('input')
// await asyncExpect(() => {
// // uncontrolled component
// wrapper.vm.$refs.radioGroup.stateValue = 'B'
// radios.at(1).trigger('change')
// expect(onChange.mock.calls.length).toBe(0)
// })
// await asyncExpect(() => {
// }, 0)
// // // controlled component
// // wrapper.setProps({ value: 'A' })
// // radios.at(0).trigger('change')
// // expect(onChange.mock.calls.length).toBe(0)
// })
it('optional should correct render', () => {
2019-01-12 03:33:27 +00:00
const wrapper = mount(createRadioGroupByOption());
const radios = wrapper.findAll('input');
2018-06-17 09:25:54 +00:00
2019-01-12 03:33:27 +00:00
expect(radios.length).toBe(3);
});
2018-06-17 09:25:54 +00:00
it('all children should have a name property', () => {
2019-01-12 03:33:27 +00:00
const GROUP_NAME = 'radiogroup';
const wrapper = mount(createRadioGroup({ name: GROUP_NAME }));
expect(wrapper.html()).toMatchSnapshot();
expect(
wrapper.findAll('input[type="radio"]').wrappers.forEach(el => {
expect(el.element.name).toEqual(GROUP_NAME);
}),
);
});
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
it('passes prefixCls down to radio', () => {
2019-01-12 03:33:27 +00:00
const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }];
const wrapper = mount(RadioGroup, {
propsData: {
prefixCls: 'my-radio',
options,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});