45 lines
2.0 KiB
TypeScript
45 lines
2.0 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The R14 zoom-fit foundation: DataTable's opt-in `fixedLayout` renders a <colgroup> and puts the
|
|
// table into `table-layout: fixed`, so columns with a width keep it and the rest (fluid text columns)
|
|
// split the remainder + truncate instead of pushing the table wider than its container. Off by
|
|
// default so existing content-sized tables are untouched.
|
|
import { describe, it, expect, afterEach, vi } from "vitest";
|
|
import { render, cleanup } from "@testing-library/react";
|
|
import DataTable, { type Column } from "./DataTable";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
|
|
});
|
|
|
|
afterEach(cleanup);
|
|
|
|
type Row = { a: string; b: string };
|
|
const columns: Column<Row>[] = [
|
|
{ key: "a", header: "A", width: "5rem", render: (r) => r.a },
|
|
{ key: "b", header: "B", render: (r) => r.b }, // fluid — no width
|
|
];
|
|
const rows: Row[] = [{ a: "1", b: "hello" }];
|
|
|
|
describe("DataTable fixedLayout", () => {
|
|
it("renders a width-bearing colgroup and table-fixed only when fixedLayout is set", () => {
|
|
const { container } = render(
|
|
<DataTable rows={rows} columns={columns} rowKey={(r) => r.a} fixedLayout />,
|
|
);
|
|
const table = container.querySelector("table");
|
|
expect(table?.className).toContain("table-fixed");
|
|
|
|
const cols = container.querySelectorAll("colgroup col");
|
|
expect(cols).toHaveLength(2);
|
|
expect((cols[0] as HTMLElement).style.width).toBe("5rem"); // fixed column keeps its width
|
|
expect((cols[1] as HTMLElement).style.width).toBe(""); // fluid column: no width, splits remainder
|
|
});
|
|
|
|
it("omits the colgroup and stays auto-layout by default", () => {
|
|
const { container } = render(<DataTable rows={rows} columns={columns} rowKey={(r) => r.a} />);
|
|
expect(container.querySelector("colgroup")).toBeNull();
|
|
expect(container.querySelector("table")?.className).not.toContain("table-fixed");
|
|
});
|
|
});
|