Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Radio type cannot be override #32463

Merged
merged 1 commit into from
Oct 13, 2021
Merged

fix: Radio type cannot be override #32463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 52 additions & 32 deletions components/radio/__tests__/group.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React from 'react';
import { mount, render } from 'enzyme';
import Radio from '../radio';
import RadioGroup from '../group';
import RadioButton from '../radioButton';
import Radio from '..';

describe('Radio Group', () => {
function createRadioGroup(props) {
return (
<RadioGroup {...props}>
<Radio.Group {...props}>
<Radio value="A">A</Radio>
<Radio value="B">B</Radio>
<Radio value="C">C</Radio>
</RadioGroup>
</Radio.Group>
);
}

Expand All @@ -22,17 +20,17 @@ describe('Radio Group', () => {
{ label: 'C', value: 'C' },
];

return <RadioGroup {...props} options={options} />;
return <Radio.Group {...props} options={options} />;
}

it('responses hover events', () => {
const onMouseEnter = jest.fn();
const onMouseLeave = jest.fn();

const wrapper = mount(
<RadioGroup onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Radio.Group onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Radio />
</RadioGroup>,
</Radio.Group>,
);

wrapper.find('div').at(0).simulate('mouseenter');
Expand Down Expand Up @@ -63,7 +61,7 @@ describe('Radio Group', () => {
const onChangeRadioGroup = jest.fn();

const wrapper = mount(
<RadioGroup onChange={onChangeRadioGroup}>
<Radio.Group onChange={onChangeRadioGroup}>
<Radio value="A" onChange={onChange}>
A
</Radio>
Expand All @@ -73,7 +71,7 @@ describe('Radio Group', () => {
<Radio value="C" onChange={onChange}>
C
</Radio>
</RadioGroup>,
</Radio.Group>,
);
const radios = wrapper.find('input');

Expand All @@ -87,11 +85,11 @@ describe('Radio Group', () => {
const onChange = jest.fn();

const wrapper = mount(
<RadioGroup onChange={onChange}>
<RadioButton value="A">A</RadioButton>
<RadioButton value="B">B</RadioButton>
<RadioButton value="C">C</RadioButton>
</RadioGroup>,
<Radio.Group onChange={onChange}>
<Radio.Button value="A">A</Radio.Button>
<Radio.Button value="B">B</Radio.Button>
<Radio.Button value="C">C</Radio.Button>
</Radio.Group>,
);
const radios = wrapper.find('input');

Expand All @@ -104,7 +102,7 @@ describe('Radio Group', () => {
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} />);
const wrapper = mount(<Radio.Group options={options} onChange={onChange} />);

wrapper.find('input').simulate('change');
expect(onChange).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -147,9 +145,7 @@ describe('Radio Group', () => {
{ label: 'Apple', value: 'Apple' },
{ label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
];

const wrapper = render(<RadioGroup prefixCls="my-radio" options={options} />);

const wrapper = render(<Radio.Group prefixCls="my-radio" options={options} />);
expect(wrapper).toMatchSnapshot();
});

Expand All @@ -166,11 +162,46 @@ describe('Radio Group', () => {
expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
});

it('should support data-* or aria-* props', () => {
const wrapper = mount(
createRadioGroup({
'data-radio-group-id': 'radio-group-id',
'aria-label': 'radio-group',
}),
);
expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
});

it('Radio type should not be override', () => {
const onChange = jest.fn();
const wrapper = mount(
<Radio.Group onChange={onChange}>
<Radio value={1} type="1">
A
</Radio>
<Radio value={2} type="2">
B
</Radio>
<Radio value={3} type="3">
C
</Radio>
<Radio value={4} type="4">
D
</Radio>
</Radio.Group>,
);
const radios = wrapper.find('input');
radios.at(1).simulate('change');
expect(onChange).toHaveBeenCalled();
expect(radios.at(1).getDOMNode().type).toBe('radio');
});

describe('value is null or undefined', () => {
it('use `defaultValue` when `value` is undefined', () => {
const options = [{ label: 'Bamboo', value: 'bamboo' }];
const wrapper = mount(
<RadioGroup defaultValue="bamboo" value={undefined} options={options} />,
<Radio.Group defaultValue="bamboo" value={undefined} options={options} />,
);
expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
true,
Expand All @@ -180,7 +211,7 @@ describe('Radio Group', () => {
[undefined, null].forEach(newValue => {
it(`should set value back when value change back to ${newValue}`, () => {
const options = [{ label: 'Bamboo', value: 'bamboo' }];
const wrapper = mount(<RadioGroup value="bamboo" options={options} />);
const wrapper = mount(<Radio.Group value="bamboo" options={options} />);
expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
true,
);
Expand All @@ -192,15 +223,4 @@ describe('Radio Group', () => {
});
});
});

it('should support data-* or aria-* props', () => {
const wrapper = mount(
createRadioGroup({
'data-radio-group-id': 'radio-group-id',
'aria-label': 'radio-group',
}),
);
expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
});
});
6 changes: 1 addition & 5 deletions components/radio/radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
>
<RcCheckbox {...radioProps} prefixCls={prefixCls} ref={mergedRef} />
<RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef} />
{children !== undefined ? <span>{children}</span> : null}
</label>
);
Expand All @@ -59,8 +59,4 @@ const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);

Radio.displayName = 'Radio';

Radio.defaultProps = {
type: 'radio',
};

export default Radio;