377 lines
9.7 KiB
TypeScript
377 lines
9.7 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import {
|
|
createColumnHelper,
|
|
getCoreRowModel,
|
|
useReactTable,
|
|
getSortedRowModel,
|
|
getFilteredRowModel,
|
|
TableOptions,
|
|
} from '@tanstack/react-table';
|
|
|
|
import { TableHeaderRow } from './TableHeaderRow';
|
|
import { filterHOC } from './Filter';
|
|
|
|
type MockData = {
|
|
id: string;
|
|
name: string;
|
|
age: number;
|
|
status: string;
|
|
};
|
|
|
|
const columnHelper = createColumnHelper<MockData>();
|
|
|
|
describe('Basic rendering', () => {
|
|
it('renders header row with all columns', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
}),
|
|
columnHelper.accessor('age', {
|
|
id: 'age',
|
|
header: 'Age',
|
|
}),
|
|
columnHelper.accessor('status', {
|
|
id: 'status',
|
|
header: 'Status',
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
|
|
expect(
|
|
screen.getByRole('columnheader', { name: /Name/ })
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole('columnheader', { name: /Age/ })
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole('columnheader', { name: /Status/ })
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders empty header row when no headers provided', () => {
|
|
const { container } = render(
|
|
<table>
|
|
<thead>
|
|
<TableHeaderRow headers={[]} tableMeta={{}} />
|
|
</thead>
|
|
</table>
|
|
);
|
|
|
|
const row = container.querySelector('tr');
|
|
expect(row).toBeInTheDocument();
|
|
expect(row?.children.length).toBe(0);
|
|
});
|
|
});
|
|
|
|
describe('Column metadata', () => {
|
|
it('applies custom className from column meta', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
meta: {
|
|
className: 'custom-header-class',
|
|
},
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
const headerCell = screen.getByRole('columnheader', { name: /Name/ });
|
|
expect(headerCell).toHaveClass('custom-header-class');
|
|
});
|
|
|
|
it('applies custom width from column meta', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
meta: {
|
|
width: '200px',
|
|
},
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
const headerCell = screen.getByRole('columnheader', { name: /Name/ });
|
|
expect(headerCell).toHaveStyle({ width: '200px' });
|
|
});
|
|
|
|
it('handles missing column meta gracefully', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
// no meta provided
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
expect(screen.getByText('Name')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('Sorting functionality', () => {
|
|
it('renders sortable columns with sort icons', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
enableSorting: true,
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
const sortButton = screen.getByRole('button', { name: /Sort column/ });
|
|
expect(sortButton).toBeInTheDocument();
|
|
});
|
|
|
|
it('calls onSortChange callback when provided', async () => {
|
|
const user = userEvent.setup();
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
enableSorting: true,
|
|
}),
|
|
];
|
|
|
|
const onSortChange = vi.fn();
|
|
|
|
renderTableHeaderRow(columns, onSortChange);
|
|
const sortButton = screen.getByRole('button', { name: /Sort column/ });
|
|
|
|
expect(sortButton).toBeInTheDocument();
|
|
await user.click(sortButton!);
|
|
|
|
// First click - sort descending
|
|
await user.click(sortButton!);
|
|
expect(onSortChange).toHaveBeenCalledWith('name', true);
|
|
|
|
// Second click - sort ascending
|
|
await user.click(sortButton!);
|
|
expect(onSortChange).toHaveBeenCalledWith('name', false);
|
|
});
|
|
|
|
it('does not render sort button for non-sortable columns', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
enableSorting: false,
|
|
enableColumnFilter: false,
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
const sortButton = screen.queryByRole('button', { name: /Sort column/ });
|
|
|
|
expect(sortButton).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('Filtering functionality', () => {
|
|
it('renders filter when column is filterable', () => {
|
|
const columns = [
|
|
columnHelper.accessor('status', {
|
|
id: 'status',
|
|
header: 'Status',
|
|
enableColumnFilter: true,
|
|
meta: {
|
|
filter: filterHOC('Filter by status'),
|
|
},
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
expect(screen.getByText('Filter')).toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render filter when column is not filterable', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
enableColumnFilter: false,
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
expect(screen.queryByText('Filter')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('uses custom filter component from meta', () => {
|
|
function CustomFilter() {
|
|
return <div>Custom Filter Component</div>;
|
|
}
|
|
|
|
const columns = [
|
|
columnHelper.accessor('status', {
|
|
id: 'status',
|
|
header: 'Status',
|
|
enableColumnFilter: true,
|
|
meta: {
|
|
filter: CustomFilter,
|
|
},
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
expect(screen.getByText('Custom Filter Component')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders filter with options derived from data', async () => {
|
|
const user = userEvent.setup();
|
|
const columns = [
|
|
columnHelper.accessor('status', {
|
|
id: 'status',
|
|
header: 'Status',
|
|
enableColumnFilter: true,
|
|
meta: {
|
|
filter: filterHOC('Filter by status'),
|
|
},
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
|
|
// Open the filter menu
|
|
const filterButton = screen.getByText('Filter');
|
|
await user.click(filterButton);
|
|
|
|
// Verify the filter options are derived from the actual data
|
|
// mockData has 'active' and 'inactive' statuses
|
|
expect(screen.getByLabelText('active')).toBeInTheDocument();
|
|
expect(screen.getByLabelText('inactive')).toBeInTheDocument();
|
|
});
|
|
|
|
it('provides filter options from table meta via custom transformer', async () => {
|
|
const user = userEvent.setup();
|
|
|
|
const columns = [
|
|
columnHelper.accessor('status', {
|
|
id: 'status',
|
|
header: 'Status',
|
|
enableColumnFilter: true,
|
|
meta: {
|
|
filter: filterHOC('Filter by status', () => [
|
|
'pending',
|
|
'approved',
|
|
'rejected',
|
|
]),
|
|
},
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
|
|
// Open the filter menu
|
|
const filterButton = screen.getByText('Filter');
|
|
await user.click(filterButton);
|
|
|
|
// Verify the custom filter options from the transformer are rendered
|
|
expect(screen.getByLabelText('pending')).toBeInTheDocument();
|
|
expect(screen.getByLabelText('approved')).toBeInTheDocument();
|
|
expect(screen.getByLabelText('rejected')).toBeInTheDocument();
|
|
|
|
// Verify the default data-derived options are NOT present
|
|
expect(screen.queryByLabelText('active')).not.toBeInTheDocument();
|
|
expect(screen.queryByLabelText('inactive')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('Edge cases', () => {
|
|
it('handles columns with function headers', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: () => <span>Dynamic Header</span>,
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
expect(screen.getByText('Dynamic Header')).toBeInTheDocument();
|
|
});
|
|
|
|
it('handles columns with complex header content', () => {
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: () => (
|
|
<div>
|
|
<span>Name</span>
|
|
<span className="badge">Required</span>
|
|
</div>
|
|
),
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
expect(screen.getByText('Name')).toBeInTheDocument();
|
|
expect(screen.getByText('Required')).toBeInTheDocument();
|
|
});
|
|
|
|
it('handles rapid sort clicks without errors', async () => {
|
|
const user = userEvent.setup();
|
|
const columns = [
|
|
columnHelper.accessor('name', {
|
|
id: 'name',
|
|
header: 'Name',
|
|
enableSorting: true,
|
|
}),
|
|
];
|
|
|
|
renderTableHeaderRow(columns);
|
|
const sortButton = screen.getByRole('button', { name: /Sort column/ });
|
|
|
|
// Click multiple times rapidly
|
|
await user.click(sortButton!);
|
|
await user.click(sortButton!);
|
|
await user.click(sortButton!);
|
|
|
|
// Should not throw and component should still be rendered
|
|
expect(screen.getByText('Name')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
const mockData: MockData[] = [
|
|
{ id: '1', name: 'John Doe', age: 30, status: 'active' },
|
|
{ id: '2', name: 'Jane Smith', age: 25, status: 'inactive' },
|
|
{ id: '3', name: 'Bob Johnson', age: 35, status: 'active' },
|
|
];
|
|
|
|
// Helper function to render TableHeaderRow with a table
|
|
function renderTableHeaderRow(
|
|
columns: TableOptions<MockData>['columns'],
|
|
onSortChange?: (colId: string, desc: boolean) => void
|
|
) {
|
|
function TestComponent() {
|
|
const table = useReactTable({
|
|
data: mockData,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
});
|
|
|
|
const headerGroup = table.getHeaderGroups()[0];
|
|
|
|
return (
|
|
<table>
|
|
<thead>
|
|
<TableHeaderRow
|
|
headers={headerGroup.headers}
|
|
onSortChange={onSortChange}
|
|
tableMeta={undefined}
|
|
/>
|
|
</thead>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
return render(<TestComponent />);
|
|
}
|