mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 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 { mount } from 'enzyme';
import List from '..';
import ConfigProvider from '../../config-provider';
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', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={data}
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', () => {
const wrapper = mount(
it('horizontal itemLayout List should be flex container by default', () => {
const { container: wrapper } = render(
<List
dataSource={data}
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', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
itemLayout="vertical"
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', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
itemLayout="vertical"
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', () => {
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={data}
renderItem={item => (
@ -104,11 +111,11 @@ describe('List Item Layout', () => {
)}
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('should render in RTL direction', () => {
const wrapper = mount(
const { container: wrapper } = render(
<ConfigProvider direction="rtl">
<List
dataSource={data}
@ -127,7 +134,7 @@ describe('List Item Layout', () => {
/>
</ConfigProvider>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('rowKey could be string', () => {
@ -145,14 +152,14 @@ describe('List Item Layout', () => {
title: `ant design`,
},
];
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={dataWithId}
rowKey="id"
renderItem={item => <List.Item>{item.title}</List.Item>}
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('rowKey could be function', () => {
@ -170,14 +177,14 @@ describe('List Item Layout', () => {
title: `ant design`,
},
];
const wrapper = mount(
const { container: wrapper } = render(
<List
dataSource={dataWithId}
rowKey={item => item.id}
renderItem={item => <List.Item>{item.title}</List.Item>}
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.firstChild).toMatchSnapshot();
});
it('should ref', () => {

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

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

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

@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { render } from '../../../tests/utils';
import List from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
@ -16,7 +16,9 @@ describe('List', () => {
const renderItem = item => <List.Item>{item}</List.Item>;
const dataSource = [];
const wrapper = mount(<List renderItem={renderItem} dataSource={dataSource} locale={locale} />);
expect(wrapper.find('div').first().props().locale).toBe(undefined);
const { container } = render(
<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 { render } from 'enzyme';
import { LoadingOutlined } from '@ant-design/icons';
import { render } from '../../../tests/utils';
import List from '..';
@ -9,20 +9,20 @@ describe('List', () => {
const loading = {
spinning: true,
};
const wrapper = render(
const { container: wrapper } = render(
<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', () => {
const loading = {
spinning: true,
};
const wrapper = render(
const { container: wrapper } = render(
<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', () => {
@ -32,9 +32,9 @@ describe('List', () => {
spinning: true,
indicator: antIcon,
};
const wrapper = render(
const { container: wrapper } = render(
<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 { render, mount } from 'enzyme';
import { fireEvent, render } from '../../../tests/utils';
import List from '..';
import { noop } from '../../_util/warning';
@ -26,47 +26,58 @@ describe('List.pagination', () => {
}
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', () => {
const wrapper = render(createList());
expect(wrapper).toMatchSnapshot();
const { container } = render(createList());
expect(container.firstChild).toMatchSnapshot();
});
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => {
const wrapper = mount(createList({ pagination: { pageSize: 3, hideOnSinglePage: true } }));
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { pageSize: 4, 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.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
const { container: wrapper, rerender } = render(
createList({
pagination: {
pageSize: 3,
hideOnSinglePage: true,
},
}),
);
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: { pageSize: 3, hideOnSinglePage: false } }));
expect(wrapper.querySelectorAll('.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', () => {
const wrapper = mount(createList());
const { container: wrapper } = render(createList());
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']);
});
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']);
});
it('fires change event', () => {
const handlePaginationChange = jest.fn();
const wrapper = mount(
const { container: wrapper } = render(
createList({
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);
});
@ -84,56 +96,70 @@ describe('List.pagination', () => {
// https://github.com/ant-design/ant-design/issues/4532
// https://codepen.io/afc163/pen/pWVRJV?editors=001
it('should display pagination as prop pagination change between true and false', () => {
const wrapper = mount(createList());
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination });
wrapper.update();
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
wrapper.find('.ant-pagination-item-2').simulate('click');
const { container: wrapper, rerender } = render(createList());
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
rerender(createList({ pagination: false }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createList({ pagination }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
fireEvent.click(wrapper.querySelector('.ant-pagination-item-2'));
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: true });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: false }));
expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
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
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
});
// https://github.com/ant-design/ant-design/issues/5259
it('change to correct page when data source changes', () => {
const wrapper = mount(createList({ pagination: { pageSize: 1 } }));
wrapper.find('.ant-pagination-item-3').simulate('click');
wrapper.setProps({ dataSource: [data[0]] });
expect(wrapper.find('.ant-pagination-item-1').hasClass('ant-pagination-item-active')).toBe(
true,
const { container: wrapper, rerender } = render(createList({ pagination: { pageSize: 1 } }));
fireEvent.click(wrapper.querySelector('.ant-pagination-item-3'));
rerender(createList({ dataSource: [data[0]] }));
expect(wrapper.querySelector('.ant-pagination-item-1')).toHaveClass(
'ant-pagination-item-active',
);
});
it('specify the position of pagination', () => {
const wrapper = mount(createList({ pagination: { position: 'top' } }));
expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'bottom' } });
expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: 'both' } });
expect(wrapper.find('.ant-pagination')).toHaveLength(2);
expect(wrapper.find('.ant-list').childAt(0).find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-list').children().last().find('.ant-pagination')).toHaveLength(1);
const { container: wrapper, rerender } = render(
createList({ pagination: { position: 'top' } }),
);
expect(wrapper.querySelector('.ant-list').querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createList({ pagination: { position: 'bottom' } }));
expect(
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', () => {
const wrapper = mount(createList({ pagination: { showSizeChanger: true } }));
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot();
const { container: wrapper } = render(createList({ pagination: { showSizeChanger: true } }));
expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
wrapper.find('.ant-select-selector').simulate('mousedown');
wrapper.find('.ant-select-item-option').at(2).simulate('click');
fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[2]);
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(wrapper.find('Pagination').first().render()).toMatchSnapshot();
fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/24913
@ -141,7 +167,7 @@ describe('List.pagination', () => {
it('should onChange called when pageSize change', () => {
const handlePaginationChange = jest.fn();
const handlePageSizeChange = () => {};
const wrapper = mount(
const { container: wrapper } = render(
createList({
pagination: {
...pagination,
@ -152,13 +178,13 @@ describe('List.pagination', () => {
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
wrapper.find('.ant-select-item-option').at(1).simulate('click');
fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[1]);
expect(handlePaginationChange).toHaveBeenCalledWith(1, 10);
});
it('should default work', () => {
const wrapper = mount(
const { container: wrapper } = render(
createList({
pagination: {
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', () => {
mount(
render(
createList({
pagination: null,
}),