Skip to content

Commit

Permalink
test: migrate part of checkbox tests (ant-design#35354)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TrickyPi
TrickyPi committed May 5, 2022
1 parent 44b9ab7 commit 50d3d99
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 59 deletions.
12 changes: 7 additions & 5 deletions components/checkbox/__tests__/checkbox.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { render, fireEvent } from '../../../tests/utils';
import Checkbox from '..';
import focusTest from '../../../tests/shared/focusTest';
import { resetWarned } from '../../_util/devWarning';
Expand All @@ -15,20 +15,22 @@ describe('Checkbox', () => {
const onMouseEnter = jest.fn();
const onMouseLeave = jest.fn();

const wrapper = mount(<Checkbox onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />);
const { container } = render(
<Checkbox onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />,
);

wrapper.find('label').simulate('mouseenter');
fireEvent.mouseEnter(container.querySelector('label'));
expect(onMouseEnter).toHaveBeenCalled();

wrapper.find('label').simulate('mouseleave');
fireEvent.mouseLeave(container.querySelector('label'));
expect(onMouseLeave).toHaveBeenCalled();
});

it('warning if set `value`', () => {
resetWarned();

const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(<Checkbox value />);
render(<Checkbox value />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Checkbox] `value` is not a valid prop, do you mean `checked`?',
);
Expand Down
109 changes: 55 additions & 54 deletions components/checkbox/__tests__/group.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useState } from 'react';
import { mount } from 'enzyme';
import Collapse from '../../collapse';
import Table from '../../table';
import Checkbox from '../index';
Expand All @@ -14,16 +13,16 @@ describe('CheckboxGroup', () => {

it('should work basically', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
<Checkbox.Group options={['Apple', 'Pear', 'Orange']} onChange={onChange} />,
);
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]);
expect(onChange).toHaveBeenCalledWith(['Apple']);
wrapper.find('.ant-checkbox-input').at(1).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]);
expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear']);
wrapper.find('.ant-checkbox-input').at(2).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[2]);
expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear', 'Orange']);
wrapper.find('.ant-checkbox-input').at(1).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]);
expect(onChange).toHaveBeenCalledWith(['Apple', 'Orange']);
});

Expand All @@ -35,12 +34,12 @@ describe('CheckboxGroup', () => {
{ label: 'Pear', value: 'Pear' },
];

const groupWrapper = mount(
const { container } = render(
<Checkbox.Group options={options} onChange={onChangeGroup} disabled />,
);
groupWrapper.find('.ant-checkbox-input').at(0).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]);
expect(onChangeGroup).not.toHaveBeenCalled();
groupWrapper.find('.ant-checkbox-input').at(1).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]);
expect(onChangeGroup).not.toHaveBeenCalled();
});

Expand All @@ -52,17 +51,17 @@ describe('CheckboxGroup', () => {
{ label: 'Orange', value: 'Orange', disabled: true },
];

const groupWrapper = mount(<Checkbox.Group options={options} onChange={onChangeGroup} />);
groupWrapper.find('.ant-checkbox-input').at(0).simulate('change');
const { container } = render(<Checkbox.Group options={options} onChange={onChangeGroup} />);
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]);
expect(onChangeGroup).toHaveBeenCalledWith(['Apple']);
groupWrapper.find('.ant-checkbox-input').at(1).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]);
expect(onChangeGroup).toHaveBeenCalledWith(['Apple']);
});

it('all children should have a name property', () => {
const wrapper = mount(<Checkbox.Group name="checkboxgroup" options={['Yes', 'No']} />);
wrapper.find('input[type="checkbox"]').forEach(el => {
expect(el.props().name).toEqual('checkboxgroup');
const { container } = render(<Checkbox.Group name="checkboxgroup" options={['Yes', 'No']} />);
[...container.querySelectorAll('input[type="checkbox"]')].forEach(el => {
expect(el.getAttribute('name')).toEqual('checkboxgroup');
});
});

Expand All @@ -72,33 +71,32 @@ describe('CheckboxGroup', () => {
{ label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
];

const wrapper = mount(<Checkbox.Group prefixCls="my-checkbox" options={options} />);
const { container } = render(<Checkbox.Group prefixCls="my-checkbox" options={options} />);

expect(wrapper.render()).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

it('should be controlled by value', () => {
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Orange', value: 'Orange' },
];

const wrapper = mount(<Checkbox.Group options={options} />);
expect(wrapper.find('.ant-checkbox-checked').length).toBe(0);
wrapper.setProps({ value: ['Apple'] });
wrapper.update();
expect(wrapper.find('.ant-checkbox-checked').length).toBe(1);
const renderCheckbox = props => <Checkbox.Group {...props} />;
const { container, rerender } = render(renderCheckbox({ options }));
expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0);
rerender(renderCheckbox({ options, value: 'Apple' }));
expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1);
});

// https://github.com/ant-design/ant-design/issues/12642
it('should trigger onChange in sub Checkbox', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
<Checkbox.Group>
<Checkbox value="my" onChange={onChange} />
</Checkbox.Group>,
);
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]);
expect(onChange).toHaveBeenCalled();
expect(onChange.mock.calls[0][0].target.value).toEqual('my');
});
Expand Down Expand Up @@ -143,28 +141,27 @@ describe('CheckboxGroup', () => {
// https://github.com/ant-design/ant-design/issues/17297
it('onChange should keep the order of the original values', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
<Checkbox.Group onChange={onChange}>
<Checkbox key={1} value={1} />
<Checkbox key={2} value={2} />
<Checkbox key={3} value={3} />
<Checkbox key={4} value={4} />
</Checkbox.Group>,
);

wrapper.find('.ant-checkbox-input').at(0).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]);
expect(onChange).toHaveBeenCalledWith([1]);
wrapper.find('.ant-checkbox-input').at(1).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]);
expect(onChange).toHaveBeenCalledWith([1, 2]);
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]);
expect(onChange).toHaveBeenCalledWith([2]);
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]);
expect(onChange).toHaveBeenCalledWith([1, 2]);
});

// https://github.com/ant-design/ant-design/issues/21134
it('should work when checkbox is wrapped by other components', () => {
const wrapper = mount(
const { container } = render(
<Checkbox.Group>
<Collapse bordered={false}>
<Collapse.Panel header="test panel">
Expand All @@ -175,28 +172,31 @@ describe('CheckboxGroup', () => {
</Collapse>
</Checkbox.Group>,
);
wrapper.find('.ant-collapse-item').at(0).find('.ant-collapse-header').simulate('click');
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
expect(wrapper.find('.ant-checkbox-checked').length).toBe(1);
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
expect(wrapper.find('.ant-checkbox-checked').length).toBe(0);

fireEvent.click(
container.querySelector('.ant-collapse-item').querySelector('.ant-collapse-header'),
);
fireEvent.click(container.querySelector('.ant-checkbox-input'));
expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1);
fireEvent.click(container.querySelector('.ant-checkbox-input'));
expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0);
});

it('skipGroup', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
<Checkbox.Group onChange={onChange}>
<Checkbox value={1} />
<Checkbox value={2} skipGroup />
</Checkbox.Group>,
);
wrapper.find('.ant-checkbox-input').at(1).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]);
expect(onChange).not.toHaveBeenCalled();
});

it('Table rowSelection', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
<Checkbox.Group onChange={onChange}>
<Table
dataSource={[{ key: 1, value: '1' }]}
Expand All @@ -205,27 +205,32 @@ describe('CheckboxGroup', () => {
/>
</Checkbox.Group>,
);
wrapper.find('.ant-checkbox-input').at(1).simulate('change');
fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]);
expect(onChange).not.toHaveBeenCalled();
});

it('should get div ref', () => {
mount(
const refCalls = [];
render(
<Checkbox.Group
options={['Apple', 'Pear', 'Orange']}
ref={node => {
expect(node.nodeName).toBe('DIV');
refCalls.push(node);
}}
/>,
);
const [mountCall] = refCalls;
expect(mountCall.nodeName).toBe('DIV');
});

it('should support number option', () => {
const onChange = jest.fn();

const wrapper = mount(<Checkbox.Group options={[1, 'Pear', 'Orange']} onChange={onChange} />);
const { container } = render(
<Checkbox.Group options={[1, 'Pear', 'Orange']} onChange={onChange} />,
);

wrapper.find('.ant-checkbox-input').at(0).simulate('change');
fireEvent.click(container.querySelector('.ant-checkbox-input'));
expect(onChange).toHaveBeenCalledWith([1]);
});

Expand All @@ -251,17 +256,13 @@ describe('CheckboxGroup', () => {
);
};

const wrapper = mount(<Demo />);

wrapper.find('.ant-checkbox-input').first().simulate('change');
const { container } = render(<Demo />);
fireEvent.click(container.querySelector('.ant-checkbox-input'));
expect(onChange).toHaveBeenCalledWith([]);
wrapper.find('.ant-checkbox-input').first().simulate('change');
fireEvent.click(container.querySelector('.ant-checkbox-input'));
expect(onChange).toHaveBeenCalledWith(['length1']);
wrapper
.find('.ant-input')
.first()
.simulate('change', { target: { value: '' } });
wrapper.find('.ant-checkbox-input').first().simulate('change');
fireEvent.change(container.querySelector('.ant-input'), { target: { value: '' } });
fireEvent.click(container.querySelector('.ant-checkbox-input'));
expect(onChange).toHaveBeenCalledWith(['A']);
});
});

0 comments on commit 50d3d99

Please sign in to comment.