Skip to content

Commit

Permalink
feat: add test case
Browse files Browse the repository at this point in the history
  • Loading branch information
kiner-tang committed Feb 17, 2024
1 parent 17bed24 commit b34469b
Show file tree
Hide file tree
Showing 6 changed files with 6,455 additions and 1 deletion.
4 changes: 4 additions & 0 deletions docs/examples/shadow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,23 +138,27 @@ const columns2: ColumnsType<User> = [
title: 'Name0',
fixed: 'left',
dataIndex: 'name0',
width: 100,
},
{
key: 'name1',
title: 'Name1',
fixed: 'left',
dataIndex: 'name1',
width: 100,
},
{
key: 'name2',
title: 'Name2',
dataIndex: 'name2',
width: 500,
},
{
key: 'name3',
title: 'Name3',
fixed: 'right',
dataIndex: 'name3',
width: 100,
},
],
},
Expand Down
11 changes: 11 additions & 0 deletions tests/FixedColumn.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
import { act } from 'react-dom/test-utils';
import Table, { type ColumnsType } from '../src';
import { safeAct } from './utils';
import { RowColSpanWithFixed, RowColSpanWithFixed2 } from './__mocks__/shadowTest';

function triggerResize(ele: HTMLElement) {
_rs([{ target: ele }] as any);
Expand Down Expand Up @@ -298,4 +299,14 @@ describe('Table.FixedColumn', () => {
expect(container.querySelector('.healer-table')).toBeTruthy();
});
});
it('shadow should display correctly', async () => {
const { container, rerender } = render(<RowColSpanWithFixed />);
expect(container.querySelectorAll('.rc-table-cell-fix-left-last').length).toBe(104);
expect(container.querySelectorAll('.rc-table-cell-fix-right-first').length).toBe(101);
expect(container).toMatchSnapshot();
rerender(<RowColSpanWithFixed2 />);
expect(container.querySelectorAll('.rc-table-cell-fix-left-last').length).toBe(4);
expect(container.querySelectorAll('.rc-table-cell-fix-right-first').length).toBe(4);
expect(container).toMatchSnapshot();
});
});
180 changes: 180 additions & 0 deletions tests/__mocks__/shadowTest.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import React from 'react';
import Table from '../../src';
import '../../assets/index.less';
import type { ColumnsType } from '../../src';

interface DataType {
key: React.Key;
name: string;
age: number;
street: string;
building: string;
number: number;
companyAddress: string;
companyName: string;
gender: string;
}

const columns: ColumnsType<DataType> = [
{
title: 'Other',
fixed: 'left',
ellipsis: true,
children: [
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 150,
fixed: 'left',
ellipsis: true,
},
{
title: 'Address',
children: [
{
title: 'Street',
dataIndex: 'street',
key: 'street',
width: 150,
fixed: 'left',
ellipsis: true,
},
{
title: 'Block',
children: [
{
title: 'Door No.',
dataIndex: 'number',
key: 'number',
width: 100,
fixed: 'left',
ellipsis: true,
},
{
title: 'Building',
dataIndex: 'building',
key: 'building',
width: 100,
fixed: 'left',
ellipsis: true,
},
],
},
],
},
],
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 100,
},
{
title: 'Company',
children: [
{
title: 'Company Address',
dataIndex: 'companyAddress',
key: 'companyAddress',
width: 200,
},
{
title: 'Company Name',
dataIndex: 'companyName',
key: 'companyName',
},
],
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
width: 80,
fixed: 'right',
},
];

const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}

interface User {
key: number;
name: string;
}

const columns2: ColumnsType<User> = [
{
title: '父表头右侧的阴影导致整个表格最右侧有空隙',
key: 'title',
children: [
{
key: 'name0',
title: 'Name0',
fixed: 'left',
dataIndex: 'name0',
width: 100,
},
{
key: 'name1',
title: 'Name1',
fixed: 'left',
dataIndex: 'name1',
width: 100,
},
{
key: 'name2',
title: 'Name2',
dataIndex: 'name2',
width: 500,
},
{
key: 'name3',
title: 'Name3',
fixed: 'right',
dataIndex: 'name3',
width: 100,
},
],
},
];

const data2: User[] = [
{
key: 0,
name: 'Jack',
},
{
key: 1,
name: 'Jack1',
},
{
key: 2,
name: 'Jack1',
},
];

export const RowColSpanWithFixed = () => (
<Table columns={columns} data={data} className="table1" scroll={{ x: 1500, y: 500 }} />
);
export const RowColSpanWithFixed2 = () => (
<Table columns={columns2} data={data2} className="table2" scroll={{ x: 1500, y: 500 }} />
);

export default {
RowColSpanWithFixed,
RowColSpanWithFixed2,
};
Loading

0 comments on commit b34469b

Please sign in to comment.