mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

test: move test cases to testing-library for Grid (#37057)

Browse Source 
* test: move test cases to testing-library for Grid

* fix: test when typeof gutter is object array in large screen
This commit is contained in:
Yuki Zhang 2022-08-16 10:14:41 +08:00 committed by GitHub
parent 1182f782c0
commit 81aac069ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 193 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
components/grid/__tests__/__snapshots__/demo.test.js.snap → components/grid/__tests__/__snapshots__/demo.test.ts.snap
View File

8
components/grid/__tests__/__snapshots__/index.test.js.snap → components/grid/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -3,17 +3,17 @@
exports[`Grid renders wrapped Col correctly 1`] = `
<div
class="ant-row"
style="margin-left:-10px;margin-right:-10px"
style="margin-left: -10px; margin-right: -10px;"
>
<div>
<div
class="ant-col ant-col-12"
style="padding-left:10px;padding-right:10px"
style="padding-left: 10px; padding-right: 10px;"
/>
</div>
<div
class="ant-col ant-col-12"
style="padding-left:10px;padding-right:10px"
style="padding-left: 10px; padding-right: 10px;"
/>
</div>
`;
@ -45,6 +45,6 @@ exports[`Grid should render Row 1`] = `
exports[`Grid when typeof gutter is object array in large screen 1`] = `
<div
class="ant-row"
style="margin-left:-20px;margin-right:-20px;margin-top:-200px;margin-bottom:-200px"
style="margin: -200px -20px -200px -20px;"
/>
`;

18
components/grid/__tests__/cached-row-context.test.tsx
View File

@ -1,7 +1,7 @@
import { mount } from 'enzyme';
import React, { memo, useContext, useRef, useState } from 'react';
import Row from '../row';
import RowContext from '../RowContext';
import { render, fireEvent } from '../../../tests/utils';
const CacheInner = memo(() => {
const countRef = useRef(0);
@ -33,16 +33,16 @@ const CacheOuter = () => {
};
it('Cached RowContext is working', () => {
const wrapper = mount(<CacheOuter />);
const childCount = wrapper.find('#child_count').text();
const { container } = render(<CacheOuter />);
const childCount = container.querySelector('#child_count')?.textContent;
wrapper.find('#parent_btn').at(0).simulate('click');
expect(wrapper.find('#parent_count').text()).toBe('2');
fireEvent.click(container.querySelector('#parent_btn')!);
expect(container.querySelector('#parent_count')?.textContent).toBe('2');
// child component won't rerender
expect(wrapper.find('#child_count').text()).toBe(childCount);
expect(container.querySelector('#child_count')?.textContent).toBe(childCount);
wrapper.find('#parent_btn').at(0).simulate('click');
expect(wrapper.find('#parent_count').text()).toBe('3');
fireEvent.click(container.querySelector('#parent_btn')!);
expect(container.querySelector('#parent_count')?.textContent).toBe('3');
// child component won't rerender
expect(wrapper.find('#child_count').text()).toBe(childCount);
expect(container.querySelector('#child_count')?.textContent).toBe(childCount);
});

0
components/grid/__tests__/demo.test.js → components/grid/__tests__/demo.test.ts
View File

13
components/grid/__tests__/gap.test.js → components/grid/__tests__/gap.test.tsx
View File

@ -1,4 +1,3 @@
import { mount } from 'enzyme';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { Col, Row } from '..';
@ -22,19 +21,15 @@ describe('Grid.Gap', () => {
});
it('should use gap', () => {
const wrapper = mount(
const { container } = render(
<Row gutter={[16, 8]}>
<Col />
</Row>,
);
expect(wrapper.find('.ant-row').props().style).toEqual(
expect.objectContaining({
marginLeft: -8,
rowGap: 8,
marginRight: -8,
}),
);
expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginLeft).toEqual('-8px');
expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginRight).toEqual('-8px');
expect((container.querySelector('.ant-row') as HTMLElement)!.style.rowGap).toEqual('8px');
});
it('not break ssr', () => {

127
components/grid/__tests__/index.test.js
View File

@ -1,127 +0,0 @@
import { mount, render } from 'enzyme';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { Col, Row } from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import ResponsiveObserve from '../../_util/responsiveObserve';
import useBreakpoint from '../hooks/useBreakpoint';
describe('Grid', () => {
mountTest(Row);
mountTest(Col);
rtlTest(Row);
rtlTest(Col);
it('should render Col', () => {
const wrapper = render(<Col span={2} />);
expect(wrapper).toMatchSnapshot();
});
it('should render Row', () => {
const wrapper = render(<Row />);
expect(wrapper).toMatchSnapshot();
});
it('when typeof gutter is object', () => {
const wrapper = mount(<Row gutter={{ xs: 8, sm: 16, md: 24 }} />);
expect(wrapper.find('div').first().props().style).toEqual(
expect.objectContaining({
marginLeft: -4,
marginRight: -4,
}),
);
});
it('when typeof gutter is object array', () => {
const wrapper = mount(
<Row
gutter={[
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
]}
/>,
);
expect(wrapper.find('div').first().props().style).toEqual(
expect.objectContaining({
marginLeft: -4,
marginRight: -4,
}),
);
});
it('when typeof gutter is object array in large screen', () => {
const wrapper = render(
<Row
gutter={[
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
{ xs: 8, sm: 16, md: 24, lg: 100, xl: 400 },
]}
/>,
);
expect(wrapper).toMatchSnapshot();
});
it('renders wrapped Col correctly', () => {
const MyCol = () => <Col span={12} />;
const wrapper = render(
<Row gutter={20}>
<div>
<Col span={12} />
</div>
<MyCol />
</Row>,
);
expect(wrapper).toMatchSnapshot();
});
it('ResponsiveObserve.unsubscribe should be called when unmounted', () => {
const Unmount = jest.spyOn(ResponsiveObserve, 'unsubscribe');
const wrapper = mount(<Row gutter={{ xs: 20 }} />);
act(() => {
wrapper.unmount();
});
expect(Unmount).toHaveBeenCalled();
});
it('should work correct when gutter is object', () => {
const wrapper = mount(<Row gutter={{ xs: 20 }} />);
expect(wrapper.find('div').prop('style')).toEqual({
marginLeft: -10,
marginRight: -10,
});
});
it('should work current when gutter is array', () => {
const wrapper = mount(<Row gutter={[16, 20]} />);
expect(wrapper.find('div').prop('style')).toEqual({
marginLeft: -8,
marginRight: -8,
marginTop: -10,
marginBottom: -10,
});
});
// By jsdom mock, actual jsdom not implemented matchMedia
// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
it('should work with useBreakpoint', () => {
function Demo() {
const screens = useBreakpoint();
return JSON.stringify(screens);
}
const wrapper = mount(<Demo />);
expect(wrapper.text()).toEqual(
JSON.stringify({
xs: true,
sm: false,
md: false,
lg: false,
xl: false,
xxl: false,
}),
);
});
});

146
components/grid/__tests__/index.test.tsx Normal file
View File

@ -0,0 +1,146 @@
import React from 'react';
import { Col, Row } from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import ResponsiveObserve from '../../_util/responsiveObserve';
import useBreakpoint from '../hooks/useBreakpoint';
import { render, act } from '../../../tests/utils';
describe('Grid', () => {
mountTest(Row);
mountTest(Col);
rtlTest(Row);
rtlTest(Col);
afterEach(() => {
ResponsiveObserve.unregister();
});
it('should render Col', () => {
const { asFragment } = render(<Col span={2} />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should render Row', () => {
const { asFragment } = render(<Row />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('when typeof gutter is object', () => {
const { container } = render(<Row gutter={{ xs: 8, sm: 16, md: 24 }} />);
expect(container.querySelector('div')!.style.marginLeft).toEqual('-4px');
expect(container.querySelector('div')!.style.marginRight).toEqual('-4px');
});
it('when typeof gutter is object array', () => {
const { container } = render(
<Row
gutter={[
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
]}
/>,
);
expect(container.querySelector('div')!.style.marginLeft).toEqual('-4px');
expect(container.querySelector('div')!.style.marginRight).toEqual('-4px');
});
it('when typeof gutter is object array in large screen', () => {
jest.spyOn(window, 'matchMedia').mockImplementation(
query =>
({
addListener: (cb: (e: { matches: boolean }) => void) => {
cb({ matches: query === '(min-width: 1200px)' });
},
removeListener: jest.fn(),
matches: query === '(min-width: 1200px)',
} as any),
);
const { container, asFragment } = render(
<Row
gutter={[
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 },
{ xs: 8, sm: 16, md: 24, lg: 100, xl: 400 },
]}
/>,
);
expect(asFragment().firstChild).toMatchSnapshot();
expect(container.querySelector('div')!.style.marginLeft).toEqual('-20px');
expect(container.querySelector('div')!.style.marginRight).toEqual('-20px');
expect(container.querySelector('div')!.style.marginTop).toEqual('-200px');
expect(container.querySelector('div')!.style.marginBottom).toEqual('-200px');
});
it('renders wrapped Col correctly', () => {
const MyCol = () => <Col span={12} />;
const { asFragment } = render(
<Row gutter={20}>
<div>
<Col span={12} />
</div>
<MyCol />
</Row>,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('ResponsiveObserve.unsubscribe should be called when unmounted', () => {
const Unmount = jest.spyOn(ResponsiveObserve, 'unsubscribe');
const { unmount } = render(<Row gutter={{ xs: 20 }} />);
act(() => {
unmount();
});
expect(Unmount).toHaveBeenCalled();
});
it('should work correct when gutter is object', () => {
const { container } = render(<Row gutter={{ xs: 20 }} />);
expect(container.querySelector('div')!.style.marginLeft).toEqual('-10px');
expect(container.querySelector('div')!.style.marginRight).toEqual('-10px');
});
it('should work current when gutter is array', () => {
const { container } = render(<Row gutter={[16, 20]} />);
expect(container.querySelector('div')!.style.marginLeft).toEqual('-8px');
expect(container.querySelector('div')!.style.marginRight).toEqual('-8px');
expect(container.querySelector('div')!.style.marginTop).toEqual('-10px');
expect(container.querySelector('div')!.style.marginBottom).toEqual('-10px');
});
// By jsdom mock, actual jsdom not implemented matchMedia
// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
it('should work with useBreakpoint', () => {
const matchMediaSpy = jest.spyOn(window, 'matchMedia');
matchMediaSpy.mockImplementation(
query =>
({
addListener: (cb: (e: { matches: boolean }) => void) => {
cb({ matches: query === '(max-width: 575px)' });
},
removeListener: jest.fn(),
matches: query === '(max-width: 575px)',
} as any),
);
let screensVar;
function Demo() {
const screens = useBreakpoint();
screensVar = screens;
return <div />;
}
render(<Demo />);
expect(screensVar).toEqual({
xs: true,
sm: false,
md: false,
lg: false,
xl: false,
xxl: false,
});
});
});

34
components/grid/__tests__/server.test.js
View File

@ -1,34 +0,0 @@
import { mount } from 'enzyme';
import React from 'react';
// eslint-disable-next-line no-unused-vars
import { Col, Row } from '..';
jest.mock('rc-util/lib/Dom/canUseDom', () => () => false);
describe('Grid.Server', () => {
it('use compatible gap logic', () => {
const wrapper = mount(
<Row gutter={[8, 16]}>
<Col />
</Row>,
);
expect(wrapper.find('.ant-row').props().style).toEqual(
expect.objectContaining({
marginLeft: -4,
marginRight: -4,
marginTop: -8,
marginBottom: -8,
}),
);
expect(wrapper.find('.ant-col').props().style).toEqual(
expect.objectContaining({
paddingLeft: 4,
paddingRight: 4,
paddingTop: 8,
paddingBottom: 8,
}),
);
});
});

30
components/grid/__tests__/server.test.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
// eslint-disable-next-line no-unused-vars
import { Col, Row } from '..';
import { render } from '../../../tests/utils';
jest.mock('rc-util/lib/Dom/canUseDom', () => () => false);
describe('Grid.Server', () => {
it('use compatible gap logic', () => {
const { container } = render(
<Row gutter={[8, 16]}>
<Col />
</Row>,
);
expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginLeft).toEqual('-4px');
expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginRight).toEqual('-4px');
expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginTop).toEqual('-8px');
expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginBottom).toEqual(
'-8px',
);
expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingLeft).toEqual('4px');
expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingRight).toEqual('4px');
expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingTop).toEqual('8px');
expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingBottom).toEqual(
'8px',
);
});
});