mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-26 08:47:29 +08:00
Code Issues Actions 34 Packages Projects Releases Wiki Activity

test: move test cases to @testing/library for List (#35850)

Browse Source
This commit is contained in:
yykoypj 2022-06-01 13:45:51 +08:00 committed by GitHub
parent cc9e3c2da1
commit 7dc56e3f00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 129 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/list/__tests__/Item.test.js
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme';
import List from '..'; import List from '..';
import ConfigProvider from '../../config-provider'; import ConfigProvider from '../../config-provider';
import { render } from '../../../tests/utils'; import { render } from '../../../tests/utils';
@ -20,7 +19,7 @@ describe('List Item Layout', () => {
]; ];
it('horizontal itemLayout List which contains string nodes should not be flex container', () => { it('horizontal itemLayout List which contains string nodes should not be flex container', () => {
const wrapper = mount( const { container: wrapper } = render(
<List <List
dataSource={data} dataSource={data}
renderItem={item => ( renderItem={item => (
@ -30,11 +29,13 @@ describe('List Item Layout', () => {
)} )}
/>, />,
); );
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true); expect(
wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'),
).toBe(true);
}); });
it('horizontal itemLayout List should be flex container defaultly', () => { it('horizontal itemLayout List should be flex container by default', () => {
const wrapper = mount( const { container: wrapper } = render(
<List <List
dataSource={data} dataSource={data}
renderItem={item => ( renderItem={item => (
@ -47,11 +48,13 @@ describe('List Item Layout', () => {
)} )}
/>, />,
); );
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false); expect(
wrapper.querySelector('.ant-list-item').classList.contains('ant-list-item-no-flex'),
).toBe(false);
}); });
it('vertical itemLayout List should be flex container when there is extra node', () => { it('vertical itemLayout List should be flex container when there is extra node', () => {
const wrapper = mount( const { container: wrapper } = render(
<List <List
itemLayout="vertical" itemLayout="vertical"
dataSource={data} dataSource={data}
@ -65,11 +68,13 @@ describe('List Item Layout', () => {
)} )}
/>, />,
); );
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false); expect(
wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'),
).toBe(false);
}); });
it('vertical itemLayout List should not be flex container when there is not extra node', () => { it('vertical itemLayout List should not be flex container when there is not extra node', () => {
const wrapper = mount( const { container: wrapper } = render(
<List <List
itemLayout="vertical" itemLayout="vertical"
dataSource={data} dataSource={data}
@ -83,11 +88,13 @@ describe('List Item Layout', () => {
)} )}
/>, />,
); );
expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true); expect(
wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'),
).toBe(true);
}); });
it('horizontal itemLayout List should accept extra node', () => { it('horizontal itemLayout List should accept extra node', () => {
const wrapper = mount( const { container: wrapper } = render(
<List <List
dataSource={data} dataSource={data}
renderItem={item => ( renderItem={item => (
@ -104,11 +111,11 @@ describe('List Item Layout', () => {
)} )}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(wrapper.firstChild).toMatchSnapshot();
}); });
it('should render in RTL direction', () => { it('should render in RTL direction', () => {
const wrapper = mount( const { container: wrapper } = render(
<ConfigProvider direction="rtl"> <ConfigProvider direction="rtl">
<List <List
dataSource={data} dataSource={data}
@ -127,7 +134,7 @@ describe('List Item Layout', () => {
/> />
</ConfigProvider>, </ConfigProvider>,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(wrapper.firstChild).toMatchSnapshot();
}); });
it('rowKey could be string', () => { it('rowKey could be string', () => {
@ -145,14 +152,14 @@ describe('List Item Layout', () => {
title: `ant design`, title: `ant design`,
}, },
]; ];
const wrapper = mount( const { container: wrapper } = render(
<List <List
dataSource={dataWithId} dataSource={dataWithId}
rowKey="id" rowKey="id"
renderItem={item => <List.Item>{item.title}</List.Item>} renderItem={item => <List.Item>{item.title}</List.Item>}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(wrapper.firstChild).toMatchSnapshot();
}); });
it('rowKey could be function', () => { it('rowKey could be function', () => {
@ -170,14 +177,14 @@ describe('List Item Layout', () => {
title: `ant design`, title: `ant design`,
}, },
]; ];
const wrapper = mount( const { container: wrapper } = render(
<List <List
dataSource={dataWithId} dataSource={dataWithId}
rowKey={item => item.id} rowKey={item => item.id}
renderItem={item => <List.Item>{item.title}</List.Item>} renderItem={item => <List.Item>{item.title}</List.Item>}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(wrapper.firstChild).toMatchSnapshot();
}); });
it('should ref', () => { it('should ref', () => {

6
components/list/__tests__/empty.test.js
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import { render } from 'enzyme'; import { render } from '../../../tests/utils';
import List from '..'; import List from '..';
describe('List', () => { describe('List', () => {
it('renders empty list', () => { it('renders empty list', () => {
const wrapper = render(<List dataSource={[]} renderItem={() => <List.Item />} />); const { container } = render(<List dataSource={[]} renderItem={() => <List.Item />} />);
expect(wrapper).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
}); });

8
components/list/__tests__/index.test.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { render } from '../../../tests/utils';
import List from '..'; import List from '..';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
@ -16,7 +16,9 @@ describe('List', () => {
const renderItem = item => <List.Item>{item}</List.Item>; const renderItem = item => <List.Item>{item}</List.Item>;
const dataSource = []; const dataSource = [];
const wrapper = mount(<List renderItem={renderItem} dataSource={dataSource} locale={locale} />); const { container } = render(
expect(wrapper.find('div').first().props().locale).toBe(undefined); <List renderItem={renderItem} dataSource={dataSource} locale={locale} />,
);
expect(container.querySelector('div.ant-list').getAttribute('locale')).toBe(null);
}); });
}); });

14
components/list/__tests__/loading.test.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { render } from 'enzyme';
import { LoadingOutlined } from '@ant-design/icons'; import { LoadingOutlined } from '@ant-design/icons';
import { render } from '../../../tests/utils';
import List from '..'; import List from '..';
@ -9,20 +9,20 @@ describe('List', () => {
const loading = { const loading = {
spinning: true, spinning: true,
}; };
const wrapper = render( const { container: wrapper } = render(
<List loading={loading} dataSource={[]} renderItem={() => <List.Item />} />, <List loading={loading} dataSource={[]} renderItem={() => <List.Item />} />,
); );
expect(wrapper.find('.ant-list-empty-text')).toHaveLength(0); expect(wrapper.querySelectorAll('.ant-list-empty-text')).toHaveLength(0);
}); });
it('renders object loading', () => { it('renders object loading', () => {
const loading = { const loading = {
spinning: true, spinning: true,
}; };
const wrapper = render( const { container: wrapper } = render(
<List loading={loading} dataSource={[1]} renderItem={() => <List.Item />} />, <List loading={loading} dataSource={[1]} renderItem={() => <List.Item />} />,
); );
expect(wrapper.find('.ant-spin-spinning')).toHaveLength(1); expect(wrapper.querySelectorAll('.ant-spin-spinning')).toHaveLength(1);
}); });
it('renders object loading with indicator', () => { it('renders object loading with indicator', () => {
@ -32,9 +32,9 @@ describe('List', () => {
spinning: true, spinning: true,
indicator: antIcon, indicator: antIcon,
}; };
const wrapper = render( const { container: wrapper } = render(
<List loading={loading} dataSource={[1]} renderItem={() => <List.Item />} />, <List loading={loading} dataSource={[1]} renderItem={() => <List.Item />} />,
); );
expect(wrapper.find('.anticon-loading')).toHaveLength(1); expect(wrapper.querySelectorAll('.anticon-loading')).toHaveLength(1);
}); });
}); });

152
components/list/__tests__/pagination.test.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { render, mount } from 'enzyme'; import { fireEvent, render } from '../../../tests/utils';
import List from '..'; import List from '..';
import { noop } from '../../_util/warning'; import { noop } from '../../_util/warning';
@ -26,47 +26,58 @@ describe('List.pagination', () => {
} }
function renderedNames(wrapper) { function renderedNames(wrapper) {
return wrapper.find('.ant-list-item').map(row => row.text()); return Array.prototype.map.call(
wrapper.querySelectorAll('.ant-list-item'),
row => row.textContent,
);
} }
it('renders pagination correctly', () => { it('renders pagination correctly', () => {
const wrapper = render(createList()); const { container } = render(createList());
expect(wrapper).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => { it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => {
const wrapper = mount(createList({ pagination: { pageSize: 3, hideOnSinglePage: true } })); const { container: wrapper, rerender } = render(
expect(wrapper.find('.ant-pagination')).toHaveLength(1); createList({
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false } }); pagination: {
expect(wrapper.find('.ant-pagination')).toHaveLength(1); pageSize: 3,
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true } }); hideOnSinglePage: true,
expect(wrapper.find('.ant-pagination')).toHaveLength(0); },
wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false } }); }),
expect(wrapper.find('.ant-pagination')).toHaveLength(1); );
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true } }); expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination')).toHaveLength(0); rerender(createList({ pagination: { pageSize: 3, hideOnSinglePage: false } }));
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false } }); expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination')).toHaveLength(1); rerender(createList({ pagination: { pageSize: 4, hideOnSinglePage: true } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createList({ pagination: { pageSize: 4, hideOnSinglePage: false } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: { pageSize: 5, hideOnSinglePage: true } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createList({ pagination: { pageSize: 5, hideOnSinglePage: false } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
}); });
it('paginate data', () => { it('paginate data', () => {
const wrapper = mount(createList()); const { container: wrapper } = render(createList());
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']); expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
wrapper.find('Pager').last().simulate('click');
const paginationItems = wrapper.querySelectorAll('.ant-pagination-item');
fireEvent.click(paginationItems[paginationItems.length - 1]);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']); expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
}); });
it('repaginates when pageSize change', () => { it('repaginates when pageSize change', () => {
const wrapper = mount(createList()); const { container: wrapper, rerender } = render(createList());
wrapper.setProps({ pagination: { pageSize: 1 } }); rerender(createList({ pagination: { pageSize: 1 } }));
expect(renderedNames(wrapper)).toEqual(['Jack']); expect(renderedNames(wrapper)).toEqual(['Jack']);
}); });
it('fires change event', () => { it('fires change event', () => {
const handlePaginationChange = jest.fn(); const handlePaginationChange = jest.fn();
const wrapper = mount( const { container: wrapper } = render(
createList({ createList({
pagination: { pagination: {
...pagination, ...pagination,
@ -76,7 +87,8 @@ describe('List.pagination', () => {
}), }),
); );
wrapper.find('Pager').last().simulate('click'); const paginationItems = wrapper.querySelectorAll('.ant-pagination-item');
fireEvent.click(paginationItems[paginationItems.length - 1]);
expect(handlePaginationChange).toHaveBeenCalledWith(2, 2); expect(handlePaginationChange).toHaveBeenCalledWith(2, 2);
}); });
@ -84,56 +96,70 @@ describe('List.pagination', () => {
// https://github.com/ant-design/ant-design/issues/4532 // https://github.com/ant-design/ant-design/issues/4532
// https://codepen.io/afc163/pen/pWVRJV?editors=001 // https://codepen.io/afc163/pen/pWVRJV?editors=001
it('should display pagination as prop pagination change between true and false', () => { it('should display pagination as prop pagination change between true and false', () => {
const wrapper = mount(createList()); const { container: wrapper, rerender } = render(createList());
expect(wrapper.find('.ant-pagination')).toHaveLength(1); expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0); rerender(createList({ pagination: false }));
wrapper.setProps({ pagination }); expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
wrapper.update();
expect(wrapper.find('.ant-pagination')).toHaveLength(1); rerender(createList({ pagination }));
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
wrapper.find('.ant-pagination-item-2').simulate('click'); expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
fireEvent.click(wrapper.querySelector('.ant-pagination-item-2'));
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']); expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0); rerender(createList({ pagination: false }));
wrapper.setProps({ pagination: true }); expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: true }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
// Legacy code will make pageSize ping with 10, here we fixed to keep sync by current one // Legacy code will make pageSize ping with 10, here we fixed to keep sync by current one
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']); expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
}); });
// https://github.com/ant-design/ant-design/issues/5259 // https://github.com/ant-design/ant-design/issues/5259
it('change to correct page when data source changes', () => { it('change to correct page when data source changes', () => {
const wrapper = mount(createList({ pagination: { pageSize: 1 } })); const { container: wrapper, rerender } = render(createList({ pagination: { pageSize: 1 } }));
wrapper.find('.ant-pagination-item-3').simulate('click'); fireEvent.click(wrapper.querySelector('.ant-pagination-item-3'));
wrapper.setProps({ dataSource: [data[0]] }); rerender(createList({ dataSource: [data[0]] }));
expect(wrapper.find('.ant-pagination-item-1').hasClass('ant-pagination-item-active')).toBe( expect(wrapper.querySelector('.ant-pagination-item-1')).toHaveClass(
true, 'ant-pagination-item-active',
); );
}); });
it('specify the position of pagination', () => { it('specify the position of pagination', () => {
const wrapper = mount(createList({ pagination: { position: 'top' } })); const { container: wrapper, rerender } = render(
expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1); createList({ pagination: { position: 'top' } }),
wrapper.setProps({ pagination: { position: 'bottom' } }); );
expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1); expect(wrapper.querySelector('.ant-list').querySelectorAll('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'both' } });
expect(wrapper.find('.ant-pagination')).toHaveLength(2); rerender(createList({ pagination: { position: 'bottom' } }));
expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1); expect(
expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1); wrapper.querySelector('.ant-list').lastElementChild.querySelectorAll('.ant-pagination'),
).toHaveLength(1);
rerender(createList({ pagination: { position: 'both' } }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(2);
expect(
wrapper.querySelector('.ant-list').firstElementChild.querySelectorAll('.ant-pagination'),
).toHaveLength(1);
expect(
wrapper.querySelector('.ant-list').lastElementChild.querySelectorAll('.ant-pagination'),
).toHaveLength(1);
}); });
it('should change page size work', () => { it('should change page size work', () => {
const wrapper = mount(createList({ pagination: { showSizeChanger: true } })); const { container: wrapper } = render(createList({ pagination: { showSizeChanger: true } }));
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot(); expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
wrapper.find('.ant-select-selector').simulate('mousedown'); fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
wrapper.find('.ant-select-item-option').at(2).simulate('click'); fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[2]);
wrapper.find('.ant-select-selector').simulate('mousedown'); fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot(); expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
}); });
// https://github.com/ant-design/ant-design/issues/24913 // https://github.com/ant-design/ant-design/issues/24913
@ -141,7 +167,7 @@ describe('List.pagination', () => {
it('should onChange called when pageSize change', () => { it('should onChange called when pageSize change', () => {
const handlePaginationChange = jest.fn(); const handlePaginationChange = jest.fn();
const handlePageSizeChange = () => {}; const handlePageSizeChange = () => {};
const wrapper = mount( const { container: wrapper } = render(
createList({ createList({
pagination: { pagination: {
...pagination, ...pagination,
@ -152,13 +178,13 @@ describe('List.pagination', () => {
}), }),
); );
wrapper.find('.ant-select-selector').simulate('mousedown'); fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
wrapper.find('.ant-select-item-option').at(1).simulate('click'); fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[1]);
expect(handlePaginationChange).toHaveBeenCalledWith(1, 10); expect(handlePaginationChange).toHaveBeenCalledWith(1, 10);
}); });
it('should default work', () => { it('should default work', () => {
const wrapper = mount( const { container: wrapper } = render(
createList({ createList({
pagination: { pagination: {
defaultPageSize: 3, defaultPageSize: 3,
@ -169,11 +195,11 @@ describe('List.pagination', () => {
}), }),
); );
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot(); expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
}); });
it('should not crash when pagination is null', () => { it('should not crash when pagination is null', () => {
mount( render(
createList({ createList({
pagination: null, pagination: null,
}), }),