mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

test: replace test case with test library (#35925)

Browse Source 
* test: replace test case with test library

* test: replace test case with test library

* test: update snapshots
This commit is contained in:
dingkang 2022-06-07 10:14:32 +08:00 committed by GitHub
parent 1f080c299e
commit dfd1897063
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 1638 additions and 1180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/table/__tests__/Table.expand.test.js
View File

@ -1,6 +1,6 @@
/* eslint-disable react/no-multi-comp */
import React from 'react';
import { mount } from 'enzyme';
import { render, fireEvent } from '../../../tests/utils';
import Table from '..';
const columns = [
@ -39,13 +39,13 @@ const data = [
describe('Table.expand', () => {
it('click to expand', () => {
const wrapper = mount(<Table columns={columns} dataSource={data} />);
wrapper.find('.ant-table-row-expand-icon').last().simulate('click');
expect(wrapper.render()).toMatchSnapshot();
const { container, asFragment } = render(<Table columns={columns} dataSource={data} />);
fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
expect(asFragment().firstChild).toMatchSnapshot();
});
it('expandRowByClick should not block click icon', () => {
const wrapper = mount(
const { container } = render(
<Table
columns={columns}
dataSource={[John, Jim]}
@ -55,26 +55,15 @@ describe('Table.expand', () => {
}}
/>,
);
fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
expect(container.querySelector('.ant-table-row-expand-icon-expanded')).toBeTruthy();
wrapper.find('.ant-table-row-expand-icon').first().simulate('click');
expect(
wrapper
.find('.ant-table-row-expand-icon')
.first()
.hasClass('ant-table-row-expand-icon-expanded'),
).toBeTruthy();
wrapper.find('.ant-table-row-expand-icon').first().simulate('click');
expect(
wrapper
.find('.ant-table-row-expand-icon')
.first()
.hasClass('ant-table-row-expand-icon-collapsed'),
).toBeTruthy();
fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
expect(container.querySelector('.ant-table-row-expand-icon-collapsed')).toBeTruthy();
});
it('show expandIcon', () => {
const wrapper = mount(
const { container } = render(
<Table
columns={[{ dataIndex: 'key' }]}
dataSource={[{ key: 233 }]}
@ -83,23 +72,19 @@ describe('Table.expand', () => {
}}
/>,
);
expect(wrapper.find('.expand-icon')).toHaveLength(1);
expect(container.querySelectorAll('.expand-icon')).toHaveLength(1);
});
it('row indent padding should be 0px when indentSize defined as 0', () => {
const wrapper = mount(<Table indentSize={0} columns={columns} dataSource={data} />);
const button = wrapper.find('.ant-table-row-expand-icon').at(0);
button.simulate('click');
expect(wrapper.find('.indent-level-1').at(0).prop('style')).toHaveProperty(
'paddingLeft',
'0px',
);
const { container } = render(<Table indentSize={0} columns={columns} dataSource={data} />);
fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
expect(container.querySelector('.indent-level-1').style.paddingLeft).toEqual('0px');
});
describe('expandIconColumnIndex', () => {
it('basic', () => {
const wrapper = mount(
const { container } = render(
<Table
columns={[{ dataIndex: 'key' }]}
dataSource={[{ key: 'bamboo' }]}
@ -110,12 +95,13 @@ describe('Table.expand', () => {
/>,
);
expect(wrapper.find('td').at(0).text()).toEqual('bamboo');
expect(wrapper.find('td').at(1).find('.ant-table-row-expand-icon').length).toBeTruthy();
const tdNodeList = container.querySelectorAll('td');
expect(tdNodeList[0].textContent).toEqual('bamboo');
expect(tdNodeList[1].querySelector('.ant-table-row-expand-icon')).toBeTruthy();
});
it('work with selection', () => {
const wrapper = mount(
const { container } = render(
<Table
columns={[{ dataIndex: 'key' }]}
dataSource={[{ key: 'bamboo' }]}
@ -126,10 +112,10 @@ describe('Table.expand', () => {
rowSelection={{}}
/>,
);
expect(wrapper.find('td').at(0).find('.ant-checkbox-input').length).toBeTruthy();
expect(wrapper.find('td').at(1).text()).toEqual('bamboo');
expect(wrapper.find('td').at(2).find('.ant-table-row-expand-icon').length).toBeTruthy();
const tdNodeList = container.querySelectorAll('td');
expect(tdNodeList[0].querySelector('.ant-checkbox-input')).toBeTruthy();
expect(tdNodeList[1].textContent).toEqual('bamboo');
expect(tdNodeList[2].querySelector('.ant-table-row-expand-icon')).toBeTruthy();
});
});
});

1350
components/table/__tests__/Table.filter.test.js
View File

File diff suppressed because it is too large Load Diff

13
components/table/__tests__/Table.order.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { render } from '../../../tests/utils';
import Table from '..';
import { resetWarned } from '../../_util/warning';
@ -37,7 +37,7 @@ describe('Table.order', () => {
it('warning if duplicated SELECTION_COLUMN', () => {
resetWarned();
mount(
render(
createTable({
columns: [Table.SELECTION_COLUMN, Table.SELECTION_COLUMN],
rowSelection: {},
@ -53,7 +53,7 @@ describe('Table.order', () => {
});
it('auto fixed', () => {
const wrapper = mount(
const { container } = render(
createTable({
columns: [
{
@ -69,8 +69,9 @@ describe('Table.order', () => {
}),
);
expect(wrapper.find('tr').last().find('td')).toHaveLength(3);
expect(wrapper.find('tr').last().find('td.ant-table-cell-fix-left')).toHaveLength(2);
wrapper.unmount();
expect(container.querySelectorAll('tr')[1].querySelectorAll('td')).toHaveLength(3);
expect(
container.querySelectorAll('tr')[1].querySelectorAll('td.ant-table-cell-fix-left'),
).toHaveLength(2);
});
});

392
components/table/__tests__/Table.pagination.test.js
View File

@ -1,8 +1,9 @@
/* eslint-disable import/first */
jest.mock('../../_util/scrollTo');
import { mount } from 'enzyme';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { render, fireEvent } from '../../../tests/utils';
import Table from '..';
import scrollTo from '../../_util/scrollTo';
import { resetWarned } from '../../_util/warning';
@ -33,54 +34,64 @@ describe('Table.pagination', () => {
return <Table columns={columns} dataSource={data} pagination={pagination} {...props} />;
}
function renderedNames(wrapper) {
return wrapper.find('BodyRow').map(row => row.props().record.name);
function renderedNames(contain) {
// --- reserve comment for code review ---
// return wrapper.find('BodyRow').map(row => row.props().record.name);
const namesList = [];
contain
.querySelector('.ant-table-tbody')
.querySelectorAll('tr')
.forEach(tr => {
namesList.push(tr.querySelector('td').textContent);
});
return namesList;
}
it('renders pagination correctly', () => {
const wrapper = mount(createTable());
expect(wrapper.render()).toMatchSnapshot();
const { asFragment } = render(createTable());
expect(asFragment().firstChild).toMatchSnapshot();
});
it('not crash when pageSize is undefined', () => {
expect(() => {
mount(createTable({ pagination: { pageSize: undefined } }));
render(createTable({ pagination: { pageSize: undefined } }));
}).not.toThrow();
});
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => {
const wrapper = mount(createTable({ 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, rerender } = render(
createTable({ pagination: { pageSize: 3, hideOnSinglePage: true } }),
);
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createTable({ pagination: { pageSize: 3, hideOnSinglePage: false } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createTable({ pagination: { pageSize: 4, hideOnSinglePage: true } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createTable({ pagination: { pageSize: 4, hideOnSinglePage: false } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createTable({ pagination: { pageSize: 5, hideOnSinglePage: true } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createTable({ pagination: { pageSize: 5, hideOnSinglePage: false } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
});
it('should use pageSize when defaultPageSize and pageSize are both specified', () => {
const wrapper = mount(createTable({ pagination: { pageSize: 3, defaultPageSize: 4 } }));
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
const { container } = render(createTable({ pagination: { pageSize: 3, defaultPageSize: 4 } }));
expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
});
it('paginate data', () => {
const wrapper = mount(createTable());
const { container } = render(createTable());
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
wrapper.find('Pager').last().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
expect(renderedNames(container)).toEqual(['Jack', 'Lucy']);
fireEvent.click(container.querySelector('.ant-pagination-next'));
expect(renderedNames(container)).toEqual(['Tom', 'Jerry']);
});
it('repaginates when pageSize change', () => {
const wrapper = mount(createTable());
wrapper.setProps({ pagination: { pageSize: 1 } });
expect(renderedNames(wrapper)).toEqual(['Jack']);
const { container, rerender } = render(createTable());
rerender(createTable({ pagination: { pageSize: 1 } }));
expect(renderedNames(container)).toEqual(['Jack']);
});
// https://github.com/ant-design/ant-design/issues/33487
@ -100,32 +111,32 @@ describe('Table.pagination', () => {
/>
);
}
const wrapper = mount(<App />);
expect(wrapper.render()).toMatchSnapshot();
const { asFragment } = render(<App />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should accept pagination size', () => {
const wrapper = mount(
const { container } = render(
createTable({
pagination: { size: 'small' },
}),
);
expect(wrapper.find('.ant-pagination.ant-pagination-mini')).toHaveLength(1);
expect(container.querySelectorAll('.ant-pagination.ant-pagination-mini')).toHaveLength(1);
});
it('should scroll to first row when page change', () => {
scrollTo.mockReturnValue(null);
const wrapper = mount(
const { container } = render(
createTable({ scroll: { y: 20 }, pagination: { showSizeChanger: true, pageSize: 2 } }),
);
expect(scrollTo).toHaveBeenCalledTimes(0);
wrapper.find('Pager').last().simulate('click');
fireEvent.click(container.querySelector('.ant-pagination-next'));
expect(scrollTo).toHaveBeenCalledTimes(1);
wrapper.find('.ant-select-selector').simulate('mousedown');
wrapper.find('.ant-select-item').last().simulate('click');
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
fireEvent.click(container.querySelectorAll('.ant-select-item')[1]);
expect(scrollTo).toHaveBeenCalledTimes(2);
});
@ -134,24 +145,23 @@ describe('Table.pagination', () => {
expect(top).toBe(0);
expect(getContainer().className).toBe('ant-table-body');
});
const wrapper = mount(
const { container } = render(
createTable({ scroll: { y: 20 }, pagination: { showSizeChanger: true, pageSize: 2 } }),
);
wrapper.find('Pager').last().simulate('click');
fireEvent.click(container.querySelector('.ant-pagination-next'));
});
it('fires change event', () => {
const handleChange = jest.fn();
const handlePaginationChange = jest.fn();
const noop = () => {};
const wrapper = mount(
const { container } = render(
createTable({
pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop },
onChange: handleChange,
}),
);
wrapper.find('Pager').last().simulate('click');
fireEvent.click(container.querySelector('.ant-pagination-next'));
expect(handleChange).toHaveBeenCalledWith(
{
@ -178,50 +188,56 @@ describe('Table.pagination', () => {
// https://github.com/ant-design/ant-design/issues/4532
// https://codepen.io/afc163/pen/dVeNoP?editors=001
it('should have pager when change pagination from false to undefined', () => {
const wrapper = mount(createTable({ pagination: false }));
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: undefined });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item-active')).toHaveLength(1);
const { container, rerender } = render(createTable({ pagination: false }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createTable({ pagination: undefined }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(container.querySelectorAll('.ant-pagination-item-active')).toHaveLength(1);
});
// 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(createTable());
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');
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
wrapper.setProps({ pagination: false });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: undefined });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-pagination-item')).toHaveLength(2);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
const { container, rerender } = render(createTable());
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
rerender(createTable({ pagination: false }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createTable({ pagination }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
fireEvent.click(container.querySelector('.ant-pagination-item-2'));
expect(renderedNames(container)).toEqual(['Tom', 'Jerry']);
rerender(createTable({ pagination: false }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createTable({ pagination: undefined }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
expect(renderedNames(container)).toEqual(['Tom', 'Jerry']);
});
// https://github.com/ant-design/ant-design/issues/5259
it('change to correct page when data source changes', () => {
const wrapper = mount(createTable({ 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, rerender } = render(createTable({ pagination: { pageSize: 1 } }));
fireEvent.click(container.querySelector('.ant-pagination-item-3'));
rerender(createTable({ dataSource: [data[0]] }));
expect(
container
.querySelector('.ant-pagination-item-1')
.className.includes('ant-pagination-item-active'),
).toBe(true);
});
// https://github.com/ant-design/ant-design/issues/24913
it('should called onChange when pageSize change', () => {
const onChange = jest.fn();
const onShowSizeChange = jest.fn();
const wrapper = mount(
const { container } = render(
createTable({
pagination: {
current: 1,
@ -232,28 +248,34 @@ describe('Table.pagination', () => {
},
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
wrapper.find('.ant-select-item-option').at(1).simulate('click');
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
expect(onChange).toHaveBeenCalledWith(1, 20);
});
it('should not change page when pagination current is specified', () => {
const wrapper = mount(createTable({ pagination: { current: 2, pageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active')).toBe(
true,
);
wrapper.find('.ant-pagination-item-3').simulate('click');
expect(wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active')).toBe(
true,
);
const { container } = render(createTable({ pagination: { current: 2, pageSize: 1 } }));
expect(
container
.querySelector('.ant-pagination-item-2')
.className.includes('ant-pagination-item-active'),
).toBe(true);
fireEvent.click(container.querySelector('.ant-pagination-item-3'));
expect(
container
.querySelector('.ant-pagination-item-2')
.className.includes('ant-pagination-item-active'),
).toBe(true);
});
// https://github.com/ant-design/ant-design/issues/29175
it('should change page to max page count when pageSize change without pagination.total', () => {
const onChange = jest.fn();
const onShowSizeChange = jest.fn();
const wrapper = mount(
const { container } = render(
createTable({
pagination: {
current: 10,
@ -264,10 +286,13 @@ describe('Table.pagination', () => {
dataSource: longData,
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
wrapper.find('.ant-select-item-option').at(1).simulate('click');
const newPageSize = parseInt(wrapper.find('.ant-select-item-option').at(1).text(), 10);
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
const newPageSize = parseInt(
container.querySelectorAll('.ant-select-item-option')[1].textContent,
10,
);
expect(onChange).toHaveBeenCalledWith(longData.length / newPageSize, 20);
});
@ -275,7 +300,7 @@ describe('Table.pagination', () => {
const onChange = jest.fn();
const onShowSizeChange = jest.fn();
const total = 20000;
const wrapper = mount(
const { container } = render(
createTable({
pagination: {
current: total / 10,
@ -287,10 +312,14 @@ describe('Table.pagination', () => {
dataSource: longData,
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
wrapper.find('.ant-select-item-option').at(1).simulate('click');
const newPageSize = parseInt(wrapper.find('.ant-select-item-option').at(1).text(), 10);
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
const newPageSize = parseInt(
container.querySelectorAll('.ant-select-item-option')[1].textContent,
10,
);
expect(onChange).toHaveBeenCalledWith(total / newPageSize, 20);
});
@ -298,7 +327,7 @@ describe('Table.pagination', () => {
it('should not change page to max page if current is not greater max page when pageSize change', () => {
const onChange = jest.fn();
const onShowSizeChange = jest.fn();
const wrapper = mount(
const { container } = render(
createTable({
pagination: {
current: 4,
@ -309,15 +338,15 @@ describe('Table.pagination', () => {
dataSource: longData,
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
wrapper.find('.ant-select-item-option').at(1).simulate('click');
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
expect(onChange).toHaveBeenCalledWith(4, 20);
});
it('should reset current to max page when data length is cut', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container, rerender } = render(
createTable({
pagination: {
current: 10,
@ -327,30 +356,59 @@ describe('Table.pagination', () => {
dataSource: longData,
}),
);
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('10');
wrapper.setProps({
dataSource: longData.filter(item => item.key < 60),
});
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('6');
expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('10');
rerender(
createTable({
pagination: {
current: 10,
pageSize: 10,
onChange,
},
dataSource: longData.filter(item => item.key < 60),
}),
);
expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('6');
});
it('specify the position of pagination', () => {
const wrapper = mount(createTable({ pagination: { position: ['topLeft'] } }));
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: ['bottomRight'] } });
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
expect(wrapper.find('.ant-spin-container').childAt(1).find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: ['topLeft', 'bottomRight'] } });
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(3);
expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1);
expect(wrapper.find('.ant-spin-container').childAt(2).find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: ['none', 'none'] } });
expect(wrapper.find('.ant-pagination')).toHaveLength(0);
wrapper.setProps({ pagination: { position: ['invalid'] } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
wrapper.setProps({ pagination: { position: ['invalid', 'invalid'] } });
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
const { container, rerender } = render(createTable({ pagination: { position: ['topLeft'] } }));
expect(container.querySelector('.ant-spin-container').children).toHaveLength(2);
expect(
container
.querySelector('.ant-spin-container')
.children[0].className.includes('ant-pagination'),
).toBe(true);
rerender(createTable({ pagination: { position: ['bottomRight'] } }));
expect(container.querySelector('.ant-spin-container').children).toHaveLength(2);
expect(
container
.querySelector('.ant-spin-container')
.children[1].className.includes('ant-pagination'),
).toBe(true);
rerender(createTable({ pagination: { position: ['topLeft', 'bottomRight'] } }));
expect(container.querySelector('.ant-spin-container').children).toHaveLength(3);
expect(
container
.querySelector('.ant-spin-container')
.children[0].className.includes('ant-pagination'),
).toBe(true);
expect(
container
.querySelector('.ant-spin-container')
.children[2].className.includes('ant-pagination'),
).toBe(true);
rerender(createTable({ pagination: { position: ['none', 'none'] } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0);
rerender(createTable({ pagination: { position: ['invalid'] } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
rerender(createTable({ pagination: { position: ['invalid', 'invalid'] } }));
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
});
/**
@ -358,15 +416,15 @@ describe('Table.pagination', () => {
* to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
*/
it('Accepts pagination as true', () => {
const wrapper = mount(createTable({ pagination: true }));
expect(wrapper.render()).toMatchSnapshot();
const { asFragment } = render(createTable({ pagination: true }));
expect(asFragment().firstChild).toMatchSnapshot();
});
it('ajax render should keep display by the dataSource', () => {
const onChange = jest.fn();
const onPaginationChange = jest.fn();
const wrapper = mount(
const { container } = render(
createTable({
onChange,
pagination: {
@ -376,9 +434,11 @@ describe('Table.pagination', () => {
}),
);
expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length);
expect(container.querySelectorAll('.ant-table-tbody tr.ant-table-row')).toHaveLength(
data.length,
);
wrapper.find('.ant-pagination .ant-pagination-item-2').simulate('click');
fireEvent.click(container.querySelector('.ant-pagination .ant-pagination-item-2'));
expect(onChange.mock.calls[0][0].current).toBe(2);
expect(onChange).toHaveBeenCalledWith(
{ current: 2, pageSize: 10, total: 200 },
@ -396,14 +456,16 @@ describe('Table.pagination', () => {
);
expect(onPaginationChange).toHaveBeenCalledWith(2, 10);
expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length);
expect(container.querySelectorAll('.ant-table-tbody tr.ant-table-row')).toHaveLength(
data.length,
);
});
it('onShowSizeChange should trigger once', () => {
jest.useFakeTimers();
const onShowSizeChange = jest.fn();
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
createTable({
pagination: {
total: 200,
@ -413,11 +475,14 @@ describe('Table.pagination', () => {
onChange,
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
jest.runAllTimers();
const dropdownWrapper = wrapper.find('Trigger');
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
dropdownWrapper.find('.ant-select-item-option').at(3).simulate('click');
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
// resolve Warning: An update to Align ran an effect, but was not wrapped in act(...)
act(() => {
jest.runAllTimers();
});
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[3]);
expect(onShowSizeChange).toHaveBeenCalledTimes(1);
expect(onShowSizeChange).toHaveBeenLastCalledWith(1, 100);
expect(onChange).toHaveBeenCalled();
@ -425,44 +490,47 @@ describe('Table.pagination', () => {
});
it('should support current in pagination', () => {
const wrapper = mount(createTable({ pagination: { current: 2, pageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('2');
const { container } = render(createTable({ pagination: { current: 2, pageSize: 1 } }));
expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('2');
});
it('should support defaultCurrent in pagination', () => {
const wrapper = mount(createTable({ pagination: { defaultCurrent: 2, pageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('2');
const { container } = render(createTable({ pagination: { defaultCurrent: 2, pageSize: 1 } }));
expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('2');
});
it('should support defaultPageSize in pagination', () => {
const wrapper = mount(createTable({ pagination: { defaultPageSize: 1 } }));
expect(wrapper.find('.ant-pagination-item')).toHaveLength(4);
const { container } = render(createTable({ pagination: { defaultPageSize: 1 } }));
expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(4);
});
// https://github.com/ant-design/ant-design/issues/19957
it('ajax should work with pagination', () => {
const wrapper = mount(createTable({ pagination: { total: 100 } }));
wrapper.find('.ant-pagination-item-2').simulate('click');
wrapper.setProps({ pagination: { current: 2, total: 100 } });
const { container, rerender } = render(createTable({ pagination: { total: 100 } }));
fireEvent.click(container.querySelector('.ant-pagination-item-2'));
rerender(createTable({ pagination: { current: 2, total: 100 } }));
expect(
wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active'),
container
.querySelector('.ant-pagination-item-2')
.className.includes('ant-pagination-item-active'),
).toBeTruthy();
});
it('pagination should ignore invalidate total', () => {
const wrapper = mount(createTable({ pagination: { total: null } }));
expect(wrapper.find('.ant-pagination-item-1').length).toBeTruthy();
const { container } = render(createTable({ pagination: { total: null } }));
expect(container.querySelectorAll('.ant-pagination-item-1').length).toBeTruthy();
});
it('renders pagination topLeft and bottomRight', () => {
const wrapper = mount(createTable({ pagination: ['topLeft', 'bottomRight'] }));
expect(wrapper.render()).toMatchSnapshot();
const { asFragment } = render(createTable({ pagination: ['topLeft', 'bottomRight'] }));
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should call onChange when change pagination size', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
createTable({
pagination: {
total: 200,
@ -471,10 +539,8 @@ describe('Table.pagination', () => {
onChange,
}),
);
wrapper.find('.ant-select-selector').simulate('mousedown');
const dropdownWrapper = wrapper.find('Trigger');
dropdownWrapper.find('.ant-select-item-option').at(2).simulate('click');
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[2]);
expect(onChange).toBeCalledTimes(1);
});
@ -490,14 +556,14 @@ describe('Table.pagination', () => {
});
}
const wrapper = mount(
const { container } = render(
createTable({
dataSource: dynamicData,
pagination: { total: 100, pageSize: 10, current: 2 },
}),
);
expect(wrapper.find('tbody tr')).toHaveLength(5);
expect(container.querySelectorAll('tbody tr')).toHaveLength(5);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Table] `dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.',
@ -512,17 +578,19 @@ describe('Table.pagination', () => {
current: total,
position: ['topLeft', 'bottomLeft'],
};
const wrapper = mount(
const { container, rerender } = render(
createTable({
pagination: paginationProp,
}),
);
rerender(
createTable({
dataSource: data.slice(total - 1),
pagination: { ...paginationProp, total: total - 1 },
}),
);
wrapper.setProps({
dataSource: data.slice(total - 1),
pagination: { ...paginationProp, total: total - 1 },
});
expect(wrapper.find('.ant-pagination')).toHaveLength(2);
expect(container.querySelectorAll('.ant-pagination')).toHaveLength(2);
});
it('showTotal should hide when removed', () => {
@ -549,16 +617,16 @@ describe('Table.pagination', () => {
);
};
const wrapper = mount(<Demo />);
expect(wrapper.find('.ant-pagination-total-text').text()).toEqual('>200<');
const { container } = render(<Demo />);
expect(container.querySelector('.ant-pagination-total-text').textContent).toEqual('>200<');
// Should hide
wrapper.find('.ant-pagination-item-2').simulate('click');
expect(wrapper.find('.ant-pagination-total-text')).toHaveLength(0);
fireEvent.click(container.querySelector('.ant-pagination-item-2'));
expect(container.querySelectorAll('.ant-pagination-total-text')).toHaveLength(0);
});
it('should preserve table pagination className', () => {
const wrapper = mount(
const { container } = render(
<Table
data={[]}
columns={[]}
@ -570,7 +638,7 @@ describe('Table.pagination', () => {
}}
/>,
);
expect(wrapper.find('.ant-pagination').prop('className')).toEqual(
expect(container.querySelector('.ant-pagination').className).toEqual(
'ant-pagination ant-table-pagination ant-table-pagination-right pagination',
);
});

514
components/table/__tests__/Table.sorter.test.js
View File

@ -1,6 +1,6 @@
/* eslint-disable react/no-multi-comp */
import React from 'react';
import { render, mount } from 'enzyme';
import { render, fireEvent, act } from '../../../tests/utils';
import Table from '..';
describe('Table.sorter', () => {
@ -20,7 +20,7 @@ describe('Table.sorter', () => {
{ key: 3, name: 'Jerry' },
];
function createTable(tableProps, columnProps = {}) {
function createTable(tableProps = {}, columnProps = {}) {
return (
<Table
columns={[
@ -36,17 +36,24 @@ describe('Table.sorter', () => {
);
}
function renderedNames(wrapper) {
return wrapper.find('BodyRow').map(row => row.props().record.name);
function renderedNames(contain) {
const namesList = [];
contain
.querySelector('.ant-table-tbody')
.querySelectorAll('tr')
.forEach(tr => {
namesList.push(tr.querySelector('td').textContent);
});
return namesList;
}
it('renders sorter icon correctly', () => {
const wrapper = render(createTable());
expect(wrapper.find('thead')).toMatchSnapshot();
const { container } = render(createTable());
expect(container.querySelector('thead')).toMatchSnapshot();
});
it('default sort order ascend', () => {
const wrapper = mount(
const { container } = render(
createTable(
{},
{
@ -55,11 +62,11 @@ describe('Table.sorter', () => {
),
);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
});
it('default sort order descend', () => {
const wrapper = mount(
const { container } = render(
createTable(
{},
{
@ -68,14 +75,12 @@ describe('Table.sorter', () => {
),
);
const getNameColumn = () => wrapper.find('th').at(0);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(container.querySelector('th').getAttribute('aria-sort')).toEqual('descending');
});
it('should change aria-sort when default sort order is set to descend', () => {
const wrapper = mount(
const { container } = render(
createTable(
{
sortDirections: ['descend', 'ascend'],
@ -86,63 +91,62 @@ describe('Table.sorter', () => {
),
);
const getNameColumn = () => wrapper.find('th').at(0);
const getNameColumn = () => container.querySelector('th');
// Test that it cycles through the order of sortDirections
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
wrapper.find('.ant-table-column-sorters').simulate('click');
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
wrapper.find('.ant-table-column-sorters').simulate('click');
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
it('sort records', () => {
const wrapper = mount(createTable());
const getNameColumn = () => wrapper.find('th').at(0);
const { container } = render(createTable());
const getNameColumn = () => container.querySelector('th');
// first assert default state
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
// ascend
wrapper.find('.ant-table-column-sorters').simulate('click');
expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
// descend
wrapper.find('.ant-table-column-sorters').simulate('click');
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
});
it('sort records with keydown', () => {
const wrapper = mount(createTable());
const { container } = render(createTable());
// ascend
wrapper.find('.ant-table-column-sorters').simulate('keydown', { keyCode: 13 });
expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
fireEvent.keyDown(container.querySelector('.ant-table-column-sorters'), { keyCode: 13 });
expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
// descend
wrapper.find('.ant-table-column-sorters').simulate('keydown', { keyCode: 13 });
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
fireEvent.keyDown(container.querySelector('.ant-table-column-sorters'), { keyCode: 13 });
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
});
describe('can be controlled by sortOrder', () => {
it('single', () => {
const wrapper = mount(
const { container } = render(
createTable({
columns: [{ ...column, sortOrder: 'ascend' }],
}),
);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
});
it('invalidate mix with single & multiple sorters', () => {
const wrapper = mount(
const { container } = render(
createTable({
columns: [
{
@ -163,13 +167,13 @@ describe('Table.sorter', () => {
}),
);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
});
});
it('provides sortOrder in the sorterFn', () => {
let actualSortOrder;
mount(
render(
createTable(
{},
{
@ -185,39 +189,40 @@ describe('Table.sorter', () => {
});
it('can update column sortOrder', () => {
const wrapper = mount(
const { container, rerender } = render(
createTable({
columns: [column],
}),
);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
wrapper.setProps({
columns: [{ ...column, sortOrder: 'ascend' }],
});
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
rerender(
createTable({
columns: [{ ...column, sortOrder: 'ascend' }],
}),
);
expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
});
it('fires change event', () => {
const handleChange = jest.fn();
const wrapper = mount(createTable({ onChange: handleChange }));
const { container } = render(createTable({ onChange: handleChange }));
// ascent
wrapper.find('.ant-table-column-sorters').simulate('click');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
const sorter1 = handleChange.mock.calls[0][2];
expect(sorter1.column.dataIndex).toBe('name');
expect(sorter1.order).toBe('ascend');
expect(sorter1.field).toBe('name');
expect(sorter1.columnKey).toBe('name');
wrapper.find('.ant-table-column-sorters').simulate('click');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
const sorter2 = handleChange.mock.calls[1][2];
expect(sorter2.column.dataIndex).toBe('name');
expect(sorter2.order).toBe('descend');
expect(sorter2.field).toBe('name');
expect(sorter2.columnKey).toBe('name');
wrapper.find('.ant-table-column-sorters').simulate('click');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
const sorter3 = handleChange.mock.calls[2][2];
expect(sorter3.column).toBe(undefined);
expect(sorter3.order).toBe(undefined);
@ -228,71 +233,98 @@ describe('Table.sorter', () => {
it('hover header show sorter tooltip', () => {
// tooltip has delay
jest.useFakeTimers();
const wrapper = mount(createTable({}));
const { container, rerender } = render(createTable());
// default show sorter tooltip
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
act(() => {
jest.runAllTimers();
});
expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
// set table props showSorterTooltip is false
wrapper.setProps({ showSorterTooltip: false });
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
rerender(createTable({ showSorterTooltip: false }));
fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
act(() => {
jest.runAllTimers();
});
expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
// set table props showSorterTooltip is false, column showSorterTooltip is true
wrapper.setProps({
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
rerender(
createTable({ showSorterTooltip: true, columns: [{ ...column, showSorterTooltip: true }] }),
);
fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
act(() => {
jest.runAllTimers();
});
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
// set table props showSorterTooltip is true, column showSorterTooltip is false
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
rerender(
createTable({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
}),
);
fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
act(() => {
jest.runAllTimers();
});
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
});
it('should show correct tooltip when showSorterTooltip is an object', () => {
// basically copied from 'hover header show sorter tooltip'
jest.useFakeTimers();
const wrapper = mount(
const { container, rerender } = render(
createTable({ showSorterTooltip: { placement: 'bottom', title: 'static title' } }),
);
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.setProps({ showSorterTooltip: false });
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
wrapper.setProps({
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
act(() => {
jest.runAllTimers();
});
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
// Root to false
rerender(createTable({ showSorterTooltip: false }));
act(() => {
jest.runAllTimers();
});
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
// Column to true
rerender(
createTable({
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
}),
);
fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
act(() => {
jest.runAllTimers();
});
expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
// Column to false
rerender(
createTable({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
}),
);
act(() => {
jest.runAllTimers();
});
expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
});
it('works with grouping columns in controlled mode', () => {
@ -322,9 +354,9 @@ describe('Table.sorter', () => {
{ key: 2, name: 'Tom', age: 21 },
{ key: 3, name: 'Jerry', age: 22 },
];
const wrapper = mount(<Table columns={columns} dataSource={testData} />);
const { container } = render(<Table columns={columns} dataSource={testData} />);
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
});
// https://github.com/ant-design/ant-design/issues/11246#issuecomment-405009167
@ -343,12 +375,12 @@ describe('Table.sorter', () => {
{ key: 2, name: 'Tom', age: 21 },
{ key: 3, name: 'Jerry', age: 22 },
];
const wrapper = mount(<Table columns={columns} dataSource={testData} />);
expect(wrapper.find('.custom-title').text()).toEqual('');
wrapper.find('.ant-table-column-sorters').simulate('click');
expect(wrapper.find('.custom-title').text()).toEqual('ascend');
wrapper.find('.ant-table-column-sorters').simulate('click');
expect(wrapper.find('.custom-title').text()).toEqual('descend');
const { container } = render(<Table columns={columns} dataSource={testData} />);
expect(container.querySelector('.custom-title').textContent).toEqual('');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
expect(container.querySelector('.custom-title').textContent).toEqual('ascend');
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
expect(container.querySelector('.custom-title').textContent).toEqual('descend');
});
// https://github.com/ant-design/ant-design/pull/12264#discussion_r218053034
@ -371,26 +403,26 @@ describe('Table.sorter', () => {
{ key: 2, name: 'Tom', age: 21 },
{ key: 3, name: 'Jerry', age: 22 },
];
const wrapper = mount(<Table columns={columns} dataSource={testData} />);
const { container } = render(<Table columns={columns} dataSource={testData} />);
const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
const getAgeColumn = () => wrapper.find('.ant-table-column-has-sorters').at(1);
const getNameIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
const getAgeIcon = name => getAgeColumn().find(`.ant-table-column-sorter-${name}`).first();
const getNameColumn = () => container.querySelectorAll('.ant-table-column-has-sorters')[0];
const getAgeColumn = () => container.querySelectorAll('.ant-table-column-has-sorters')[1];
const getNameIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`);
const getAgeIcon = name => getAgeColumn().querySelector(`.ant-table-column-sorter-${name}`);
// sort name
getNameColumn().simulate('click');
expect(getNameIcon('up').hasClass('active')).toBeTruthy();
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
expect(getAgeIcon('up').hasClass('active')).toBeFalsy();
expect(getAgeColumn().prop('aria-sort')).toEqual(undefined);
fireEvent.click(getNameColumn());
expect(getNameIcon('up').className.includes('active')).toBeTruthy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
expect(getAgeIcon('up').className.includes('active')).toBeFalsy();
expect(getAgeColumn().getAttribute('aria-sort')).toEqual(null);
// sort age
getAgeColumn().simulate('click');
expect(getNameIcon('up').hasClass('active')).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
expect(getAgeIcon('up').hasClass('active')).toBeTruthy();
expect(getAgeColumn().prop('aria-sort')).toEqual('ascending');
fireEvent.click(getAgeColumn());
expect(getNameIcon('up').className.includes('active')).toBeFalsy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
expect(getAgeIcon('up').className.includes('active')).toBeTruthy();
expect(getAgeColumn().getAttribute('aria-sort')).toEqual('ascending');
});
// https://github.com/ant-design/ant-design/issues/12571
@ -430,31 +462,31 @@ describe('Table.sorter', () => {
}
}
const wrapper = mount(<TableTest />);
const { container } = render(<TableTest />);
const getNameColumn = () => wrapper.find('th').at(0);
const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
const getNameColumn = () => container.querySelector('th');
const getIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`);
expect(getIcon('up').hasClass('active')).toBeFalsy();
expect(getIcon('down').hasClass('active')).toBeFalsy();
expect(getIcon('up').className.includes('active')).toBeFalsy();
expect(getIcon('down').className.includes('active')).toBeFalsy();
// sort name
getNameColumn().simulate('click');
expect(getIcon('up').hasClass('active')).toBeTruthy();
expect(getIcon('down').hasClass('active')).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
fireEvent.click(getNameColumn());
expect(getIcon('up').className.includes('active')).toBeTruthy();
expect(getIcon('down').className.includes('active')).toBeFalsy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
// sort name
getNameColumn().simulate('click');
expect(getIcon('up').hasClass('active')).toBeFalsy();
expect(getIcon('down').hasClass('active')).toBeTruthy();
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
fireEvent.click(getNameColumn());
expect(getIcon('up').className.includes('active')).toBeFalsy();
expect(getIcon('down').className.includes('active')).toBeTruthy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
// sort name
getNameColumn().simulate('click');
expect(getIcon('up').hasClass('active')).toBeFalsy();
expect(getIcon('down').hasClass('active')).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
fireEvent.click(getNameColumn());
expect(getIcon('up').className.includes('active')).toBeFalsy();
expect(getIcon('down').className.includes('active')).toBeFalsy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
// https://github.com/ant-design/ant-design/issues/12737
@ -497,31 +529,31 @@ describe('Table.sorter', () => {
}
}
const wrapper = mount(<TableTest />);
const { container } = render(<TableTest />);
const getNameColumn = () => wrapper.find('th').at(0);
const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
const getNameColumn = () => container.querySelector('th');
const getIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`);
expect(getIcon('up').hasClass('active')).toBeFalsy();
expect(getIcon('down').hasClass('active')).toBeFalsy();
expect(getIcon('up').className.includes('active')).toBeFalsy();
expect(getIcon('down').className.includes('active')).toBeFalsy();
// sort name
getNameColumn().simulate('click');
expect(getIcon('up').hasClass('active')).toBeTruthy();
expect(getIcon('down').hasClass('active')).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
fireEvent.click(getNameColumn());
expect(getIcon('up').className.includes('active')).toBeTruthy();
expect(getIcon('down').className.includes('active')).toBeFalsy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
// sort name
getNameColumn().simulate('click');
expect(getIcon('up').hasClass('active')).toBeFalsy();
expect(getIcon('down').hasClass('active')).toBeTruthy();
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
fireEvent.click(getNameColumn());
expect(getIcon('up').className.includes('active')).toBeFalsy();
expect(getIcon('down').className.includes('active')).toBeTruthy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
// sort name
getNameColumn().simulate('click');
expect(getIcon('up').hasClass('active')).toBeFalsy();
expect(getIcon('down').hasClass('active')).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
fireEvent.click(getNameColumn());
expect(getIcon('up').className.includes('active')).toBeFalsy();
expect(getIcon('down').className.includes('active')).toBeFalsy();
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
// https://github.com/ant-design/ant-design/issues/12870
@ -565,96 +597,96 @@ describe('Table.sorter', () => {
}
}
const wrapper = mount(<TableTest />);
const getNameColumn = () => wrapper.find('th').at(0);
const { container } = render(<TableTest />);
const getNameColumn = () => container.querySelector('th');
expect(
getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
).toBeFalsy();
expect(
getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
// sort name
getNameColumn().simulate('click');
fireEvent.click(getNameColumn());
expect(
getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
).toBeTruthy();
expect(
getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
// sort name
getNameColumn().simulate('click');
fireEvent.click(getNameColumn());
expect(
getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
).toBeFalsy();
expect(
getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
).toBeTruthy();
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
// sort name
getNameColumn().simulate('click');
fireEvent.click(getNameColumn());
expect(
getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
).toBeFalsy();
expect(
getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
).toBeFalsy();
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
it('should first sort by descend, then ascend, then cancel sort', () => {
const wrapper = mount(
const { container } = render(
createTable({
sortDirections: ['descend', 'ascend'],
}),
);
const getNameColumn = () => wrapper.find('th').at(0);
const getNameColumn = () => container.querySelector('th');
// descend
getNameColumn().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
fireEvent.click(getNameColumn());
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
// ascend
getNameColumn().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
fireEvent.click(getNameColumn());
expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
// cancel sort
getNameColumn().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
fireEvent.click(getNameColumn());
expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
it('should first sort by descend, then cancel sort', () => {
const wrapper = mount(
const { container } = render(
createTable({
sortDirections: ['descend'],
}),
);
const getNameColumn = () => wrapper.find('th').at(0);
const getNameColumn = () => container.querySelector('th');
// default
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
// descend
getNameColumn().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
fireEvent.click(getNameColumn());
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
// cancel sort
getNameColumn().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
fireEvent.click(getNameColumn());
expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
it('should first sort by descend, then cancel sort. (column prop)', () => {
const wrapper = mount(
const { container } = render(
createTable(
{},
{
@ -663,27 +695,27 @@ describe('Table.sorter', () => {
),
);
const getNameColumn = () => wrapper.find('th').at(0);
const getNameColumn = () => container.querySelector('th');
// default
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
// descend
getNameColumn().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual('descending');
fireEvent.click(getNameColumn());
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
// cancel sort
getNameColumn().simulate('click');
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
fireEvent.click(getNameColumn());
expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
it('pagination back', () => {
const onPageChange = jest.fn();
const onChange = jest.fn();
const wrapper = mount(
const { container } = render(
createTable({
pagination: {
pageSize: 2,
@ -694,27 +726,27 @@ describe('Table.sorter', () => {
}),
);
const getNameColumn = () => wrapper.find('th').at(0);
const getNameColumn = () => container.querySelector('th');
expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
getNameColumn().simulate('click');
fireEvent.click(getNameColumn());
expect(onChange.mock.calls[0][0].current).toBe(2);
expect(onPageChange).not.toHaveBeenCalled();
expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
});
it('should support onHeaderCell in sort column', () => {
const onClick = jest.fn();
const wrapper = mount(
const { container } = render(
<Table columns={[{ title: 'title', onHeaderCell: () => ({ onClick }), sorter: true }]} />,
);
wrapper.find('th').simulate('click');
fireEvent.click(container.querySelector('th'));
expect(onClick).toHaveBeenCalled();
});
it('could sort data with children', () => {
const wrapper = mount(
const { container } = render(
createTable(
{
defaultExpandAllRows: true,
@ -755,7 +787,7 @@ describe('Table.sorter', () => {
),
);
expect(renderedNames(wrapper)).toEqual(['Brown', 'Green', 'Mike', 'Alex', 'Petter', 'Zoe']);
expect(renderedNames(container)).toEqual(['Brown', 'Green', 'Mike', 'Alex', 'Petter', 'Zoe']);
});
// https://github.com/ant-design/ant-design/issues/19443
@ -774,22 +806,22 @@ describe('Table.sorter', () => {
}
}
expect(() => {
mount(<Demo />);
render(<Demo />);
}).not.toThrow();
});
it('should support defaultOrder in Column', () => {
const wrapper = mount(
const { asFragment } = render(
<Table dataSource={[{ key: '1', age: 1 }]}>
<Table.Column title="Age" dataIndex="age" sorter defaultSortOrder="ascend" key="age" />
</Table>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(asFragment().firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/20096
it('invalidate sorter should not display sorter button', () => {
const wrapper = mount(
const { container } = render(
<Table
columns={[
{
@ -814,12 +846,12 @@ describe('Table.sorter', () => {
/>,
);
expect(wrapper.find('.ant-table-column-sorter-inner')).toHaveLength(0);
expect(container.querySelectorAll('.ant-table-column-sorter-inner')).toHaveLength(0);
});
// https://github.com/ant-design/ant-design/issues/21193
it('table with sugar column', () => {
const wrapper = mount(
const { container } = render(
<Table>
<Table.Column
title="Chinese Score"
@ -840,20 +872,24 @@ describe('Table.sorter', () => {
</Table>,
);
wrapper.find('th').first().simulate('click');
fireEvent.click(container.querySelector('th'));
expect(wrapper.find('th.ant-table-column-sort')).toHaveLength(1);
expect(container.querySelectorAll('th.ant-table-column-sort')).toHaveLength(1);
});
it('surger should support sorterOrder', () => {
const wrapper = mount(
const { container } = render(
<Table>
<Table.Column key="name" title="Name" dataIndex="name" sortOrder="ascend" sorter />
</Table>,
);
expect(wrapper.find('.ant-table-column-sorter-up').last().hasClass('active')).toBeTruthy();
expect(wrapper.find('.ant-table-column-sorter-down').last().hasClass('active')).toBeFalsy();
expect(
container.querySelector('.ant-table-column-sorter-up').className.includes('active'),
).toBeTruthy();
expect(
container.querySelector('.ant-table-column-sorter-down').className.includes('active'),
).toBeFalsy();
});
it('controlled multiple group', () => {
@ -888,23 +924,19 @@ describe('Table.sorter', () => {
},
];
const wrapper = mount(<Table columns={groupColumns} data={groupData} />);
wrapper.update();
const { container } = render(<Table columns={groupColumns} data={groupData} />);
expect(
wrapper
.find('.ant-table-column-sorter-full')
.first()
.find('.ant-table-column-sorter-up')
.first()
.hasClass('active'),
container
.querySelectorAll('.ant-table-column-sorter-full')[0]
.querySelector('.ant-table-column-sorter-up')
.className.includes('active'),
).toBeTruthy();
expect(
wrapper
.find('.ant-table-column-sorter-full')
.last()
.find('.ant-table-column-sorter-down')
.first()
.hasClass('active'),
container
.querySelectorAll('.ant-table-column-sorter-full')[1]
.querySelector('.ant-table-column-sorter-down')
.className.includes('active'),
).toBeTruthy();
});
@ -933,10 +965,12 @@ describe('Table.sorter', () => {
];
const onChange = jest.fn();
const wrapper = mount(<Table columns={groupColumns} data={groupData} onChange={onChange} />);
const { container } = render(
<Table columns={groupColumns} data={groupData} onChange={onChange} />,
);
function clickToMatchExpect(index, sorter) {
wrapper.find('.ant-table-column-sorters').at(index).simulate('click');
fireEvent.click(container.querySelectorAll('.ant-table-column-sorters')[index]);
expect(onChange).toHaveBeenCalledWith(
expect.anything(),

79
components/table/__tests__/Table.test.js
View File

@ -1,9 +1,8 @@
import React from 'react';
import { mount } from 'enzyme';
import Table from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { sleep, render } from '../../../tests/utils';
import { sleep, render, fireEvent } from '../../../tests/utils';
const { Column, ColumnGroup } = Table;
@ -33,7 +32,7 @@ describe('Table', () => {
},
];
const wrapper = mount(
const { asFragment } = render(
<Table dataSource={data} pagination={false}>
<ColumnGroup title="Name">
<Column title="First Name" dataIndex="firstName" key="firstName" />
@ -45,7 +44,7 @@ describe('Table', () => {
</Table>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(asFragment().firstChild).toMatchSnapshot();
});
it('updates columns when receiving props', () => {
@ -56,7 +55,8 @@ describe('Table', () => {
dataIndex: 'name',
},
];
const wrapper = mount(<Table columns={columns} />);
const { container, rerender } = render(<Table columns={columns} />);
const newColumns = [
{
title: 'Title',
@ -64,9 +64,8 @@ describe('Table', () => {
dataIndex: 'title',
},
];
wrapper.setProps({ columns: newColumns });
expect(wrapper.find('th').text()).toEqual('Title');
rerender(<Table columns={newColumns} />);
expect(container.querySelector('th').textContent).toEqual('Title');
});
it('loading with Spin', async () => {
@ -74,32 +73,34 @@ describe('Table', () => {
spinning: false,
delay: 500,
};
const wrapper = mount(<Table loading={loading} />);
expect(wrapper.find('.ant-spin')).toHaveLength(0);
expect(wrapper.find('.ant-table-placeholder').hostNodes().text()).not.toEqual('');
const { container, rerender } = render(<Table loading={loading} />);
expect(container.querySelectorAll('.ant-spin')).toHaveLength(0);
expect(container.querySelector('.ant-table-placeholder').textContent).not.toEqual('');
loading.spinning = true;
wrapper.setProps({ loading });
expect(wrapper.find('.ant-spin')).toHaveLength(0);
rerender(<Table loading={loading} />);
expect(container.querySelectorAll('.ant-spin')).toHaveLength(0);
await sleep(500);
wrapper.update();
expect(wrapper.find('.ant-spin')).toHaveLength(1);
rerender(<Table loading />);
expect(container.querySelectorAll('.ant-spin')).toHaveLength(1);
});
// https://github.com/ant-design/ant-design/issues/22733
it('support loading tip', async () => {
const wrapper = mount(<Table loading={{ tip: 'loading...' }} />);
const { container, rerender } = render(<Table loading={{ tip: 'loading...' }} />);
await sleep(500);
wrapper.update();
expect(wrapper.find('.ant-spin')).toHaveLength(1);
rerender(<Table loading={{ tip: 'loading...', loading: true }} />);
expect(container.querySelectorAll('.ant-spin')).toHaveLength(1);
});
it('renders custom components correctly when it changes', () => {
const BodyWrapper1 = props => <tbody id="wrapper1" {...props} />;
const BodyWrapper2 = props => <tbody id="wrapper2" {...props} />;
const wrapper = mount(<Table components={{ body: { wrapper: BodyWrapper1 } }} />);
wrapper.setProps({ components: { body: { wrapper: BodyWrapper2 } } });
expect(wrapper.find('tbody').props().id).toBe('wrapper2');
const { container, rerender } = render(
<Table components={{ body: { wrapper: BodyWrapper1 } }} />,
);
rerender(<Table components={{ body: { wrapper: BodyWrapper2 } }} />);
expect(container.querySelector('tbody').id).toBe('wrapper2');
});
it('props#columnsPageRange and props#columnsPageSize do not warn anymore', () => {
@ -118,7 +119,7 @@ describe('Table', () => {
const columnsPageRange = jest.fn();
const columnsPageSize = jest.fn();
mount(
render(
<Table
dataSource={data}
rowkey="key"
@ -139,15 +140,15 @@ describe('Table', () => {
it('support onHeaderCell', () => {
const onClick = jest.fn();
const wrapper = mount(
const { container } = render(
<Table columns={[{ title: 'title', onHeaderCell: () => ({ onClick }) }]} />,
);
wrapper.find('th').simulate('click');
fireEvent.click(container.querySelector('th'));
expect(onClick).toHaveBeenCalled();
});
it('should not crash when column children is empty', () => {
mount(
render(
<Table
columns={[
{
@ -161,7 +162,7 @@ describe('Table', () => {
});
it('should not crash when dataSource is array with none-object items', () => {
mount(
render(
<Table
columns={[
{
@ -174,7 +175,9 @@ describe('Table', () => {
});
it('prevent touch event', () => {
const wrapper = mount(
// prevent touch event, 原来的用例感觉是少了 touchmove 调用判断
const touchmove = jest.fn();
const { container } = render(
<Table
columns={[
{
@ -185,7 +188,8 @@ describe('Table', () => {
dataSource={[]}
/>,
);
wrapper.simulate('touchmove');
fireEvent.touchMove(container.querySelector('.ant-table'));
expect(touchmove).not.toHaveBeenCalled();
});
it('renders ellipsis by showTitle option', () => {
@ -203,9 +207,9 @@ describe('Table', () => {
{ title: 'id', dataKey: 'id', ellipsis: { showTitle: false } },
{ title: 'age', dataKey: 'age', ellipsis: { showTitle: false } },
];
const wrapper = mount(<Table columns={columns} dataSource={data} />);
wrapper.find('td').forEach(td => {
expect(td.hasClass('ant-table-cell-ellipsis')).toBeTruthy();
const { container } = render(<Table columns={columns} dataSource={data} />);
container.querySelectorAll('td').forEach(td => {
expect(td.className.includes('ant-table-cell-ellipsis')).toBe(true);
});
});
@ -224,14 +228,13 @@ describe('Table', () => {
{ title: 'id', dataKey: 'id', ellipsis: { showTitle: true } },
{ title: 'age', dataKey: 'age', ellipsis: { showTitle: true } },
];
const wrapper = mount(<Table columns={columns} dataSource={data} />);
wrapper.find('.ant-table-thead th').forEach(td => {
expect(td.getDOMNode().attributes.getNamedItem('title')).toBeTruthy();
const { container } = render(<Table columns={columns} dataSource={data} />);
container.querySelectorAll('.ant-table-thead th').forEach(td => {
expect(td.attributes.title).toBeTruthy();
});
wrapper.find('.ant-table-tbody td').forEach(td => {
expect(td.getDOMNode().attributes.getNamedItem('title')).toBeFalsy();
container.querySelectorAll('.ant-table-tbody td').forEach(td => {
expect(td.attributes.title).toBeFalsy();
});
});
@ -244,7 +247,7 @@ describe('Table', () => {
dataIndex: 'name',
},
];
mount(<Table columns={columns} rowKey={(record, index) => record + index} />);
render(<Table columns={columns} rowKey={(record, index) => record + index} />);
expect(warnSpy).toBeCalledWith(
'Warning: [antd: Table] `index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
);

320
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -2,54 +2,46 @@
exports[`Table.filter clearFilters should support params 1`] = `
<div
className="ant-dropdown-custom-view"
class="ant-dropdown-custom-view"
id="customFilter"
>
<span
id="setNoParams"
onClick={[Function]}
>
setSelectedKeys
</span>
<span
id="resetNoParams"
onClick={[Function]}
>
Reset
</span>
<span
id="setConfirm"
onClick={[Function]}
>
setSelectedKeys
</span>
<span
id="resetConfirm"
onClick={[Function]}
>
Reset
</span>
<span
id="setClose"
onClick={[Function]}
>
setSelectedKeys
</span>
<span
id="resetClose"
onClick={[Function]}
>
Reset
</span>
<span
id="setParams"
onClick={[Function]}
>
setSelectedKeys
</span>
<span
id="resetParams"
onClick={[Function]}
>
Reset
</span>
@ -58,37 +50,43 @@ exports[`Table.filter clearFilters should support params 1`] = `
exports[`Table.filter override custom filter correctly 1`] = `
<div
className="ant-dropdown-custom-view"
class="ant-dropdown-custom-view"
id="customFilter"
>
<span
id="setSelectedKeys"
onClick={[Function]}
>
setSelectedKeys
</span>
<span
id="confirm"
onClick={[Function]}
>
Confirm
</span>
<span
id="reset"
onClick={[Function]}
>
Reset
</span>
<span
id="simulateOnSelect"
onClick={[Function]}
>
SimulateOnSelect
</span>
</div>
`;
exports[`Table.filter renders custom content correctly 1`] = `<div />`;
exports[`Table.filter renders custom content correctly 1`] = `
<div
class="ant-table-filter-dropdown"
>
<div
class="custom-filter-dropdown"
>
custom filter
</div>
</div>
`;
exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
<div
@ -304,14 +302,6 @@ exports[`Table.filter renders custom filter icon correctly 1`] = `
</span>
`;
exports[`Table.filter renders custom filter icon correctly 2`] = `
<span
class="customize-icon"
>
unfiltered
</span>
`;
exports[`Table.filter renders custom filter icon with right Tooltip title 1`] = `
<div
class="ant-table-wrapper"
@ -562,6 +552,286 @@ exports[`Table.filter renders filter correctly 1`] = `
</div>
`;
exports[`Table.filter renders menu correctly 1`] = `<div />`;
exports[`Table.filter renders menu correctly 1`] = `
<div
class="ant-table-filter-dropdown"
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-menu-list="true"
role="menu"
tabindex="0"
>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-boy"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
value=""
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
<span>
Boy
</span>
</span>
</li>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-girl"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
value=""
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
<span>
Girl
</span>
</span>
</li>
<li
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
role="none"
>
<div
aria-controls="rc-menu-uuid-test-title-popup"
aria-expanded="false"
aria-haspopup="true"
class="ant-dropdown-menu-submenu-title"
data-menu-id="rc-menu-uuid-test-title"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
Title
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right ant-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
<div
aria-hidden="true"
style="display: none;"
/>
<div
class="ant-table-filter-dropdown-btns"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
<span>
OK
</span>
</button>
</div>
</div>
`;
exports[`Table.filter renders radio filter correctly 1`] = `<div />`;
exports[`Table.filter renders radio filter correctly 1`] = `
<div
class="ant-table-filter-dropdown"
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-menu-list="true"
role="menu"
tabindex="0"
>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-boy"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value=""
/>
<span
class="ant-radio-inner"
/>
</span>
</label>
<span>
Boy
</span>
</span>
</li>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-girl"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value=""
/>
<span
class="ant-radio-inner"
/>
</span>
</label>
<span>
Girl
</span>
</span>
</li>
<li
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
role="none"
>
<div
aria-controls="rc-menu-uuid-test-title-popup"
aria-expanded="false"
aria-haspopup="true"
class="ant-dropdown-menu-submenu-title"
data-menu-id="rc-menu-uuid-test-title"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
Title
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right ant-dropdown-menu-submenu-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</span>
</div>
</li>
</ul>
<div
aria-hidden="true"
style="display: none;"
/>
<div
class="ant-table-filter-dropdown-btns"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
disabled=""
type="button"
>
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
type="button"
>
<span>
OK
</span>
</button>
</div>
</div>
`;

70
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -20,7 +20,7 @@ exports[`Table renders empty table 1`] = `
class="ant-table-content"
>
<table
style="table-layout:auto"
style="table-layout: auto;"
>
<colgroup />
<thead
@ -157,7 +157,7 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-content"
>
<table
style="table-layout:auto"
style="table-layout: auto;"
>
<colgroup />
<thead
@ -247,17 +247,17 @@ exports[`Table renders empty table with fixed columns 1`] = `
>
<div
class="ant-table-content"
style="overflow-x:auto;overflow-y:hidden"
style="overflow-x: auto; overflow-y: hidden;"
>
<table
style="width:1px;min-width:100%;table-layout:fixed"
style="width: 1px; min-width: 100%; table-layout: fixed;"
>
<colgroup>
<col
style="width:100px"
style="width: 100px;"
/>
<col
style="width:100px"
style="width: 100px;"
/>
<col />
<col />
@ -268,7 +268,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
<col />
<col />
<col
style="width:100px"
style="width: 100px;"
/>
</colgroup>
<thead
@ -277,13 +277,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tr>
<th
class="ant-table-cell ant-table-cell-fix-left"
style="position:sticky;left:0"
style="position: sticky; left: 0px;"
>
Full Name
</th>
<th
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
style="position:sticky;left:0"
style="position: sticky; left: 0px;"
>
Age
</th>
@ -329,7 +329,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
</th>
<th
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
style="position:sticky;right:0"
style="position: sticky; right: 0px;"
>
Action
</th>
@ -341,103 +341,103 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0;font-size:0"
style="height: 0px; font-size: 0px;"
>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
<td
style="padding:0;border:0;height:0"
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height:0;overflow:hidden"
style="height: 0px; overflow: hidden;"
>
 
</div>
@ -452,7 +452,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
>
<div
class="ant-table-expanded-row-fixed"
style="width:0;position:sticky;left:0;overflow:hidden"
style="width: 0px; position: sticky; left: 0px; overflow: hidden;"
>
<div
class="ant-empty ant-empty-normal"
@ -557,7 +557,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-content"
>
<table
style="table-layout:auto"
style="table-layout: auto;"
>
<colgroup />
<thead

18
components/table/__tests__/empty.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { render } from 'enzyme';
import { render } from '../../../tests/utils';
import Table from '..';
const columns = [
@ -46,19 +46,19 @@ const columnsFixed = [
describe('Table', () => {
it('renders empty table', () => {
const wrapper = render(<Table dataSource={[]} columns={columns} pagination={false} />);
expect(wrapper).toMatchSnapshot();
const { asFragment } = render(<Table dataSource={[]} columns={columns} pagination={false} />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('renders empty table with fixed columns', () => {
const wrapper = render(
const { asFragment } = render(
<Table dataSource={[]} columns={columnsFixed} pagination={false} scroll={{ x: 1 }} />,
);
expect(wrapper).toMatchSnapshot();
expect(asFragment().firstChild).toMatchSnapshot();
});
it('renders empty table with custom emptyText', () => {
const wrapper = render(
const { asFragment } = render(
<Table
dataSource={[]}
columns={columns}
@ -66,11 +66,11 @@ describe('Table', () => {
locale={{ emptyText: 'custom empty text' }}
/>,
);
expect(wrapper).toMatchSnapshot();
expect(asFragment().firstChild).toMatchSnapshot();
});
it('renders empty table without emptyText when loading', () => {
const wrapper = render(<Table dataSource={[]} columns={columns} loading />);
expect(wrapper).toMatchSnapshot();
const { asFragment } = render(<Table dataSource={[]} columns={columns} loading />);
expect(asFragment().firstChild).toMatchSnapshot();
});
});