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

test: refactor test cases of Space with RTL #35372

Merged
merged 2 commits into from
May 4, 2022
Merged

test: refactor test cases of Space with RTL #35372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5486764
test: refactor test cases of Space
jrr997 May 3, 2022
192afee
Merge branch 'master' into test-space
jrr997 May 3, 2022
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
4 changes: 2 additions & 2 deletions components/space/__tests__/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ exports[`Space should render correct with children 1`] = `
`;

exports[`Space should render width ConfigProvider 1`] = `
Array [
HTMLCollection [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
Expand Down Expand Up @@ -91,7 +91,7 @@ Array [
`;

exports[`Space should render width rtl 1`] = `
Array [
HTMLCollection [
<div
class="ant-space ant-space-horizontal ant-space-rtl ant-space-align-center"
>
Expand Down
8 changes: 4 additions & 4 deletions components/space/__tests__/gap.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { render } from '../../../tests/utils';
import Space from '..';
// eslint-disable-next-line no-unused-vars
import * as styleChecker from '../../_util/styleChecker';
Expand All @@ -12,13 +12,13 @@ jest.mock('../../_util/styleChecker', () => ({

describe('flex gap', () => {
it('should render width empty children', () => {
const wrapper = mount(
const { container } = render(
<Space>
<span />
<span />
</Space>,
);
expect(wrapper.getDOMNode().style['column-gap']).toBe('8px');
expect(wrapper.getDOMNode().style['row-gap']).toBe('8px');
expect(container.querySelector('div.ant-space').style['column-gap']).toBe('8px');
expect(container.querySelector('div.ant-space').style['row-gap']).toBe('8px');
});
});
61 changes: 28 additions & 33 deletions components/space/__tests__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { render, fireEvent } from '../../../tests/utils';
import Space from '..';
import ConfigProvider from '../../config-provider';
import mountTest from '../../../tests/shared/mountTest';
Expand All @@ -11,13 +10,13 @@ describe('Space', () => {
rtlTest(Space);

it('should render width empty children', () => {
const wrapper = mount(<Space />);
const { container } = render(<Space />);

expect(wrapper.instance()).toBe(null);
expect(container.children.length).toBe(0);
});

it('should render width ConfigProvider', () => {
const wrapper = mount(
const { container } = render(
<ConfigProvider space={{ size: 'large' }}>
<Space>
<span>1</span>
Expand All @@ -34,11 +33,11 @@ describe('Space', () => {
</ConfigProvider>,
);

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

it('should render width rtl', () => {
const wrapper = mount(
const { container } = render(
<ConfigProvider direction="rtl">
<Space>
<span>1</span>
Expand All @@ -55,65 +54,65 @@ describe('Space', () => {
</ConfigProvider>,
);

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

it('should render width customize size', () => {
const wrapper = mount(
const { container } = render(
<Space size={10}>
<span>1</span>
<span>2</span>
</Space>,
);

expect(wrapper.find('div.ant-space-item').at(0).prop('style').marginRight).toBe(10);
expect(wrapper.find('div.ant-space-item').at(1).prop('style').marginRight).toBeUndefined();
expect(container.querySelector('div.ant-space-item').style.marginRight).toBe('10px');
expect(container.querySelectorAll('div.ant-space-item')[1].style.marginRight).toBe('');
});

it('should render width size 0', () => {
const wrapper = mount(
const { container } = render(
<Space size={NaN}>
<span>1</span>
<span>2</span>
</Space>,
);

expect(wrapper.find('div.ant-space-item').at(0).prop('style').marginRight).toBe(0);
expect(container.querySelector('div.ant-space-item').style.marginRight).toBe('0px');
});

it('should render vertical space width customize size', () => {
const wrapper = mount(
const { container } = render(
<Space size={10} direction="vertical">
<span>1</span>
<span>2</span>
</Space>,
);

expect(wrapper.find('div.ant-space-item').at(0).prop('style').marginBottom).toBe(10);
expect(wrapper.find('div.ant-space-item').at(1).prop('style').marginBottom).toBeUndefined();
expect(container.querySelector('div.ant-space-item').style.marginBottom).toBe('10px');
expect(container.querySelectorAll('div.ant-space-item')[1].style.marginBottom).toBe('');
});

it('should render correct with children', () => {
const wrapper = mount(
const { container } = render(
<Space>
text1<span>text1</span>
{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
<>text3</>
</Space>,
);

expect(wrapper.render()).toMatchSnapshot();
expect(container.children[0]).toMatchSnapshot();
});

it('should render with invalidElement', () => {
const wrapper = mount(
const { container } = render(
<Space>
text1<span>text1</span>
text1
</Space>,
);

expect(wrapper.find('div.ant-space-item').length).toBe(3);
expect(container.querySelectorAll('div.ant-space-item').length).toBe(3);
});

it('should be keep store', () => {
Expand Down Expand Up @@ -144,39 +143,35 @@ describe('Space', () => {
</Space>
);
}
const wrapper = mount(<SpaceDemo />);
const { container } = render(<SpaceDemo />);

expect(wrapper.find('#demo').text()).toBe('1');
expect(container.querySelector('#demo')).toHaveTextContent('1');

act(() => {
wrapper.find('#demo').simulate('click');
});
fireEvent.click(container.querySelector('#demo'));

expect(wrapper.find('#demo').text()).toBe('2');
expect(container.querySelector('#demo')).toHaveTextContent('2');

act(() => {
wrapper.find('p').simulate('click');
});
fireEvent.click(container.querySelector('p'));

expect(wrapper.find('#demo').text()).toBe('2');
expect(container.querySelector('#demo')).toHaveTextContent('2');
});

it('split', () => {
const wrapper = mount(
const { container } = render(
<Space split="-">
text1<span>text1</span>
{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
<>text3</>
</Space>,
);

expect(wrapper.render()).toMatchSnapshot();
expect(container.children[0]).toMatchSnapshot();
});

// https://github.com/ant-design/ant-design/issues/35305
it('should not throw duplicated key warning', () => {
jest.spyOn(console, 'error').mockImplementation(() => undefined);
mount(
render(
<Space>
<div key="1" />
<div />
Expand Down