2022-12-31 22:12:30 +08:00
|
|
|
import { ConfigProvider } from 'antd';
|
2023-02-22 17:22:50 +08:00
|
|
|
import React, { useRef } from 'react';
|
2022-09-05 19:41:32 +08:00
|
|
|
import type { TableProps } from '..';
|
2016-12-14 15:38:26 +08:00
|
|
|
import Table from '..';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2022-10-10 15:04:19 +08:00
|
|
|
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
2016-12-14 14:48:09 +08:00
|
|
|
|
|
|
|
const { Column, ColumnGroup } = Table;
|
|
|
|
|
|
|
|
describe('Table', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Table);
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Table);
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2019-01-08 20:52:31 +08:00
|
|
|
|
|
|
|
afterAll(() => {
|
|
|
|
warnSpy.mockRestore();
|
|
|
|
});
|
|
|
|
|
2016-12-14 14:48:09 +08:00
|
|
|
it('renders JSX correctly', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const data = [
|
|
|
|
{
|
|
|
|
key: '1',
|
|
|
|
firstName: 'John',
|
|
|
|
lastName: 'Brown',
|
|
|
|
age: 32,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '2',
|
|
|
|
firstName: 'Jim',
|
|
|
|
lastName: 'Green',
|
|
|
|
age: 42,
|
|
|
|
},
|
|
|
|
];
|
2016-12-14 14:48:09 +08:00
|
|
|
|
2022-06-07 10:14:32 +08:00
|
|
|
const { asFragment } = render(
|
2016-12-14 14:48:09 +08:00
|
|
|
<Table dataSource={data} pagination={false}>
|
|
|
|
<ColumnGroup title="Name">
|
2018-12-07 16:17:45 +08:00
|
|
|
<Column title="First Name" dataIndex="firstName" key="firstName" />
|
|
|
|
<Column title="Last Name" dataIndex="lastName" key="lastName" />
|
2016-12-14 14:48:09 +08:00
|
|
|
</ColumnGroup>
|
2018-12-07 16:17:45 +08:00
|
|
|
<Column title="Age" dataIndex="age" key="age" />
|
2019-10-06 07:17:52 +08:00
|
|
|
{/* eslint-disable-next-line react/jsx-curly-brace-presence */}
|
2019-09-28 16:20:19 +08:00
|
|
|
{'invalid child'}
|
2018-12-07 16:17:45 +08:00
|
|
|
</Table>,
|
2016-12-14 14:48:09 +08:00
|
|
|
);
|
|
|
|
|
2022-06-07 10:14:32 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2016-12-14 14:48:09 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('updates columns when receiving props', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
key: 'name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
];
|
2022-06-07 10:14:32 +08:00
|
|
|
const { container, rerender } = render(<Table columns={columns} />);
|
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
const newColumns = [
|
|
|
|
{
|
|
|
|
title: 'Title',
|
|
|
|
key: 'title',
|
|
|
|
dataIndex: 'title',
|
|
|
|
},
|
|
|
|
];
|
2022-06-07 10:14:32 +08:00
|
|
|
rerender(<Table columns={newColumns} />);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('th')?.textContent).toEqual('Title');
|
2016-12-14 14:48:09 +08:00
|
|
|
});
|
2017-02-13 15:48:08 +08:00
|
|
|
|
|
|
|
it('loading with Spin', async () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2017-02-13 15:48:08 +08:00
|
|
|
const loading = {
|
|
|
|
spinning: false,
|
|
|
|
delay: 500,
|
|
|
|
};
|
2022-06-07 10:14:32 +08:00
|
|
|
const { container, rerender } = render(<Table loading={loading} />);
|
|
|
|
expect(container.querySelectorAll('.ant-spin')).toHaveLength(0);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelector('.ant-table-placeholder')?.textContent).not.toEqual('');
|
2017-02-13 15:48:08 +08:00
|
|
|
|
|
|
|
loading.spinning = true;
|
2022-06-07 10:14:32 +08:00
|
|
|
rerender(<Table loading={loading} />);
|
|
|
|
expect(container.querySelectorAll('.ant-spin')).toHaveLength(0);
|
2022-10-10 15:04:19 +08:00
|
|
|
await waitFakeTimer();
|
2022-06-07 10:14:32 +08:00
|
|
|
rerender(<Table loading />);
|
|
|
|
expect(container.querySelectorAll('.ant-spin')).toHaveLength(1);
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.clearAllTimers();
|
|
|
|
jest.useRealTimers();
|
2020-03-30 15:45:14 +08:00
|
|
|
});
|
2017-02-13 15:48:08 +08:00
|
|
|
|
2020-03-30 15:45:14 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/22733
|
|
|
|
it('support loading tip', async () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2022-06-07 10:14:32 +08:00
|
|
|
const { container, rerender } = render(<Table loading={{ tip: 'loading...' }} />);
|
2022-10-10 15:04:19 +08:00
|
|
|
await waitFakeTimer();
|
2022-09-05 19:41:32 +08:00
|
|
|
rerender(
|
|
|
|
<Table loading={{ tip: 'loading...', loading: true } as TableProps<any>['loading']} />,
|
2022-06-07 10:14:32 +08:00
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(container.querySelectorAll('.ant-spin')).toHaveLength(1);
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.clearAllTimers();
|
|
|
|
jest.useRealTimers();
|
2018-07-12 16:39:46 +08:00
|
|
|
});
|
2019-01-08 20:52:31 +08:00
|
|
|
|
2019-07-09 11:46:21 +08:00
|
|
|
it('props#columnsPageRange and props#columnsPageSize do not warn anymore', () => {
|
|
|
|
const data = [
|
2022-09-05 19:41:32 +08:00
|
|
|
{ key: '1', age: 32 },
|
|
|
|
{ key: '2', age: 42 },
|
2019-07-09 11:46:21 +08:00
|
|
|
];
|
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
const columnsPageRange = jest.fn();
|
|
|
|
const columnsPageSize = jest.fn();
|
2022-09-05 19:41:32 +08:00
|
|
|
const props = { columnsPageRange, columnsPageSize };
|
2022-06-07 10:14:32 +08:00
|
|
|
render(
|
2022-09-05 19:41:32 +08:00
|
|
|
<Table dataSource={data} rowKey="key" {...props}>
|
2019-07-09 11:46:21 +08:00
|
|
|
<Column title="Age" dataIndex="age" key="age" />
|
|
|
|
</Table>,
|
|
|
|
);
|
|
|
|
|
2023-01-28 22:44:37 +08:00
|
|
|
expect(warnSpy).not.toHaveBeenCalledWith(
|
2019-07-09 11:46:21 +08:00
|
|
|
'`columnsPageRange` and `columnsPageSize` are removed, please use fixed columns instead, see: https://u.ant.design/fixed-columns.',
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(columnsPageRange).not.toHaveBeenCalled();
|
|
|
|
expect(columnsPageSize).not.toHaveBeenCalled();
|
|
|
|
});
|
2019-08-29 23:41:46 +08:00
|
|
|
|
2019-08-27 17:11:00 +08:00
|
|
|
it('support onHeaderCell', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onClick = jest.fn();
|
2022-06-07 10:14:32 +08:00
|
|
|
const { container } = render(
|
2019-08-29 23:41:46 +08:00
|
|
|
<Table columns={[{ title: 'title', onHeaderCell: () => ({ onClick }) }]} />,
|
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('th')!);
|
2019-08-27 17:11:00 +08:00
|
|
|
expect(onClick).toHaveBeenCalled();
|
|
|
|
});
|
2020-01-06 20:28:47 +08:00
|
|
|
|
|
|
|
it('should not crash when column children is empty', () => {
|
2022-06-07 10:14:32 +08:00
|
|
|
render(
|
2020-01-06 20:28:47 +08:00
|
|
|
<Table
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
dataIndex: 'name',
|
|
|
|
children: undefined,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
dataSource={[]}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
});
|
2020-03-30 15:45:14 +08:00
|
|
|
|
2020-08-05 22:29:38 +08:00
|
|
|
it('should not crash when dataSource is array with none-object items', () => {
|
2022-06-07 10:14:32 +08:00
|
|
|
render(
|
2020-08-05 22:29:38 +08:00
|
|
|
<Table
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
title: 'name',
|
|
|
|
},
|
|
|
|
]}
|
2022-09-05 19:41:32 +08:00
|
|
|
dataSource={['1', 2, undefined, {}, null, true, false, 0] as TableProps<any>['dataSource']}
|
2020-08-05 22:29:38 +08:00
|
|
|
/>,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2020-03-30 15:45:14 +08:00
|
|
|
it('prevent touch event', () => {
|
2022-06-07 10:14:32 +08:00
|
|
|
// prevent touch event, 原来的用例感觉是少了 touchmove 调用判断
|
2023-06-07 21:59:21 +08:00
|
|
|
const touchmove = jest.fn();
|
2022-06-07 10:14:32 +08:00
|
|
|
const { container } = render(
|
2020-03-30 15:45:14 +08:00
|
|
|
<Table
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
dataIndex: 'name',
|
|
|
|
children: undefined,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
dataSource={[]}
|
|
|
|
/>,
|
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.touchMove(container.querySelector('.ant-table')!);
|
2022-06-07 10:14:32 +08:00
|
|
|
expect(touchmove).not.toHaveBeenCalled();
|
2020-03-30 15:45:14 +08:00
|
|
|
});
|
2020-05-12 12:44:49 +08:00
|
|
|
|
|
|
|
it('renders ellipsis by showTitle option', () => {
|
|
|
|
const data = [
|
|
|
|
{
|
|
|
|
id: '1',
|
|
|
|
age: 32,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: '2',
|
|
|
|
age: 42,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const columns = [
|
|
|
|
{ title: 'id', dataKey: 'id', ellipsis: { showTitle: false } },
|
|
|
|
{ title: 'age', dataKey: 'age', ellipsis: { showTitle: false } },
|
|
|
|
];
|
2022-06-07 10:14:32 +08:00
|
|
|
const { container } = render(<Table columns={columns} dataSource={data} />);
|
2022-11-19 13:47:33 +08:00
|
|
|
container.querySelectorAll('td').forEach((td) => {
|
2022-06-07 10:14:32 +08:00
|
|
|
expect(td.className.includes('ant-table-cell-ellipsis')).toBe(true);
|
2020-05-12 12:44:49 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('not renders ellipsis origin html title', () => {
|
|
|
|
const data = [
|
|
|
|
{
|
|
|
|
id: '1',
|
|
|
|
age: 32,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: '2',
|
|
|
|
age: 42,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const columns = [
|
|
|
|
{ title: 'id', dataKey: 'id', ellipsis: { showTitle: true } },
|
|
|
|
{ title: 'age', dataKey: 'age', ellipsis: { showTitle: true } },
|
|
|
|
];
|
|
|
|
|
2022-06-07 10:14:32 +08:00
|
|
|
const { container } = render(<Table columns={columns} dataSource={data} />);
|
2022-11-19 13:47:33 +08:00
|
|
|
container.querySelectorAll<HTMLTableCellElement>('.ant-table-thead th').forEach((td) => {
|
2022-09-05 19:41:32 +08:00
|
|
|
expect((td.attributes as any).title).toBeTruthy();
|
2020-05-12 12:44:49 +08:00
|
|
|
});
|
2022-11-19 13:47:33 +08:00
|
|
|
container.querySelectorAll('.ant-table-tbody td').forEach((td) => {
|
2022-09-05 19:41:32 +08:00
|
|
|
expect((td.attributes as any).title).toBeFalsy();
|
2020-05-12 12:44:49 +08:00
|
|
|
});
|
|
|
|
});
|
2020-06-28 22:41:59 +08:00
|
|
|
|
2022-10-13 17:44:19 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/37977
|
|
|
|
it('should render title when enable ellipsis, sorter and filters', () => {
|
2022-10-13 18:22:00 +08:00
|
|
|
const data = [] as any;
|
2022-10-13 17:44:19 +08:00
|
|
|
const columns = [
|
|
|
|
{ title: 'id', dataKey: 'id', ellipsis: true, sorter: true, filters: [] },
|
|
|
|
{ title: 'age', dataKey: 'age', ellipsis: true, sorter: true },
|
|
|
|
{ title: 'age', dataKey: 'age', ellipsis: true, filters: [] },
|
|
|
|
];
|
|
|
|
const { container } = render(<Table columns={columns} dataSource={data} />);
|
|
|
|
container
|
|
|
|
.querySelectorAll<HTMLTableCellElement>('.ant-table-thead th.ant-table-cell')
|
2022-11-19 13:47:33 +08:00
|
|
|
.forEach((td) => {
|
2022-10-13 17:44:19 +08:00
|
|
|
expect((td.attributes as any).title).toBeTruthy();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-06-28 22:41:59 +08:00
|
|
|
it('warn about rowKey when using index parameter', () => {
|
|
|
|
warnSpy.mockReset();
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
key: 'name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
];
|
2023-07-05 16:54:04 +08:00
|
|
|
render(<Table columns={columns} rowKey={(record, index) => record.key + index} />);
|
2022-08-30 10:57:13 +08:00
|
|
|
expect(warnSpy).toHaveBeenCalledWith(
|
2020-06-28 22:41:59 +08:00
|
|
|
'Warning: [antd: Table] `index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
it('not warn about rowKey', () => {
|
|
|
|
warnSpy.mockReset();
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
key: 'name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
];
|
2022-11-19 13:47:33 +08:00
|
|
|
render(<Table columns={columns} rowKey={(record) => record.key} />);
|
2022-08-30 10:57:13 +08:00
|
|
|
expect(warnSpy).not.toHaveBeenCalled();
|
2020-06-28 22:41:59 +08:00
|
|
|
});
|
2021-09-17 11:17:29 +08:00
|
|
|
|
|
|
|
it('should support ref', () => {
|
|
|
|
warnSpy.mockReset();
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
key: 'name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
];
|
2022-09-05 19:41:32 +08:00
|
|
|
const Wrapper: React.FC = () => {
|
|
|
|
const ref = React.useRef<HTMLDivElement>(null);
|
2021-09-17 11:17:29 +08:00
|
|
|
return <Table ref={ref} columns={columns} />;
|
|
|
|
};
|
2022-04-06 11:07:15 +08:00
|
|
|
render(<Wrapper />);
|
2022-08-30 10:57:13 +08:00
|
|
|
expect(warnSpy).not.toHaveBeenCalled();
|
2021-09-17 11:17:29 +08:00
|
|
|
});
|
2022-11-04 16:18:43 +08:00
|
|
|
|
2022-11-05 12:44:37 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/38371
|
|
|
|
it('should render title', () => {
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: (
|
|
|
|
<div>
|
|
|
|
<span>name</span>
|
|
|
|
<span>Jason</span>
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
key: 'name',
|
|
|
|
sorter: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: (
|
|
|
|
<div>
|
|
|
|
<i />
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
key: 'name',
|
|
|
|
sorter: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: () => (
|
|
|
|
<div>
|
|
|
|
<span>age</span>
|
|
|
|
<span>20</span>
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
key: 'name',
|
|
|
|
sorter: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: () => 'color',
|
|
|
|
key: 'name',
|
|
|
|
sorter: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'sex',
|
|
|
|
key: 'name',
|
|
|
|
sorter: true,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const { container } = render(<Table columns={columns} />);
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2022-11-04 16:18:43 +08:00
|
|
|
it('title should support ReactNode', () => {
|
|
|
|
const { container } = render(
|
|
|
|
<Table
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
title: (
|
|
|
|
<div>
|
|
|
|
<strong>Current</strong> <span>User</span>
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
dataSource={[]}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(container.querySelector('thead th')).toMatchSnapshot();
|
|
|
|
});
|
2022-12-21 14:01:05 +08:00
|
|
|
|
|
|
|
// https://github.com/react-component/table/pull/855
|
|
|
|
it('support aria-* and data-*', async () => {
|
|
|
|
const { container } = render(<Table aria-label="label" data-number="123" />);
|
|
|
|
expect(container.querySelector('table')?.getAttribute('aria-label')).toBe('label');
|
|
|
|
expect(container.querySelector('.ant-table')?.getAttribute('data-number')).toBe('123');
|
|
|
|
});
|
2022-12-31 22:12:30 +08:00
|
|
|
|
|
|
|
it('support wireframe', () => {
|
|
|
|
const columns = [{ title: 'Name', key: 'name', dataIndex: 'name' }];
|
|
|
|
const { container } = render(
|
|
|
|
<ConfigProvider theme={{ token: { wireframe: true } }}>
|
|
|
|
<Table columns={columns} />
|
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
|
|
|
});
|
2023-02-22 17:22:50 +08:00
|
|
|
|
|
|
|
it('support getPopupContainer inject by ConfigProvider', async () => {
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'title',
|
|
|
|
key: 'title',
|
|
|
|
dataIndex: 'title',
|
|
|
|
filters: [
|
|
|
|
{
|
|
|
|
text: 'filter',
|
|
|
|
value: 'filter',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const Demo = () => {
|
|
|
|
const wrapRef = useRef(null);
|
|
|
|
return (
|
|
|
|
<ConfigProvider getPopupContainer={wrapRef.current!}>
|
|
|
|
<div ref={wrapRef}>
|
|
|
|
<Table columns={columns} />
|
|
|
|
</div>
|
|
|
|
</ConfigProvider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const { container } = render(<Demo />);
|
|
|
|
|
|
|
|
fireEvent.click(container.querySelector('.ant-table-filter-trigger')!);
|
2023-06-07 21:59:21 +08:00
|
|
|
await waitFakeTimer();
|
2023-02-22 17:22:50 +08:00
|
|
|
expect(container.querySelector('.ant-dropdown')).toBeTruthy();
|
|
|
|
});
|
2016-12-14 14:48:09 +08:00
|
|
|
});
|