mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zeekayandHanzo Dev
03f38fbef0
react-table went from 8 to 9 with nothing migrated. 9 has no useReactTable and no getCoreRowModel, so the one component every list in the app renders through could not be imported, and ColumnDef takes the table's features as its first type argument, so all 42 column lists stopped typing their rows: 217 of the 498 errors in the app's typecheck. DataTable now names the four features it uses — paging, row selection, column visibility, column sizing — and calls useTable. DataTableColumnDef is ColumnDef over those features, so a column list still says only what a row is. The second type parameter goes: 9's table takes columns of unknown value, and no caller ever passed one. Two things the types turned up. `enableSorting: false` sat on two select columns of a table that has never sorted; without the sorting feature the option does not exist, and neither does the sorting. The organisation insights table erased its three row types through `as unknown as` to feed one DataTable; it renders one per view, typed, and the casts are gone. The server rejects any other view before the component renders. data-table.test.tsx renders the table and drives the instance: headers and cells, a hidden column, a sized one, one-based paging read from the props and reported back, selection by the caller's row id. Against the old file it fails 7 of 7 at the import. Co-authored-by: Hanzo Dev <[email protected]>
133 lines
4.1 KiB
TypeScript
133 lines
4.1 KiB
TypeScript
import React from 'react';
|
||
|
||
import assert from 'node:assert';
|
||
import { describe, it } from 'node:test';
|
||
import { renderToStaticMarkup } from 'react-dom/server';
|
||
|
||
import type { DataTableColumnDef, DataTableInstance } from '../primitives/data-table';
|
||
import { DataTable } from '../primitives/data-table';
|
||
|
||
type Person = { id: string; name: string; email: string };
|
||
|
||
const people: Person[] = [
|
||
{ id: 'a', name: 'Ada', email: '[email protected]' },
|
||
{ id: 'b', name: 'Grace', email: '[email protected]' },
|
||
];
|
||
|
||
const columns: DataTableColumnDef<Person>[] = [
|
||
{ header: 'Name', accessorKey: 'name', size: 40 },
|
||
{ header: () => <em>Email</em>, accessorKey: 'email', cell: ({ row }) => row.original.email },
|
||
];
|
||
|
||
/** Renders the table once and hands back the markup and the instance its children were given. */
|
||
const render = (props: Partial<React.ComponentProps<typeof DataTable<Person>>> = {}) => {
|
||
let instance: DataTableInstance<Person> | undefined;
|
||
|
||
const html = renderToStaticMarkup(
|
||
<DataTable columns={columns} data={people} {...props}>
|
||
{(table) => {
|
||
instance = table;
|
||
|
||
return null;
|
||
}}
|
||
</DataTable>,
|
||
);
|
||
|
||
assert.ok(instance, 'children were never called with the table');
|
||
|
||
return { html, table: instance };
|
||
};
|
||
|
||
describe('DataTable', () => {
|
||
it('renders a header and a cell for every column of every row', () => {
|
||
const { html } = render();
|
||
|
||
assert.match(html, /<th[^>]*>Name<\/th>/);
|
||
assert.match(html, /<th[^>]*><em>Email<\/em><\/th>/);
|
||
|
||
for (const person of people) {
|
||
assert.ok(html.includes(person.name), `${person.name} is missing`);
|
||
assert.ok(html.includes(person.email), `${person.email} is missing`);
|
||
}
|
||
|
||
assert.strictEqual(html.match(/<tr/g)?.length, 1 + people.length);
|
||
});
|
||
|
||
it('sizes a cell from its column', () => {
|
||
const { html } = render();
|
||
|
||
assert.match(html, /<td[^>]*style="width:40px"[^>]*>Ada<\/td>/);
|
||
});
|
||
|
||
it('leaves out a column the caller hides', () => {
|
||
const { html } = render({ columnVisibility: { email: false } });
|
||
|
||
assert.ok(!html.includes('Email'));
|
||
assert.ok(!html.includes('[email protected]'));
|
||
assert.ok(html.includes('Ada'));
|
||
});
|
||
|
||
it('reads the page it is on from the props, one-based', () => {
|
||
const { table } = render({ currentPage: 3, perPage: 20, totalPages: 5 });
|
||
|
||
assert.deepStrictEqual(table.state.pagination, { pageIndex: 2, pageSize: 20 });
|
||
assert.strictEqual(table.getPageCount(), 5);
|
||
assert.strictEqual(table.getCanPreviousPage(), true);
|
||
assert.strictEqual(table.getCanNextPage(), true);
|
||
|
||
// The server paged the data already: every row given is shown.
|
||
assert.strictEqual(table.getRowModel().rows.length, people.length);
|
||
});
|
||
|
||
it('reports a page change one-based and leaves the paging to the caller', () => {
|
||
const calls: [number, number][] = [];
|
||
|
||
const { table } = render({
|
||
currentPage: 1,
|
||
perPage: 10,
|
||
totalPages: 5,
|
||
onPaginationChange: (page, perPage) => calls.push([page, perPage]),
|
||
});
|
||
|
||
table.nextPage();
|
||
table.setPageIndex(4);
|
||
|
||
assert.deepStrictEqual(calls, [
|
||
[2, 10],
|
||
[5, 10],
|
||
]);
|
||
});
|
||
|
||
it('marks the rows the caller selected, by the caller’s row id', () => {
|
||
const { html, table } = render({
|
||
enableRowSelection: true,
|
||
rowSelection: { b: true },
|
||
getRowId: (row) => row.id,
|
||
});
|
||
|
||
assert.strictEqual(html.match(/data-state="selected"/g)?.length, 1);
|
||
assert.deepStrictEqual(
|
||
table.getFilteredSelectedRowModel().rows.map((row) => row.original.name),
|
||
['Grace'],
|
||
);
|
||
assert.strictEqual(table.getIsAllPageRowsSelected(), false);
|
||
});
|
||
|
||
it('hands a new selection to the caller instead of keeping it', () => {
|
||
const selections: Record<string, boolean>[] = [];
|
||
|
||
const { table } = render({
|
||
enableRowSelection: true,
|
||
rowSelection: { b: true },
|
||
getRowId: (row) => row.id,
|
||
// react-table builds its maps without a prototype; compare by content.
|
||
onRowSelectionChange: (selection) => selections.push({ ...selection }),
|
||
});
|
||
|
||
table.getRow('a').toggleSelected(true);
|
||
table.toggleAllPageRowsSelected(false);
|
||
|
||
assert.deepStrictEqual(selections, [{ a: true, b: true }, {}]);
|
||
});
|
||
});
|