@douyinfe/semi-ui 2.1.2 → 2.1.5

package/table/__test__/table.test.js

@@ -0,0 +1,1887 @@
+import BaseTable from '../Table';
+import Table from '../index';
+import Column from '../Column';
+import {Tag, Tooltip} from '../../index';
+import {
+    getColumns,
+    getData,
+    getGroupColumns,
+    getGroupData,
+    getJSXColumns,
+    getNestColumns,
+    getNestData,
+    getRandomNumber,
+    getTreeData,
+    mount,
+    sleep,
+} from '../../_test_/utils';
+import {BASE_CLASS_PREFIX} from '../../../semi-foundation/base/constants';
+import {IconStar} from '@douyinfe/semi-icons';
+
+/**
+ * Table 需要测试的使用场景
+ * ✅ JSX 写法
+ * ✅ 行选择
+ * ✅ 分页
+ * ✅ 固定列
+ * ✅ 排序
+ * ✅ 筛选
+ * ✅ 展开
+ * ✅ 树形展示
+ * ✅ 自定义行或单元格
+ * ✅ 分组
+ * ✅ 表头合并
+ * ✅ 更新数据
+ * ✅ 完全自定义渲染
+ * ✅ 行列合并
+ * ❌ 可伸缩列（不好测试）
+ * ❌ 拖拽排序（不好测试）
+ * ❌ 虚拟化
+ */
+
+const dataTotalSize = 46;
+const data = getData(dataTotalSize);
+const columns = getColumns();
+
+function testAppearance(demo, params) {
+    const {onRow, myCls, myClsIndex} = params; // check table wrapper
+
+    expect(demo.find(`.${BASE_CLASS_PREFIX}-table-wrapper`).length).toBe(1); // check if has header
+
+    expect(demo.find(`.${BASE_CLASS_PREFIX}-table-title`).length).toBe(1); // check if has footer
+
+    expect(demo.find(`.${BASE_CLASS_PREFIX}-table-footer`).length).toBe(1); // check onRow
+
+    expect(onRow.called).toBe(true);
+    expect(
+        demo
+            .find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`)
+            .at(0)
+            .hasClass(myCls)
+    ).toBe(false);
+    expect(
+        demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`).reduce((prev, item, index) => {
+            if (item.hasClass(myCls)) {
+                return index;
+            } else {
+                return prev;
+            }
+        }, -1)
+    ).toBe(myClsIndex); // check pagination
+
+    expect(demo.find(`.${BASE_CLASS_PREFIX}-table-pagination-outer`).length).toBe(1); // click page 2
+
+    const curPage = 2;
+    demo.find(`.${BASE_CLASS_PREFIX}-page li`)
+        .at(curPage)
+        .simulate('click');
+    expect(demo.find(BaseTable).state('pagination')).toHaveProperty('currentPage', curPage);
+}
+
+describe(`Table`, () => {
+    it(`test jsx columns appearance`, async () => {
+        const myCls = `my-tr-class`;
+        const myClsIndex = 2;
+        const onRow = sinon.spy((record, index) => ({
+            className: index === myClsIndex ? myCls : '',
+        }));
+        const columns = getJSXColumns();
+        const demo = mount(
+            <Table
+                dataSource={data}
+                onRow={onRow}
+                title={() => 'Table Title'}
+                footer={() => 'Table Footer'}
+                children={columns}
+            />
+        );
+        testAppearance(demo, {
+            onRow,
+            myCls,
+            myClsIndex,
+        });
+        const newColumns = getJSXColumns();
+        demo.setProps({
+            children: newColumns,
+        });
+        testAppearance(demo, {
+            onRow,
+            myCls,
+            myClsIndex,
+        });
+    });
+    it(`test object columns appearance`, async () => {
+        const myCls = `my-tr-class`;
+        const myClsIndex = 2;
+        const onRow = sinon.spy((record, index) => ({
+            className: index === myClsIndex ? myCls : '',
+        }));
+        const columns = getColumns();
+        const demo = mount(
+            <Table
+                dataSource={data}
+                onRow={onRow}
+                title={() => 'Table Title'}
+                footer={() => 'Table Footer'}
+                columns={columns}
+            />
+        );
+        testAppearance(demo, {
+            onRow,
+            myCls,
+            myClsIndex,
+        });
+        const newColumns = getColumns();
+        demo.setProps({
+            columns: newColumns,
+        });
+        testAppearance(demo, {
+            onRow,
+            myCls,
+            myClsIndex,
+        });
+    });
+    it(`test dataSource change appearance`, async () => {
+        const myCls = `my-tr-class`;
+        const myClsIndex = 2;
+        const onRow = sinon.spy((record, index) => ({
+            className: index === myClsIndex ? myCls : '',
+        }));
+        const columns = getColumns();
+        const data = getData(25);
+        const demo = mount(
+            <Table
+                dataSource={data}
+                onRow={onRow}
+                title={() => 'Table Title'}
+                footer={() => 'Table Footer'}
+                columns={columns}
+            />
+        );
+        testAppearance(demo, {
+            onRow,
+            myCls,
+            myClsIndex,
+        });
+        const dataNum = getRandomNumber(100, 40);
+        const newData = getData(dataNum);
+        demo.setProps({
+            dataSource: newData,
+        });
+        testAppearance(demo, {
+            onRow,
+            myCls,
+            myClsIndex,
+        });
+    });
+    it(`test selection`, async () => {
+        const columns = getColumns();
+        const selectedRowKeys = ['0'];
+        const rowKey = 'key';
+        const disabledKeys = ['4'];
+        let rowSelection = {
+            onChange: sinon.spy((selectedRowKeys, selectedRows) => {
+                rowSelection = {...rowSelection, selectedRowKeys: [...selectedRowKeys]};
+                demo.setProps({
+                    rowSelection,
+                });
+            }),
+            onSelectAll: sinon.spy((selected, selectedRows, changedRows) => {
+                rowSelection = {...rowSelection, selectedRowKeys: selected ? [...selectedRowKeys] : []};
+                demo.setProps({
+                    rowSelection,
+                });
+            }),
+            getCheckboxProps: sinon.spy(record => ({
+                disabled: disabledKeys.includes(record[rowKey]),
+                // Column configuration not to be checked
+                name: record.name,
+            })),
+            onSelect: sinon.spy((record, selected) => {
+            }),
+            selectedRowKeys: ['3'],
+            defaultSelectedRowKeys: ['0', '1'],
+        };
+        const demo = mount(<Table rowKey={rowKey} dataSource={data} columns={columns} rowSelection={rowSelection}/>);
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-checkbox`).length).toBeGreaterThan(0);
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-row .${BASE_CLASS_PREFIX}-checkbox-inner-checked`).length).toBe(
+            rowSelection.selectedRowKeys.length
+        );
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-checkbox-indeterminate`).length).toBe(
+            1
+        );
+        expect(
+            demo
+                .find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-checkbox`)
+                .map(el => el)
+                .every((el, index) =>
+                    disabledKeys.includes(index.toString())
+                        ? el.hasClass(`${BASE_CLASS_PREFIX}-checkbox-disabled`)
+                        : true
+                )
+        ).toBeTruthy(); // click disabled checkbox
+
+        demo.find(`.${BASE_CLASS_PREFIX}-table-row .${BASE_CLASS_PREFIX}-checkbox-disabled`).simulate('click');
+        expect(rowSelection.onSelect.notCalled).toBeTruthy(); // click first row checkbox
+
+        demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row .${BASE_CLASS_PREFIX}-checkbox`)
+            .at(0)
+            .simulate('click');
+        expect(rowSelection.onSelect.calledOnce).toBeTruthy(); // click table header checkbox and select all
+
+        demo.find(
+            `.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-selection .${BASE_CLASS_PREFIX}-checkbox`
+        ).simulate('click');
+        expect(rowSelection.onSelectAll.calledOnce).toBeTruthy();
+        expect(demo.find(BaseTable).state('rowSelection')).toHaveProperty(
+            'selectedRowKeys',
+            rowSelection.selectedRowKeys
+        );
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-checkbox-inner-checked`).length).toBe(
+            1
+        ); // click table header checkbox and deselect all
+
+        demo.find(
+            `.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-selection .${BASE_CLASS_PREFIX}-checkbox`
+        ).simulate('click');
+        expect(rowSelection.onSelectAll.calledTwice).toBeTruthy();
+        expect(demo.find(BaseTable).state('rowSelection')).toHaveProperty('selectedRowKeys', []);
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-checkbox-inner-checked`).length).toBe(
+            0
+        );
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-checkbox-indeterminate`).length).toBe(
+            0
+        );
+    });
+    it(`test selection after data change`, async () => {
+        const columns = getColumns();
+        const selectedRowKeys = ['0'];
+        const rowKey = 'key';
+        const disabledKeys = ['4'];
+        let rowSelection = {
+            onSelectAll: sinon.spy((selected, selectedRows, changedRows) => {
+                rowSelection = {...rowSelection, selectedRowKeys: selected ? [...selectedRowKeys] : []};
+                demo.setProps({
+                    rowSelection,
+                });
+            }),
+            getCheckboxProps: sinon.spy(record => ({
+                disabled: disabledKeys.includes(record[rowKey]),
+                // Column configuration not to be checked
+                name: record.name,
+            })),
+            onSelect: sinon.spy((record, selected) => {
+            }),
+        };
+        const demo = mount(<Table rowKey={rowKey} dataSource={data} columns={columns} rowSelection={rowSelection}/>);
+        const newData = getData(50);
+        demo.setProps({
+            dataSource: newData,
+        }); // click disabled checkbox
+
+        demo.find(`.${BASE_CLASS_PREFIX}-table-row .${BASE_CLASS_PREFIX}-checkbox-disabled`).simulate('click');
+        expect(rowSelection.onSelect.notCalled).toBeTruthy(); // click first row checkbox
+
+        demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row .${BASE_CLASS_PREFIX}-checkbox`)
+            .at(0)
+            .simulate('click');
+        expect(rowSelection.onSelect.calledOnce).toBeTruthy(); // click table header checkbox and select all
+
+        demo.find(
+            `.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-selection .${BASE_CLASS_PREFIX}-checkbox`
+        ).simulate('click');
+        expect(rowSelection.onSelectAll.calledOnce).toBeTruthy(); // click table header checkbox and deselect all
+
+        demo.find(
+            `.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-selection .${BASE_CLASS_PREFIX}-checkbox`
+        ).simulate('click');
+        expect(rowSelection.onSelectAll.calledTwice).toBeTruthy();
+    });
+    it(`test expandedRowRender and fixed`, async () => {
+        const columns = getColumns();
+        const rowKey = 'key';
+
+        const expandedRowRender = (record, index, expanded) => (
+            <article
+                style={{
+                    margin: 0,
+                }}
+            >
+                <p>{record.description}</p>
+            </article>
+        );
+
+        const unexpandableKey = '2';
+        const demo = mount(
+            <Table
+                scroll={{
+                    x: '160%',
+                    y: 320,
+                }}
+                defaultExpandAllRows
+                rowKey={rowKey}
+                expandedRowRender={expandedRowRender}
+                hideExpandedColumn={false}
+                expandCellFixed={true}
+                dataSource={data}
+                columns={columns}
+                rowExpandable={record => record[rowKey] !== unexpandableKey}
+            />
+        );
+        const leftFixedCells = demo.find(`.${BASE_CLASS_PREFIX}-table-cell-fixed-left`);
+        const rightFixedCells = demo.find(`.${BASE_CLASS_PREFIX}-table-cell-fixed-right`);
+        expect(leftFixedCells.length).toBeGreaterThan(0);
+        expect(rightFixedCells.length).toBeGreaterThan(0);
+        expect(
+            demo.find(`.${BASE_CLASS_PREFIX}-table-cell-fixed-left.${BASE_CLASS_PREFIX}-table-column-expand`).length
+        ).toBeGreaterThan(0);
+        const newData = getData(50);
+        demo.setProps({
+            dataSource: newData,
+        });
+        expect(
+            demo.find(`.${BASE_CLASS_PREFIX}-table-cell-fixed-left.${BASE_CLASS_PREFIX}-table-column-expand`).length
+        ).toBeGreaterThan(0);
+    });
+    it(`test tree data`, async () => {
+        const rowKey = 'key';
+        const childrenRecordName = 'children';
+        const childrenData = getTreeData();
+        let expandedRowKeys = [1];
+        const onExpand = sinon.spy((expanded, record) => {
+            const keySet = new Set([...expandedRowKeys]);
+
+            if (expanded) {
+                keySet.add(record[rowKey]);
+            } else {
+                keySet.delete(record[rowKey]);
+            }
+
+            expandedRowKeys = Array.from(keySet);
+            demo.setProps({
+                expandedRowKeys,
+            });
+        });
+        const demo = mount(
+            <Table
+                rowKey={rowKey}
+                childrenRecordName={childrenRecordName}
+                expandedRowKeys={expandedRowKeys}
+                columns={columns}
+                dataSource={childrenData}
+                onExpand={onExpand}
+            />
+        );
+        const table = demo.find(BaseTable);
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`).length).toBe(
+            childrenData[0].children.length + childrenData.length
+        ); // click 3rd row to expand row
+
+        table
+            .find(
+                `.${BASE_CLASS_PREFIX}-table-body .${BASE_CLASS_PREFIX}-table-row .${BASE_CLASS_PREFIX}-table-expand-icon`
+            )
+            .at(1)
+            .simulate('click');
+        expect(onExpand.calledOnce).toBeTruthy();
+        expect(table.state(`expandedRowKeys`)).toEqual(expandedRowKeys); // click first expand button to collapse row
+
+        table
+            .find(
+                `.${BASE_CLASS_PREFIX}-table-body .${BASE_CLASS_PREFIX}-table-row .${BASE_CLASS_PREFIX}-table-expand-icon`
+            )
+            .at(0)
+            .simulate('click');
+        expect(table.state('expandedRowKeys')).toEqual(expandedRowKeys);
+    });
+    it(`test grouped data`, async () => {
+        const rowKey = record =>
+            `${record.city && record.city.toLowerCase()}-${record.job && record.job.toLowerCase()}`;
+
+        const data = [
+            {
+                city: 'Beijing',
+                job: 'FE',
+                department: 'IES',
+            },
+            {
+                city: 'Beijing',
+                job: 'BE',
+                department: 'IES',
+            },
+            {
+                city: 'Shanghai',
+                job: 'Android',
+                department: 'IES',
+            },
+            {
+                city: 'Tokyo',
+                job: 'Android',
+                department: 'IES',
+            },
+            {
+                city: 'Shanghai',
+                job: 'IOS',
+                department: 'EE',
+            },
+            {
+                city: 'LA',
+                job: 'SE',
+                department: 'EE',
+            },
+            {
+                city: 'Beijing',
+                job: 'Android',
+                department: 'EE',
+            },
+            {
+                city: 'Tokyo',
+                job: 'IOS',
+                department: 'EE',
+            },
+            {
+                city: 'Tokyo',
+                job: 'SE',
+                department: 'DATA',
+            },
+            {
+                city: 'Shanghai',
+                job: 'BE',
+                department: 'DATA',
+            },
+            {
+                city: 'LA',
+                job: 'Android',
+                department: 'DATA',
+            },
+            {
+                city: 'LA',
+                job: 'IOS',
+                department: 'DATA',
+            },
+        ];
+        const columns = [
+            {
+                dataIndex: 'city',
+                title: 'City',
+                width: 400,
+                sorter: (a, b) => (a.city > b.city ? 1 : -1),
+            },
+            {
+                dataIndex: 'job',
+                title: 'Job',
+                width: 200,
+                filters: [
+                    {
+                        text: 'IOS',
+                        value: 'IOS',
+                    },
+                    {
+                        text: 'Android',
+                        value: 'Android',
+                    },
+                ],
+                onFilter: (value, record) => record.job && record.job.indexOf(value) === 0,
+            },
+            {
+                dataIndex: 'department',
+                title: 'Department',
+            },
+        ];
+        const groupedRowClick = sinon.spy();
+        const demo = mount(
+            <Table
+                dataSource={data}
+                rowKey={rowKey}
+                groupBy={'city'}
+                columns={columns}
+                renderGroupSection={groupKey => <strong>Jobs in {groupKey}:</strong>}
+                onGroupedRow={(group, index) => ({
+                    onClick: groupedRowClick,
+                })}
+                clickGroupedRowToExpand
+                scroll={{
+                    y: 480,
+                }}
+            />
+        );
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-row-section`).length).toBe(4);
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-body .${BASE_CLASS_PREFIX}-table-row`).length).toBe(0);
+        demo.find(`.${BASE_CLASS_PREFIX}-table-row-section`)
+            .at(0)
+            .simulate('click');
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-row`).length).toBeGreaterThan(0);
+    });
+    it(`test events: page, filter, sort`, async () => {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                width: 150,
+                filters: [
+                    {
+                        text: '名字包含"1"',
+                        value: '1',
+                    },
+                    {
+                        text: '名字包含"2"',
+                        value: '2',
+                    },
+                ],
+                onFilter: (value, record) => record.name.indexOf(value) > -1,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                width: 150,
+                sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+            {
+                render: (text, record) => (
+                    <Tooltip content={record.description}>
+                        <Tag color="green">Show Info</Tag>
+                    </Tooltip>
+                ),
+                width: 150,
+            },
+        ];
+        let onChangeCalledCount = 0;
+        const onChange = sinon.spy();
+        const demo = mount(<Table dataSource={data} columns={columns} onChange={onChange}/>);
+        demo.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-filter`).simulate('click');
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-dropdown`).length).toBe(1);
+        expect(onChange.callCount).toBe(onChangeCalledCount); // click first filter
+
+        demo.find(`.${BASE_CLASS_PREFIX}-dropdown .${BASE_CLASS_PREFIX}-dropdown-item`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-checkbox`)
+            .simulate('click', {
+                nativeEvent: null,
+            });
+        expect(onChange.callCount).toBe(++onChangeCalledCount); // click first filter again
+
+        demo.find(`.${BASE_CLASS_PREFIX}-dropdown .${BASE_CLASS_PREFIX}-dropdown-item`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-checkbox`)
+            .simulate('click', {
+                nativeEvent: null,
+            });
+        expect(onChange.callCount).toBe(++onChangeCalledCount); // to page 2
+
+        demo.find(`.${BASE_CLASS_PREFIX}-page .${BASE_CLASS_PREFIX}-page-item`)
+            .at(2)
+            .simulate('click', {
+                nativeEvent: null,
+            });
+        expect(onChange.callCount).toBe(++onChangeCalledCount); // to page 1
+
+        demo.find(`.${BASE_CLASS_PREFIX}-page .${BASE_CLASS_PREFIX}-page-item`)
+            .at(1)
+            .simulate('click', {
+                nativeEvent: null,
+            });
+        expect(onChange.callCount).toBe(++onChangeCalledCount); // sort
+
+        demo.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-sorter`).simulate('click', {
+            nativeEvent: null,
+        });
+        expect(onChange.callCount).toBe(++onChangeCalledCount);
+    });
+    it(`test filter, and update dataSource with exist filter`, () => {
+        const columns = [
+            {
+                className: 'name-col',
+                title: 'Name',
+                dataIndex: 'name',
+                width: 150,
+                filters: [
+                    {
+                        text: '名字包含"1"',
+                        value: '1',
+                    },
+                    {
+                        text: '名字包含"2"',
+                        value: '2',
+                    },
+                ],
+                onFilter: (value, record) => record.name.indexOf(value) > -1,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                width: 150,
+                sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        const demo = mount(<Table dataSource={data} columns={columns} pagination={false}/>);
+        demo.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-filter`).simulate('click'); // click first filter
+
+        demo.find(`.${BASE_CLASS_PREFIX}-dropdown .${BASE_CLASS_PREFIX}-dropdown-item`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-checkbox`)
+            .simulate('click', {
+                nativeEvent: null,
+            });
+        const nameColList = demo.find('.semi-table-tbody .name-col');
+        const filteredData = data.filter(item => item.name.indexOf('1') > -1);
+        expect(nameColList.length).toBe(filteredData.length); // update dataSource with exist filter
+
+        const newData = getData(10);
+        const newFilteredData = newData.filter(item => item.name.indexOf('1') > -1);
+        demo.setProps({
+            dataSource: newData,
+        });
+        demo.update();
+        const newNameColList = demo.find('.semi-table-tbody .name-col');
+        expect(newNameColList.length).toBe(newFilteredData.length);
+    });
+    it(`test controlled dataSource and columns`, async () => {
+        let pagination = {
+            currentPage: 1,
+            total: data.length,
+            pageSize: 10,
+        };
+
+        const getPageData = () =>
+            data.slice(
+                (pagination.currentPage - 1) * pagination.pageSize,
+                pagination.currentPage * pagination.pageSize
+            );
+
+        let currentData = getPageData();
+        let columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                width: 150,
+                filters: [
+                    {
+                        text: '名字包含"1"',
+                        value: '1',
+                    },
+                    {
+                        text: '名字包含"2"',
+                        value: '2',
+                    },
+                ],
+                onFilter: (value, record) => record.name.indexOf(value) > -1,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                width: 150,
+                sorter: true,
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+            {
+                render: (text, record) => (
+                    <Tooltip content={record.description}>
+                        <Tag color="green">Show Info</Tag>
+                    </Tooltip>
+                ),
+                width: 150,
+            },
+        ];
+        const onChange = sinon.spy(({pagination: tablePagination, filters: tableFilters, sorters: tableSorters}) => {
+            if (tablePagination && tablePagination.currentPage !== pagination.currentPage) {
+                pagination.currentPage = tablePagination.currentPage;
+                currentData = getPageData();
+                columns = [...columns];
+                demo.setProps({
+                    dataSource: currentData,
+                    columns,
+                    pagination,
+                });
+            }
+        });
+        const demo = mount(
+            <Table onChange={onChange} dataSource={currentData} pagination={pagination} columns={columns}/>
+        );
+        const table = demo.find(BaseTable);
+        demo.find(`.${BASE_CLASS_PREFIX}-page .${BASE_CLASS_PREFIX}-page-item`)
+            .at(2)
+            .simulate('click', {
+                nativeEvent: null,
+            });
+        expect(onChange.called).toBe(true);
+        expect(
+            demo
+                .find(`.${BASE_CLASS_PREFIX}-page .${BASE_CLASS_PREFIX}-page-item`)
+                .at(2)
+                .hasClass(`${BASE_CLASS_PREFIX}-page-item-active`)
+        ).toBe(true);
+    });
+    it(`test resizable table`, async () => {
+        let columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                width: 150,
+                filters: [
+                    {
+                        text: '名字包含"1"',
+                        value: '1',
+                    },
+                    {
+                        text: '名字包含"2"',
+                        value: '2',
+                    },
+                ],
+                onFilter: (value, record) => record.name.indexOf(value) > -1,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                width: 150,
+                sorter: true,
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+                width: 300,
+            },
+            {
+                render: (text, record) => (
+                    <Tooltip content={record.description}>
+                        <Tag color="green">Show Info</Tag>
+                    </Tooltip>
+                ),
+            },
+        ];
+
+        const expandedRowRender = (record, index, expanded) => (
+            <article
+                style={{
+                    margin: 0,
+                }}
+            >
+                <p>{record.description}</p>
+            </article>
+        );
+
+        const demo = mount(
+            <Table columns={columns} dataSource={data} resizable expandedRowRender={expandedRowRender}/>
+        );
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-thead .react-resizable-handle`).length).toBe(
+            columns.reduce((count, col) => (typeof col.width === 'number' ? count + 1 : count), 0)
+        );
+    });
+    it('test table sortOrder descend', async () => {
+        const sortColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                sortOrder: 'descend',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        const sortData = [
+            {
+                key: '1',
+                name: 'John Brown',
+                age: 32,
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'Jim Green',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'Joe Black',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'Jim Red',
+                age: 32,
+                address: 'London No. 2 Lake Park',
+            },
+        ];
+        const targetData = sortData.reduce((a, b) => (a.name.length > b.name.length ? a : b));
+        const {name} = targetData;
+        const sortTable = mount(<Table columns={sortColumns} dataSource={sortData}/>);
+        const firstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0); // console.log(sortTable.debug({ ignoreProps: true }));
+
+        expect(firstCell.text()).toBe(name);
+    });
+    it('test table sortOrder ascend', async () => {
+        const sortColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                sortOrder: 'ascend',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        const sortData = [
+            {
+                key: '1',
+                name: 'John Brown',
+                age: 32,
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'Jim Green',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'Joe Black',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'Jim Red',
+                age: 32,
+                address: 'London No. 2 Lake Park',
+            },
+        ];
+        const targetData = sortData.reduce((a, b) => (a.name.length < b.name.length ? a : b));
+        const {name} = targetData;
+        const sortTable = mount(<Table columns={sortColumns} dataSource={sortData}/>);
+        const firstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(firstCell.text()).toBe(name);
+    });
+    it('test controlled sortOrder', async () => {
+        const sortColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                sortOrder: 'descend',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        const sortData = [
+            {
+                key: '1',
+                name: 'long name',
+                age: 32,
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'longest name',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'longer name',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'short',
+                age: 32,
+                address: 'London No. 2 Lake Park',
+            },
+        ];
+        const targetData = sortData.reduce((a, b) => (a.name.length > b.name.length ? a : b));
+        const {name} = targetData;
+        const sortTable = mount(<Table columns={sortColumns} dataSource={sortData}/>);
+        const firstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(firstCell.text()).toBe(name);
+        const ascendOrderColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                sortOrder: 'ascend',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ]; // test sortOrder: ascend
+
+        sortTable.setProps({
+            columns: ascendOrderColumns,
+        });
+        sortTable.update();
+        const ascendTargetData = sortData.reduce((a, b) => (a.name.length < b.name.length ? a : b));
+        const {name: ascendTargetName} = ascendTargetData;
+        const ascendFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(ascendFirstCell.text()).toBe(ascendTargetName); // test sortOrder: false, expect order as given data
+
+        const defaultOrderColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                sortOrder: false,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        sortTable.setProps({
+            columns: defaultOrderColumns,
+        });
+        sortTable.update();
+        const defaultTargetData = sortData[0];
+        const {name: defaultTargetName} = defaultTargetData;
+        const defaultFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(defaultFirstCell.text()).toBe(defaultTargetName);
+    });
+    it('test table select all when disabled all rows', async () => {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                width: 150,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                width: 150,
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        const rowSelection = {
+            onSelectAll: sinon.spy(() => {
+            }),
+            getCheckboxProps: sinon.spy(record => ({
+                disabled: true,
+                // disabled all
+                name: record.name,
+            })),
+        };
+        const demo = mount(<Table columns={columns} dataSource={data} rowSelection={rowSelection}/>);
+        demo.find(
+            `.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-selection .${BASE_CLASS_PREFIX}-checkbox`
+        ).simulate('click'); // should select 0 rows
+
+        expect(rowSelection.onSelectAll.getCall(0).args[1].length).toBe(0);
+    });
+    it('test jsx async data', async () => {
+        const asyncData = [
+            {
+                key: '1',
+                name: 'John Brown',
+                age: 32,
+                address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'Jim Green',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'Joe Black',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'Michael James',
+                age: 99,
+                address: 'Sidney No. 1 Lake Park',
+            },
+        ];
+        const demo = mount(
+            <Table dataSource={[]}>
+                <Column title="Name" dataIndex="name" key="name" render={(text, record, index) => <a>{text}</a>}/>
+                <Column title="Age" dataIndex="age" key="age"/>
+                <Column title="Address" dataIndex="address" key="address"/>
+            </Table>
+        );
+        setTimeout(() => {
+            demo.setProps({
+                dataSource: asyncData,
+            });
+        }, 2000);
+        await sleep(3000);
+        const baseTable = demo.find(BaseTable);
+        expect(baseTable.state('cachedColumns').length).toEqual(3);
+        expect(baseTable.state('dataSource').length).toEqual(4);
+    });
+    it('test cell align', async () => {
+        const columns = getColumns();
+        const alignRightColumns = columns.map(column => {
+            column.align = 'right';
+            return column;
+        });
+        const demo = mount(<Table dataSource={data} columns={alignRightColumns}/>);
+        const titleAlignCells = demo.find(`.${BASE_CLASS_PREFIX}-table-align-right`);
+        expect(titleAlignCells.length).toBeGreaterThan(0);
+        const bodyAlignCells = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-table-row-cell`);
+        bodyAlignCells.forEach(cell => {
+            expect(cell.style.textAlign).toEqual('right');
+        });
+    });
+    it('test column className', async () => {
+        const columns = getColumns();
+        const alignRightColumns = columns.map(column => {
+            column.className = 'test';
+            return column;
+        });
+        const demo = mount(<Table dataSource={data} columns={alignRightColumns}/>);
+        const titleAlignCells = demo.find(`.${BASE_CLASS_PREFIX}-table-row-head`);
+        const bodyAlignCells = demo.find(`.${BASE_CLASS_PREFIX}-table-row-cell`);
+        titleAlignCells.forEach(cell => {
+            expect(cell.hasClass('test')).toBeTruthy();
+        });
+        bodyAlignCells.forEach(cell => {
+            expect(cell.hasClass('test')).toBeTruthy();
+        });
+    });
+    it('test header appearance', async () => {
+        // object column
+        const columns = getColumns();
+        const demo = mount(
+            <Table
+                dataSource={data}
+                columns={columns}
+                scroll={{
+                    y: 500,
+                }}
+            />
+        );
+        expect(demo.find('.semi-table-thead').length).toEqual(1);
+        demo.setProps({
+            showHeader: false,
+        });
+        expect(demo.find('.semi-table-thead').length).toEqual(0); // jsx column
+
+        const jsxColumns = getJSXColumns();
+        const demo1 = mount(<Table dataSource={data}>{jsxColumns}</Table>);
+        expect(demo1.find('.semi-table-thead').length).toEqual(1);
+        demo1.setProps({
+            showHeader: false,
+        });
+        expect(demo1.find('.semi-table-thead').length).toEqual(0);
+    });
+    it('test ref getCurrentPageData', async () => {
+        // object column
+        const pageSize = 10;
+        const refObj = {
+            current: null,
+        };
+        const columns = getColumns();
+        const demo = mount(
+            <Table
+                dataSource={data}
+                ref={refObj}
+                columns={columns}
+                pagination={{
+                    pageSize,
+                }}
+            />
+        );
+        const {dataSource} = refObj.current.getCurrentPageData();
+        expect(dataSource.length).toEqual(pageSize); // jsx column
+
+        const jsxColumns = getJSXColumns();
+        const jsxRefObj = {
+            current: null,
+        };
+        const jsxDemo = mount(
+            <Table
+                dataSource={data}
+                ref={jsxRefObj}
+                pagination={{
+                    pageSize,
+                }}
+            >
+                {jsxColumns}
+            </Table>
+        );
+        const {dataSource: jsxData} = jsxRefObj.current.getCurrentPageData();
+        expect(jsxData.length).toEqual(pageSize);
+    });
+    it('test render expandIcon', async () => {
+        const expandedRowRender = () => <div>Semi Design</div>;
+
+        const columns = getColumns();
+        const demo = mount(
+            <Table
+                dataSource={data}
+                columns={columns}
+                expandedRowRender={expandedRowRender}
+                expandIcon={<IconStar size="small"/>}
+            />
+        );
+        expect(demo.find('.semi-icon-star').length).toBeGreaterThan(0);
+        const demo2 = mount(
+            <Table
+                dataSource={data}
+                columns={columns}
+                expandedRowRender={expandedRowRender}
+                defaultExpandAllRows
+                expandIcon={expanded => <div>{expanded && <IconStar size="small"/>}</div>}
+            />
+        );
+        expect(demo2.find('.semi-icon-star').length).toBeGreaterThan(0);
+    });
+    it(`test onRow/onCell`, async () => {
+        const onRowClick = sinon.spy(() => {
+        });
+        const onHeaderRowClick = sinon.spy(() => {
+        });
+        const onCellClick = sinon.spy(() => {
+        });
+        const onHeaderCellClick = sinon.spy(() => {
+        });
+        const onRow = sinon.spy((record, index) => ({
+            className: 'test-row',
+            onClick: onRowClick,
+        }));
+        const onHeaderRow = sinon.spy((record, index) => ({
+            className: 'test-row',
+            onClick: onHeaderRowClick,
+        }));
+        const columns = getColumns();
+        const onCellColumns = columns.map((column, index) => {
+            const style =
+                index === 0
+                    ? {
+                        width: 200,
+                        height: 60,
+                    }
+                    : {};
+
+            column.onCell = () => ({
+                onClick: onCellClick,
+                onCellClick,
+                style,
+            });
+
+            column.onHeaderCell = () => ({
+                onClick: onHeaderCellClick,
+                style,
+            });
+
+            return column;
+        });
+        const demo = mount(<Table dataSource={data} onRow={onRow} onHeaderRow={onHeaderRow} columns={onCellColumns}/>);
+        const tableCells = demo.find('.semi-table-body .semi-table-row-cell');
+        const tableHeaderCells = demo.find('.semi-table-thead .semi-table-row-head'); // cell style
+
+        expect(tableCells.at(0).instance().style.width).toEqual('200px');
+        expect(tableCells.at(0).instance().style.height).toEqual('60px');
+        expect(tableHeaderCells.at(0).instance().style.width).toEqual('200px');
+        expect(tableHeaderCells.at(0).instance().style.height).toEqual('60px'); // body click
+
+        tableCells.at(0).simulate('click');
+        expect(onCellClick.called).toBeTruthy();
+        const tableRows = demo.find('.semi-table-body .semi-table-row');
+        tableRows.at(0).simulate('click');
+        expect(onRowClick.called).toBeTruthy(); // header click
+
+        tableHeaderCells.at(0).simulate('click');
+        expect(onHeaderCellClick.called).toBeTruthy();
+        const tableHeaderRows = demo.find('.semi-table-thead .semi-table-row');
+        tableHeaderRows.at(0).simulate('click');
+        expect(onHeaderRowClick.called).toBeTruthy();
+    });
+    it('test header merge', async () => {
+        // 测试头部合并
+        function testHeaderMerge(demo, params) {
+            const rows = demo.find('.semi-table-thead .semi-table-row');
+            expect(rows.length).toEqual(2);
+            const firstRow = rows.at(0);
+            const secondRow = rows.at(1);
+            expect(firstRow.childAt(0).instance().colSpan).toEqual(2);
+            expect(firstRow.childAt(1).instance().colSpan).toEqual(2);
+            expect(firstRow.childAt(2).instance().colSpan).toEqual(1);
+            expect(firstRow.childAt(2).instance().rowSpan).toEqual(2);
+            expect(secondRow.childAt(0).instance().colSpan).toEqual(1);
+            expect(secondRow.childAt(1).instance().colSpan).toEqual(1);
+            expect(secondRow.childAt(2).instance().colSpan).toEqual(1);
+            expect(secondRow.childAt(3).instance().colSpan).toEqual(1);
+        }
+
+        const nestData = getNestData();
+        const filters = [
+            {
+                text: 'Code 45',
+                value: '45',
+            },
+            {
+                text: 'King 4',
+                value: 'King 4',
+            },
+        ];
+        const jsxDemo = mount(
+            <Table dataSource={nestData}>
+                <Column title={'Base Information'} dataIndex={'base'} fixed="left">
+                    <Column
+                        title={'Name'}
+                        dataIndex={'name'}
+                        fixed="left"
+                        width={200}
+                        filters={filters}
+                        onFilter={(value, record) => record.name.includes(value)}
+                    />
+                    <Column
+                        title={'Age'}
+                        dataIndex={'age'}
+                        width={100}
+                        fixed="left"
+                        sorter={(a, b) => (a.age - b.age > 0 ? 1 : -1)}
+                    />
+                </Column>
+                <Column title={'Company Information'} dataIndex={'company'}>
+                    <Column title={'Company Name'} dataIndex={'company.name'}/>
+                    <Column title={'Company Address'} dataIndex={'company.address'}/>
+                </Column>
+                <Column title={'Address'} dataIndex={'address'} width={250} fixed="right"/>
+            </Table>
+        );
+        const columns = getNestColumns();
+        const demo = mount(<Table dataSource={nestData} columns={columns}/>);
+        testHeaderMerge(jsxDemo);
+        testHeaderMerge(demo);
+    });
+    it('test without columns', async () => {
+        const jsxDemo = mount(<Table dataSource={data}></Table>);
+        const demo = mount(<Table dataSource={data} columns={[]}/>);
+        expect(jsxDemo.find('.semi-table-row-head').length).toBe(0);
+        expect(jsxDemo.find('.semi-table-row-cell').length).toBe(0);
+        expect(demo.find('.semi-table-row-head').length).toBe(0);
+        expect(demo.find('.semi-table-row-cell').length).toBe(0);
+    });
+    it('test useFullRender', async () => {
+        const columns = [
+            {
+                dataIndex: 'name',
+                width: 250,
+                filters: [
+                    {
+                        text: '名字包含"1"',
+                        value: '1',
+                    },
+                    {
+                        text: '名字包含"2"',
+                        value: '2',
+                    },
+                ],
+                onFilter: (value, record) => record.name.indexOf(value) > -1,
+                sorter: (a, b) => a.name.length - b.name.length,
+                // 此处将useFullRender设置为true开启完全自定义渲染
+                useFullRender: true,
+                // 此处从render的第四个形参中解构出 展开按钮、选择按钮、文本等内容
+                render: (text, record, index, {expandIcon, selection, indentText}) => {
+                    return (
+                        <span
+                            className="custom-render"
+                            style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            {indentText}
+                            {expandIcon}
+                            {selection}
+                            <span
+                                style={{
+                                    marginLeft: 8,
+                                }}
+                            >
+                                {text}
+                            </span>
+                        </span>
+                    );
+                },
+                title: ({sorter, filter, selection}) => (
+                    <span
+                        className="custom-title"
+                        style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            paddingLeft: 20,
+                        }}
+                    >
+                        {selection}
+                        <span
+                            style={{
+                                marginLeft: 8,
+                            }}
+                        >
+                            Name
+                        </span>
+                        {sorter}
+                        {filter}
+                    </span>
+                ),
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        const rowSelection = {
+            hidden: true,
+            fixed: 'left',
+        };
+        const demo = mount(
+            <Table
+                rowSelection={rowSelection}
+                columns={columns}
+                dataSource={data}
+                expandedRowRender={record => <article>{record.description}</article>}
+            />
+        );
+        const node = demo.find('.custom-render').at(0);
+        expect(node.children().length).toEqual(3);
+        expect(node.childAt(0).exists('.semi-table-expand-icon')).toBeTruthy();
+        expect(node.childAt(1).exists('.semi-table-selection-wrap')).toBeTruthy();
+        const title = demo.find('.custom-title').at(0);
+        expect(title.children().length).toEqual(4);
+        expect(title.childAt(0).exists('.semi-table-selection-wrap')).toBeTruthy();
+        expect(title.childAt(1).text()).toEqual('Name');
+        expect(title.childAt(2).exists('.semi-table-column-sorter')).toBeTruthy();
+        expect(title.childAt(3).exists('.semi-table-column-filter')).toBeTruthy();
+    });
+    it('test defaultExpandedRowKeys changed', async () => {
+        const expandedRowRender = (record, index) => <div>{`Semi Design ${index}`}</div>;
+
+        const pageSize = 20;
+        const defaultExpandedRowKeys = Array.from({
+            length: getRandomNumber(pageSize),
+        }).map((_, i) => String(i));
+        const newDefaultExpandedRowKeys = Array.from({
+            length: getRandomNumber(pageSize),
+        }).map((_, i) => String(i));
+        const columns = getColumns();
+        const demo = mount(
+            <Table
+                dataSource={data}
+                columns={columns}
+                expandedRowRender={expandedRowRender}
+                defaultExpandedRowKeys={defaultExpandedRowKeys}
+                pagination={{
+                    pageSize,
+                }}
+            />
+        );
+        expect(demo.find(BaseTable).state('expandedRowKeys').length).toEqual(defaultExpandedRowKeys.length);
+        demo.setProps({
+            defaultExpandedRowKeys: newDefaultExpandedRowKeys,
+        });
+        // 2.x defaultExpandedRowKeys 不再响应变化
+        expect(demo.find(BaseTable).state('expandedRowKeys').length).toEqual(defaultExpandedRowKeys.length);
+    });
+    it('test getCheckboxProps changed', async () => {
+        const defaultGetCheckboxProps = record => ({
+            disabled: record.key === '1',
+        });
+
+        const newGetCheckboxProps = record => ({
+            disabled: ['0', '1'].includes(record.key),
+        });
+
+        const columns = getColumns();
+        const demo = mount(
+            <Table
+                dataSource={getData(20)}
+                columns={columns}
+                pagination={false}
+                rowSelection={{
+                    getCheckboxProps: defaultGetCheckboxProps,
+                }}
+            />
+        );
+        expect(demo.find(BaseTable).state('disabledRowKeys').length).toEqual(1);
+        demo.setProps({
+            rowSelection: {
+                getCheckboxProps: newGetCheckboxProps,
+            },
+        });
+        expect(demo.find(BaseTable).state('disabledRowKeys').length).toEqual(2);
+    });
+    it('test pagination changed', async () => {
+        const total = 100;
+        const pagination = {
+            pageSize: 10,
+            currentPage: 2,
+        };
+        const newPagination = {
+            pageSize: 5,
+            currentPage: 1,
+        };
+        const columns = getColumns();
+        const demo = mount(<Table dataSource={getData(total)} columns={columns} pagination={pagination}/>);
+        const paginationProps = demo.find(BaseTable).state('pagination');
+        expect(paginationProps.total).toEqual(total);
+        expect(paginationProps.pageSize).toEqual(pagination.pageSize);
+        expect(paginationProps.currentPage).toEqual(pagination.currentPage);
+        demo.setProps({
+            pagination: newPagination,
+        });
+        await sleep(2000);
+        const newPaginationProps = demo.find(BaseTable).state('pagination');
+        expect(newPaginationProps.pageSize).toEqual(newPagination.pageSize);
+        expect(newPaginationProps.currentPage).toEqual(newPagination.currentPage);
+    });
+    it(`test grouped data change dataSource`, async () => {
+        const data = getGroupData();
+        const columns = getGroupColumns();
+        const groupedRowClick = sinon.spy();
+
+        const rowKey = record =>
+            `${record.city && record.city.toLowerCase()}-${record.job && record.job.toLowerCase()}`;
+
+        const demo = mount(
+            <Table
+                dataSource={data}
+                rowKey={rowKey}
+                groupBy={'city'}
+                columns={columns}
+                renderGroupSection={groupKey => <strong>Jobs in {groupKey}:</strong>}
+                onGroupedRow={(group, index) => ({
+                    onClick: groupedRowClick,
+                })}
+                clickGroupedRowToExpand
+                scroll={{
+                    y: 480,
+                }}
+            />
+        );
+        const newData = [
+            {
+                city: 'Tianjin',
+                job: 'FE',
+                department: 'IES',
+            },
+            {
+                city: 'Tianjin',
+                job: 'Android',
+                department: 'IES',
+            },
+            {
+                city: 'Wuhan',
+                job: 'Android',
+                department: 'IES',
+            },
+            {
+                city: 'Wuhan',
+                job: 'SE',
+                department: 'EE',
+            },
+            {
+                city: 'Chengdu',
+                job: 'Android',
+                department: 'EE',
+            },
+            {
+                city: 'Chengdu',
+                job: 'IOS',
+                department: 'EE',
+            },
+            {
+                city: 'Xiamen',
+                job: 'SE',
+                department: 'DATA',
+            },
+            {
+                city: 'Xiamen',
+                job: 'IOS',
+                department: 'DATA',
+            },
+        ];
+        demo.setProps({
+            dataSource: newData,
+        });
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-row-section`).length).toBe(4);
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-body .${BASE_CLASS_PREFIX}-table-row`).length).toBe(0);
+        demo.find(`.${BASE_CLASS_PREFIX}-table-row-section`)
+            .at(0)
+            .simulate('click');
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-row`).length).toBeGreaterThan(0);
+    });
+    it(`test given object columns and children`, async () => {
+        const demo = mount(
+            <Table dataSource={data} columns={columns}>
+                <Table.Column title="Age" dataIndex="age" key="age"/>
+            </Table>
+        );
+        const test = demo.find(BaseTable); // 同时传columns与children时，columns优先
+
+        expect(test.state('cachedColumns')).toEqual(columns);
+        expect(test.state('queries').length).toEqual(columns.length);
+    });
+    it('test header colSpan', async () => {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Home phone',
+                colSpan: 2,
+                dataIndex: 'tel',
+            },
+            {
+                title: 'Phone',
+                colSpan: 0,
+                dataIndex: 'phone',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ];
+        const data = [
+            {
+                key: '1',
+                name: 'ZhangSan',
+                age: 50,
+                tel: '010-20000000',
+                phone: 10010,
+                address: 'BeiJing No.1 High School',
+            },
+            {
+                key: '2',
+                name: 'LiSi',
+                tel: '010-30000000',
+                phone: 10086,
+                age: 40,
+                address: 'ShangHai No. 1 High School',
+            },
+            {
+                key: '3',
+                name: 'WangWu',
+                age: 60,
+                tel: '010-40000000',
+                phone: 10011,
+                address: 'NaiJing No.1 High School',
+            },
+            {
+                key: '4',
+                name: 'XiaoMing',
+                age: 20,
+                tel: '010-50000000',
+                phone: 12580,
+                address: 'ShiJiaZhuang No.1 High School',
+            },
+            {
+                key: '5',
+                name: 'XiaoHong',
+                age: 40,
+                tel: '010-60000000',
+                phone: 12530,
+                address: 'TaiBei No.2 High School',
+            },
+        ];
+        const demo = mount(<Table dataSource={data} columns={columns}/>);
+        expect(demo.find('.semi-table-row .semi-table-row-head').length).toBe(columns.length - 1);
+    });
+
+    it('test expandAllRows', async () => {
+        const expandedRowRender = () => <div>Semi Design</div>
+        const initData = [];
+
+        const columns = getColumns();
+        const demo = mount(<Table
+            dataSource={initData}
+            columns={columns}
+            expandedRowRender={expandedRowRender}
+            pagination={false}
+            expandAllRows
+        />);
+
+        const newData = getData(20);
+        demo.setProps({dataSource: newData});
+        demo.update();
+        const expandedRows = demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-expanded`)
+        expect(expandedRows.length).toEqual(newData.length);
+        // 动态切换 expandAllRows
+        demo.setProps({expandAllRows: false});
+        demo.update();
+        const newExpandedRows = demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-expanded`)
+        expect(newExpandedRows.length).toEqual(0);
+    });
+
+    it(`test defaultExpandAllGroupRows`, async () => {
+        const data = getGroupData();
+        const columns = getGroupColumns();
+        const rowKey = record => `${record.city && record.city.toLowerCase()}-${record.job && record.job.toLowerCase()}`;
+        const groupSize = new Set(data.map(item => item.city)).size;
+
+        const demo = mount(
+            <Table
+                dataSource={data}
+                rowKey={rowKey}
+                groupBy={'city'}
+                columns={columns}
+                renderGroupSection={groupKey => <strong>Jobs in {groupKey}:</strong>}
+                scroll={{y: 480}}
+                defaultExpandAllGroupRows
+            />
+        );
+
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-section.on`).length).toBe(groupSize);
+    });
+
+    it(`test expandAllGroupRows`, async () => {
+        const data = getGroupData();
+        const groupSize = new Set(data.map(item => item.city)).size;
+        const columns = getGroupColumns();
+        const rowKey = record => `${record.city && record.city.toLowerCase()}-${record.job && record.job.toLowerCase()}`;
+
+        const demo = mount(
+            <Table
+                dataSource={[]}
+                rowKey={rowKey}
+                groupBy={'city'}
+                columns={columns}
+                renderGroupSection={groupKey => <strong>Jobs in {groupKey}:</strong>}
+                scroll={{y: 480}}
+                expandAllGroupRows={true}
+            />
+        );
+
+        demo.setProps({dataSource: data});
+        demo.update();
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-section.on`).length).toBe(groupSize);
+        demo.setProps({expandAllGroupRows: false});
+        demo.update();
+        expect(demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-section.on`).length).toBe(0);
+    });
+
+    it('test defaultSortOrder', async () => {
+        const sortColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                defaultSortOrder: 'descend',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            }
+        ];
+        const sortData = [
+            {
+                key: '1',
+                name: 'long name',
+                age: 32,
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'longest name',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'longer name',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'short',
+                age: 32,
+                address: 'London No. 2 Lake Park',
+            },
+        ];
+        const onChange = sinon.spy(() => {
+        });
+
+        // test default descend
+        const targetData = sortData.reduce((a, b) => a.name.length > b.name.length ? a : b);
+        const {name} = targetData;
+        const sortTable = mount(<Table columns={sortColumns} dataSource={sortData} onChange={onChange}/>);
+        const firstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(firstCell.text()).toBe(name);
+
+        // test default ascend
+        const ascendOrderColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                defaultSortOrder: 'ascend',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            }
+        ];
+        sortTable.setProps({columns: ascendOrderColumns})
+        sortTable.update()
+        const ascendTargetData = sortData.reduce((a, b) => a.name.length < b.name.length ? a : b);
+        const {name: ascendTargetName} = ascendTargetData;
+        const ascendFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(ascendFirstCell.text()).toBe(ascendTargetName);
+
+        // test default false
+        const defaultOrderColumns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                sorter: (a, b) => a.name.length - b.name.length,
+                defaultSortOrder: false,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            }
+        ]
+        sortTable.setProps({columns: defaultOrderColumns})
+        sortTable.update()
+        const defaultTargetData = sortData[0]
+        const {name: defaultTargetName} = defaultTargetData;
+        const defaultFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(defaultFirstCell.text()).toBe(defaultTargetName);
+
+        // test click sorter
+        sortTable.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-sorter`).at(0).simulate('click', {nativeEvent: null});
+        expect(onChange.callCount).toBe(1);
+        expect(onChange.getCall(0).args[0].sorter.sortOrder).toBe('ascend');
+        sortTable.find(`.${BASE_CLASS_PREFIX}-table-thead .${BASE_CLASS_PREFIX}-table-column-sorter`).at(0).simulate('click', {nativeEvent: null});
+        expect(onChange.callCount).toBe(2);
+        expect(onChange.getCall(1).args[0].sorter.sortOrder).toBe('descend');
+
+        // test change data
+        const newData = [
+            {
+                key: '1',
+                name: 'longest name',
+                age: 18,
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'long name',
+                age: 20,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'longer name',
+                age: 16,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'short',
+                age: 33,
+                address: 'London No. 2 Lake Park',
+            },
+        ];
+        sortTable.setProps({dataSource: newData});
+        sortTable.update()
+        const newDescendTargetData = newData.reduce((a, b) => a.name.length > b.name.length ? a : b);
+        const {name: newDescendTargetName} = newDescendTargetData;
+        const newDataFirstCell = sortTable.find('.semi-table-tbody .semi-table-row .semi-table-row-cell').at(0);
+        expect(newDataFirstCell.text()).toBe(newDescendTargetName);
+    });
+
+    it(`test expandRowByClick`, async () => {
+        const onExpand = sinon.spy();
+        const onExpandedRowsChange = sinon.spy();
+
+        const demo = mount(
+            <Table
+                columns={columns}
+                dataSource={data}
+                onExpand={onExpand}
+                onExpandedRowsChange={onExpandedRowsChange}
+                expandedRowRender={() => <div>Semi Design</div>}
+                expandRowByClick
+            />
+        );
+
+        const table = demo.find(BaseTable);
+
+        const rows = demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`);
+        rows.at(0).simulate('click');
+        rows.at(1).simulate('click');
+        expect(onExpand.calledTwice).toBeTruthy();
+        expect(onExpandedRowsChange.calledTwice).toBeTruthy();
+        expect(onExpand.getCall(1).args[0]).toEqual(true);
+        expect(onExpand.getCall(1).args[1]).toEqual(data[1]);
+        expect(onExpand.getCall(1).args[2].constructor.name).toBe('SyntheticEvent');
+        expect(onExpandedRowsChange.getCall(1).args[0].length).toEqual(2);
+        expect(table.state(`expandedRowKeys`)).toEqual(['0', '1']);
+        const expandedRows = demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-expanded`);
+        expandedRows.at(0).simulate('click');
+        // 查看点击第二次是否折叠
+        const newExpandedRows = demo.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row-expanded`)
+        expect(newExpandedRows.length).toEqual(1);
+        expect(table.state(`expandedRowKeys`)).toEqual(['1']);
+    });
+});