84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { act, createElement } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { afterEach, beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
|
|
|
|
import type { Root } from "react-dom/client";
|
|
import type { DataTableColumn } from "mantine-datatable";
|
|
|
|
const tableState = vi.hoisted(() => ({
|
|
columnsOrder: ["name", "state"],
|
|
columnsWidth: [] as Record<string, string | number>[],
|
|
}));
|
|
|
|
vi.mock("mantine-datatable", () => ({
|
|
useDataTableColumns: ({ columns }: { columns: DataTableColumn<unknown>[] }) => ({
|
|
effectiveColumns: columns,
|
|
columnsOrder: tableState.columnsOrder,
|
|
columnsWidth: tableState.columnsWidth,
|
|
setColumnsOrder: vi.fn(),
|
|
setMultipleColumnWidths: vi.fn(),
|
|
}),
|
|
}));
|
|
|
|
import { usePersistedTableLayout } from "./use-persisted-table-layout";
|
|
|
|
const columns: DataTableColumn<{ name: string; state: string }>[] = [{ accessor: "name" }, { accessor: "state" }];
|
|
const columnAccessors = ["name", "state"] as const;
|
|
|
|
const LayoutHarness = ({ itemId, onLayoutChange }: { itemId: string; onLayoutChange: (layout: unknown) => void }) => {
|
|
usePersistedTableLayout({
|
|
columns,
|
|
columnAccessors,
|
|
columnOrder: "",
|
|
columnWidths: "",
|
|
itemId,
|
|
storeKeyPrefix: "test-table",
|
|
onLayoutChange,
|
|
});
|
|
return null;
|
|
};
|
|
|
|
describe("usePersistedTableLayout", () => {
|
|
let container: HTMLDivElement;
|
|
let root: Root;
|
|
|
|
beforeAll(() => {
|
|
Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { value: true, writable: true });
|
|
});
|
|
|
|
beforeEach(() => {
|
|
vi.useFakeTimers();
|
|
tableState.columnsOrder = ["name", "state"];
|
|
tableState.columnsWidth = [];
|
|
container = document.createElement("div");
|
|
root = createRoot(container);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await act(async () => root.unmount());
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test("flushes a pending layout through the callback for its originating item", async () => {
|
|
const firstItemLayoutChange = vi.fn();
|
|
const secondItemLayoutChange = vi.fn();
|
|
|
|
await act(async () => {
|
|
root.render(createElement(LayoutHarness, { itemId: "first", onLayoutChange: firstItemLayoutChange }));
|
|
});
|
|
|
|
tableState.columnsOrder = ["state", "name"];
|
|
await act(async () => {
|
|
root.render(createElement(LayoutHarness, { itemId: "first", onLayoutChange: firstItemLayoutChange }));
|
|
});
|
|
expect(firstItemLayoutChange).not.toHaveBeenCalled();
|
|
|
|
await act(async () => {
|
|
root.render(createElement(LayoutHarness, { itemId: "second", onLayoutChange: secondItemLayoutChange }));
|
|
});
|
|
|
|
expect(firstItemLayoutChange).toHaveBeenCalledWith({ columnOrder: JSON.stringify(["state", "name"]) });
|
|
expect(secondItemLayoutChange).not.toHaveBeenCalled();
|
|
});
|
|
});
|