mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 01:13:58 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

test: update test cases to testing-lib (#35056)

Browse Source
This commit is contained in:
MadCcc 2022-04-15 23:33:10 +08:00 committed by GitHub
parent cd3471506c
commit e4a87750ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 81 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
components/form/__tests__/list.test.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { render, fireEvent } from '@testing-library/react';
import Form from '..';
@ -9,16 +8,15 @@ import { sleep } from '../../../tests/utils';
describe('Form.List', () => {
async function change(wrapper, index, value) {
wrapper.find(Input).at(index).simulate('change', { target: { value } });
fireEvent.change(wrapper.getElementsByClassName('ant-input')[index], { target: { value } });
await sleep();
wrapper.update();
}
function testList(name, renderField) {
it(name, async () => {
jest.useFakeTimers();
const wrapper = mount(
const { container } = render(
<Form>
<Form.List name="list">
{(fields, { add, remove }) => (
@ -47,37 +45,35 @@ describe('Form.List', () => {
function operate(className) {
act(() => {
wrapper.find(className).last().simulate('click');
fireEvent.click(container.querySelector(className));
jest.runAllTimers();
});
wrapper.update();
}
operate('.add');
expect(wrapper.find(Input).length).toBe(1);
expect(container.getElementsByClassName('ant-input').length).toBe(1);
operate('.add');
expect(wrapper.find(Input).length).toBe(2);
expect(container.getElementsByClassName('ant-input').length).toBe(2);
operate('.add');
expect(wrapper.find(Input).length).toBe(3);
expect(container.getElementsByClassName('ant-input').length).toBe(3);
await change(wrapper, 2, '');
await change(container, 2, '');
for (let i = 0; i < 10; i += 1) {
act(() => {
jest.runAllTimers();
});
}
wrapper.update();
expect(wrapper.find('.ant-form-item-explain div').length).toBe(1);
expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(1);
operate('.remove-0');
expect(wrapper.find(Input).length).toBe(2);
expect(wrapper.find('.ant-form-item-explain div').length).toBe(1);
expect(container.getElementsByClassName('ant-input').length).toBe(2);
expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(1);
operate('.remove-1');
expect(wrapper.find(Input).length).toBe(1);
expect(wrapper.find('.ant-form-item-explain div').length).toBe(0);
expect(container.getElementsByClassName('ant-input').length).toBe(1);
expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(0);
jest.useRealTimers();
});
@ -99,14 +95,12 @@ describe('Form.List', () => {
it('correct onFinish values', async () => {
async function click(wrapper, className) {
wrapper.find(className).last().simulate('click');
await sleep();
wrapper.update();
fireEvent.click(wrapper.querySelector(className));
}
const onFinish = jest.fn().mockImplementation(() => {});
const wrapper = mount(
const { container } = render(
<Form
onFinish={v => {
if (typeof v.list[0] === 'object') {
@ -139,22 +133,22 @@ describe('Form.List', () => {
</Form>,
);
await click(wrapper, '.add');
await change(wrapper, 0, 'input1');
wrapper.find('form').simulate('submit');
await click(container, '.add');
await change(container, 0, 'input1');
fireEvent.submit(container.querySelector('form'));
await sleep();
expect(onFinish).toHaveBeenLastCalledWith({ list: ['input1'] });
await click(wrapper, '.add');
await change(wrapper, 1, 'input2');
await click(wrapper, '.add');
await change(wrapper, 2, 'input3');
wrapper.find('form').simulate('submit');
await click(container, '.add');
await change(container, 1, 'input2');
await click(container, '.add');
await change(container, 2, 'input3');
fireEvent.submit(container.querySelector('form'));
await sleep();
expect(onFinish).toHaveBeenLastCalledWith({ list: ['input1', 'input2', 'input3'] });
await click(wrapper, '.remove'); // will remove first input
wrapper.find('form').simulate('submit');
await click(container, '.remove'); // will remove first input
fireEvent.submit(container.querySelector('form'));
await sleep();
expect(onFinish).toHaveBeenLastCalledWith({ list: ['input2', 'input3'] });
});
@ -163,7 +157,7 @@ describe('Form.List', () => {
jest.useFakeTimers();
let operation;
const wrapper = mount(
const { container } = render(
<Form>
<Form.List
name="list"
@ -190,22 +184,21 @@ describe('Form.List', () => {
operation.add();
await sleep(100);
jest.runAllTimers();
wrapper.update();
});
}
await addItem();
expect(wrapper.find('.ant-form-item-explain div').text()).toEqual('At least 2');
expect(container.querySelector('.ant-form-item-explain div').innerHTML).toEqual('At least 2');
await addItem();
expect(wrapper.find('.ant-form-item-explain div')).toHaveLength(0);
expect(container.getElementsByClassName('ant-form-item-explain div')).toHaveLength(0);
jest.useRealTimers();
});
it('should render empty without errors', () => {
const wrapper = mount(<Form.ErrorList />);
expect(wrapper.render()).toMatchSnapshot();
const { container } = render(<Form.ErrorList />);
expect(container.firstChild).toMatchSnapshot();
});
it('no warning when reset in validate', async () => {

7
components/input-number/__tests__/prefix.test.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import InputNumber from '..';
import focusTest from '../../../tests/shared/focusTest';
@ -9,9 +10,9 @@ describe('prefix', () => {
{ refFocus: true },
);
it('should support className when has prefix', () => {
const wrapper = mount(<InputNumber prefix="suffix" className="my-class-name" />);
expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
const { container } = render(<InputNumber prefix="suffix" className="my-class-name" />);
expect(container.firstChild.className.includes('my-class-name')).toBe(true);
expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
});
it('should trigger focus when prefix is clicked', () => {

38
components/input/__tests__/index.test.tsx
View File

@ -88,37 +88,33 @@ describe('Input', () => {
describe('prefix and suffix', () => {
it('should support className when has suffix', () => {
const wrapper = mount(<Input suffix="suffix" className="my-class-name" />);
expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
const { container } = render(<Input suffix="suffix" className="my-class-name" />);
expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
});
it('should support className when has prefix', () => {
const wrapper = mount(<Input prefix="prefix" className="my-class-name" />);
expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
const { container } = render(<Input prefix="prefix" className="my-class-name" />);
expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
});
it('should support hidden when has prefix or suffix', () => {
const wrapper = mount(
const { container } = render(
<>
<Input prefix="prefix" hidden className="prefix-with-hidden" />
<Input suffix="suffix" hidden className="suffix-with-hidden" />
</>,
);
expect(wrapper.find('.prefix-with-hidden').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(
true,
);
expect(wrapper.find('.suffix-with-hidden').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(
true,
);
expect(container.querySelector('.prefix-with-hidden')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.suffix-with-hidden')?.getAttribute('hidden')).toBe('');
});
});
describe('Input setting hidden', () => {
it('should support hidden when has prefix or suffix or showCount or allowClear or addonBefore or addonAfter', () => {
const wrapper = mount(
const { container } = render(
<>
<Input
hidden
@ -168,10 +164,10 @@ describe('Input setting hidden', () => {
</>,
);
expect(wrapper.find('.input').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
expect(wrapper.find('.input-search').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
expect(wrapper.find('.input-textarea').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
expect(wrapper.find('.input-password').at(0).getDOMNode<HTMLInputElement>().hidden).toBe(true);
expect(container.querySelector('.input')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.input-search')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.input-textarea')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.input-password')?.getAttribute('hidden')).toBe('');
});
});
@ -330,9 +326,9 @@ describe('Input allowClear', () => {
// https://github.com/ant-design/ant-design/issues/27444
it('should support className', () => {
const wrapper = mount(<Input allowClear className="my-class-name" />);
expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
const { container } = render(<Input allowClear className="my-class-name" />);
expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
});
// https://github.com/ant-design/ant-design/issues/31200

16
components/input/__tests__/textarea.test.js
View File

@ -223,12 +223,16 @@ describe('TextArea', () => {
);
});
it('should works same as Input', async () => {
const input = mount(<Input value="111" />);
const textarea = mount(<TextArea value="111" />);
input.setProps({ value: undefined });
textarea.setProps({ value: undefined });
expect(textarea.find('textarea').at(0).getDOMNode().value).toBe(input.getDOMNode().value);
it('should works same as Input', () => {
const { container: inputContainer, rerender: inputRerender } = render(<Input value="111" />);
const { container: textareaContainer, rerender: textareaRerender } = render(
<TextArea value="111" />,
);
inputRerender(<Input value={undefined} />);
textareaRerender(<TextArea value={undefined} />);
expect(textareaContainer.querySelector('textarea').value).toBe(
inputContainer.querySelector('input').value,
);
});
describe('should support showCount', () => {

11
components/radio/__tests__/group.test.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { mount, render } from 'enzyme';
import { render as testLibRender } from '@testing-library/react';
import Radio from '..';
describe('Radio Group', () => {
@ -151,7 +152,7 @@ describe('Radio Group', () => {
it('should forward ref', () => {
let radioGroupRef;
const wrapper = mount(
const { container } = testLibRender(
createRadioGroupByOption({
ref: ref => {
radioGroupRef = ref;
@ -159,18 +160,18 @@ describe('Radio Group', () => {
}),
);
expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
expect(radioGroupRef).toBe(container.querySelector('.ant-radio-group'));
});
it('should support data-* or aria-* props', () => {
const wrapper = mount(
const { container } = testLibRender(
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');
expect(container.firstChild.getAttribute('data-radio-group-id')).toBe('radio-group-id');
expect(container.firstChild.getAttribute('aria-label')).toBe('radio-group');
});
it('Radio type should not be override', () => {

11
components/radio/__tests__/radio-button.test.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { mount, render } from 'enzyme';
import { render as testLibRender } from '@testing-library/react';
import Radio, { Button } from '..';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
@ -162,7 +163,7 @@ describe('Radio Group', () => {
it('should forward ref', () => {
let radioGroupRef;
const wrapper = mount(
const { container } = testLibRender(
createRadioGroup({
ref: ref => {
radioGroupRef = ref;
@ -170,18 +171,18 @@ describe('Radio Group', () => {
}),
);
expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
expect(radioGroupRef).toBe(container.querySelector('.ant-radio-group'));
});
it('should support data-* or aria-* props', () => {
const wrapper = mount(
const { container } = testLibRender(
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');
expect(container.firstChild.getAttribute('data-radio-group-id')).toBe('radio-group-id');
expect(container.firstChild.getAttribute('aria-label')).toBe('radio-group');
});
it('Radio type should not be override', () => {

11
components/upload/__tests__/uploadlist.test.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import { fireEvent, render } from '@testing-library/react';
import Upload from '..';
import UploadList from '../UploadList';
import Form from '../../form';
@ -703,23 +704,23 @@ describe('Upload List', () => {
);
};
const wrapper = mount(<TestForm />);
const { container, unmount } = render(<TestForm />);
wrapper.find(Form).simulate('submit');
fireEvent.submit(container.querySelector('form'));
await sleep();
expect(formRef.getFieldError(['file'])).toEqual(['file required']);
wrapper.find('input').simulate('change', {
fireEvent.change(container.querySelector('input'), {
target: {
files: [{ name: 'foo.png' }],
},
});
wrapper.find(Form).simulate('submit');
fireEvent.submit(container.querySelector('form'));
await sleep();
expect(formRef.getFieldError(['file'])).toEqual([]);
wrapper.unmount();
unmount();
});
it('return when prop onPreview not exists', () => {

6
tests/shared/accessibilityTest.tsx
View File

@ -1,14 +1,14 @@
import React from 'react';
import { mount } from 'enzyme';
import { axe } from 'jest-axe';
import { render } from '@testing-library/react';
// eslint-disable-next-line jest/no-export
export default function accessibilityTest(Component: React.ComponentType) {
describe(`accessibility`, () => {
it(`component does not have any violations`, async () => {
jest.useRealTimers();
const wrapper = mount(<Component />);
const results = await axe(wrapper.getDOMNode());
const { container } = render(<Component />);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
});