feat(widgets): persist Beszel and Docker table layouts (#6490)

packages/widgets/src/common/use-persisted-table-layout.spec.ts

@@ -0,0 +1,83 @@
+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();
+  });
+});