@handled-ai/design-system 0.14.7 → 0.14.10

package/src/components/__tests__/virtualized-data-table-resize.test.tsx

@@ -0,0 +1,524 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { VirtualizedDataTable } from "../virtualized-data-table";
+// Verify the barrel re-export compiles (type-only import used below in tests)
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnSizingState } from "../../index";
+
+type TestRow = { id: string; name: string; value: number };
+
+const testColumns: ColumnDef<TestRow, unknown>[] = [
+  { accessorKey: "name", header: "Name", size: 200, minSize: 100 },
+  { accessorKey: "value", header: "Value", size: 150, minSize: 80 },
+];
+
+const testData: TestRow[] = [
+  { id: "1", name: "Alpha", value: 10 },
+  { id: "2", name: "Beta", value: 20 },
+];
+
+// ─── Group 1: Feature disabled by default ─────────────────────────────────────
+
+describe("VirtualizedDataTable — resize disabled by default", () => {
+  it("does not render resize handles when enableColumnResizing is omitted", () => {
+    const { container } = render(
+      <VirtualizedDataTable columns={testColumns} data={testData} height={300} />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(0);
+  });
+
+  it("does not render resize handles when enableColumnResizing={false} explicitly", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing={false}
+      />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(0);
+  });
+});
+
+// ─── Group 2: Handles appear and are correctly structured ─────────────────────
+
+describe("VirtualizedDataTable — resize handles render when enabled", () => {
+  it("renders one resize handle per resizable column", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(2);
+  });
+
+  it("each handle has aria-orientation='vertical'", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    container.querySelectorAll('[role="separator"]').forEach((sep) => {
+      expect(sep.getAttribute("aria-orientation")).toBe("vertical");
+    });
+  });
+
+  it("each handle has cursor-col-resize class", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    container.querySelectorAll('[role="separator"]').forEach((sep) => {
+      expect(sep.classList.contains("cursor-col-resize")).toBe(true);
+    });
+  });
+
+  it("header cells have 'relative' class when resizing is enabled", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    container.querySelectorAll('[role="columnheader"]').forEach((h) => {
+      expect((h as HTMLElement).classList.contains("relative")).toBe(true);
+    });
+  });
+
+  it("resizable header cells get pr-4 padding to prevent overlap with sort text", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    // Every header cell whose column can resize must have pr-4
+    container.querySelectorAll('[role="columnheader"]').forEach((h) => {
+      expect((h as HTMLElement).classList.contains("pr-4")).toBe(true);
+    });
+  });
+
+  it("non-resizable columns do NOT get pr-4 padding", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      { accessorKey: "name", header: "Name", size: 200, enableResizing: false },
+      { accessorKey: "value", header: "Value", size: 150 },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    // First column: enableResizing=false → no pr-4
+    expect((headers[0] as HTMLElement).classList.contains("pr-4")).toBe(false);
+    // Second column: resizable → has pr-4
+    expect((headers[1] as HTMLElement).classList.contains("pr-4")).toBe(true);
+  });
+
+  it("does not render a handle for a column with enableResizing: false", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      { accessorKey: "name", header: "Name", size: 200, enableResizing: false },
+      { accessorKey: "value", header: "Value", size: 150 },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    expect(container.querySelectorAll('[role="separator"]').length).toBe(1);
+  });
+});
+
+// ─── Group 3: Initial sizing from column defs ─────────────────────────────────
+
+describe("VirtualizedDataTable — initial column sizes", () => {
+  it("header cells render at their declared size", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    expect((headers[0] as HTMLElement).style.width).toBe("200px");
+    expect((headers[1] as HTMLElement).style.width).toBe("150px");
+  });
+
+  it("column cannot be dragged below its minSize (onChange mode)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    // Start at x=200, drag far left past minSize=100 → delta of -150 would give 50px
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 50 });
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    expect(parseInt(header.style.width, 10)).toBeGreaterThanOrEqual(100);
+    fireEvent.mouseUp(document);
+  });
+});
+
+// ─── Group 4: columnResizeMode="onEnd" (new default) ─────────────────────────
+//
+// With onEnd, sizing state is committed at mouseUp, not during mousemove.
+// Width in the DOM should be unchanged mid-drag, then reflect the new size
+// after mouseUp.
+
+describe("VirtualizedDataTable — columnResizeMode onEnd (default)", () => {
+  it("header width does NOT change during mousemove (committed on mouseUp)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        // columnResizeMode defaults to "onEnd" — do not pass it explicitly
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBeforeDrag = header.style.width;
+
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 }); // mid-drag: should not change yet
+    expect(header.style.width).toBe(widthBeforeDrag);
+
+    fireEvent.mouseUp(document);
+  });
+
+  it("header width changes after mouseUp completes the drag", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        // "onEnd" default
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBefore = parseInt(header.style.width, 10);
+
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 }); // +60px delta
+    fireEvent.mouseUp(document); // commits the resize
+
+    expect(parseInt(header.style.width, 10)).toBeGreaterThan(widthBefore);
+  });
+
+  it("onColumnSizingChange is called on mouseUp (not mousemove) in onEnd mode", () => {
+    const onSizingChange = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={{}}
+        onColumnSizingChange={onSizingChange}
+        // "onEnd" default
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 250 });
+    // Should NOT have been called yet mid-drag in onEnd mode
+    expect(onSizingChange).not.toHaveBeenCalled();
+
+    fireEvent.mouseUp(document);
+    // Now it should fire
+    expect(onSizingChange).toHaveBeenCalled();
+  });
+});
+
+// ─── Group 5: Drag changes column width (onChange mode) ───────────────────────
+
+describe("VirtualizedDataTable — drag resizing with columnResizeMode='onChange'", () => {
+  it("dragging right increases column width", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBefore = parseInt(header.style.width, 10);
+
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 }); // +60px delta
+    fireEvent.mouseUp(document);
+
+    expect(parseInt(header.style.width, 10)).toBeGreaterThan(widthBefore);
+  });
+
+  it("dragging left decreases column width", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const widthBefore = parseInt(header.style.width, 10);
+
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 160 }); // -40px delta
+    fireEvent.mouseUp(document);
+
+    expect(parseInt(header.style.width, 10)).toBeLessThan(widthBefore);
+  });
+
+  it("dragging one column does not change the adjacent column's width", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separators = container.querySelectorAll('[role="separator"]');
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    const secondWidthBefore = parseInt((headers[1] as HTMLElement).style.width, 10);
+
+    fireEvent.mouseDown(separators[0], { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 });
+    fireEvent.mouseUp(document);
+
+    expect(parseInt((headers[1] as HTMLElement).style.width, 10)).toBe(secondWidthBefore);
+  });
+
+  it("does not throw during resize in uncontrolled mode (no sizing props)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    expect(() => {
+      fireEvent.mouseDown(separator, { clientX: 200 });
+      fireEvent.mouseMove(document, { clientX: 250 });
+      fireEvent.mouseUp(document);
+    }).not.toThrow();
+  });
+});
+
+// ─── Group 6: Controlled mode ─────────────────────────────────────────────────
+
+describe("VirtualizedDataTable — controlled columnSizing", () => {
+  it("external columnSizing prop overrides the column def size", () => {
+    const sizing: ColumnSizingState = { name: 300 };
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={sizing}
+      />,
+    );
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    expect((headers[0] as HTMLElement).style.width).toBe("300px");
+    // Column not in sizing map keeps its column-def default
+    expect((headers[1] as HTMLElement).style.width).toBe("150px");
+  });
+
+  it("onColumnSizingChange is called when a resize drag occurs (onChange mode)", () => {
+    const onSizingChange = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+        columnSizing={{}}
+        onColumnSizingChange={onSizingChange}
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 250 });
+    expect(onSizingChange).toHaveBeenCalled();
+    fireEvent.mouseUp(document);
+  });
+
+  it("renders correctly when columnSizing is provided without onColumnSizingChange", () => {
+    const sizing: ColumnSizingState = { name: 280 };
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={sizing}
+      />,
+    );
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    expect(header.style.width).toBe("280px");
+  });
+});
+
+// ─── Group 7: Cell widths track header widths ─────────────────────────────────
+
+describe("VirtualizedDataTable — cell widths track column widths", () => {
+  it("row cells match the column width after a resize drag (onChange mode)", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnResizeMode="onChange"
+      />,
+    );
+    const separator = container.querySelector('[role="separator"]')!;
+    fireEvent.mouseDown(separator, { clientX: 200 });
+    fireEvent.mouseMove(document, { clientX: 260 });
+    fireEvent.mouseUp(document);
+
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    const newHeaderWidth = header.style.width;
+
+    // Data rows (aria-rowindex present) are rendered by the virtualizer.
+    // In happy-dom (no layout engine) the virtualizer may produce zero virtual
+    // items; if rows are present, verify their first cell tracks the header width.
+    const rows = container.querySelectorAll('[role="row"]');
+    for (let i = 1; i < rows.length; i++) {
+      const firstCell = rows[i].querySelector('[role="cell"]') as HTMLElement | null;
+      if (firstCell) {
+        expect(firstCell.style.width).toBe(newHeaderWidth);
+      }
+    }
+  });
+});
+
+// ─── Group 8: No regressions with enableColumnResizing on ────────────────────
+
+describe("VirtualizedDataTable — no regressions with enableColumnResizing on", () => {
+  it("onSortingChange fires when a sortable header is clicked", () => {
+    const columnsWithSort: ColumnDef<TestRow, unknown>[] = [
+      { accessorKey: "name", header: "Name", size: 200, enableSorting: true },
+      { accessorKey: "value", header: "Value", size: 150, enableSorting: true },
+    ];
+    const onSortingChange = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columnsWithSort}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        sorting={[]}
+        onSortingChange={onSortingChange}
+      />,
+    );
+    const sortButton = container.querySelector('[role="columnheader"] button')!;
+    fireEvent.click(sortButton);
+    expect(onSortingChange).toHaveBeenCalled();
+  });
+
+  it("onRowClick prop is accepted without error; scroll container is present", () => {
+    // The virtualizer produces no virtual rows in happy-dom (no layout engine),
+    // so we verify the component mounts cleanly with onRowClick wired and that
+    // the table scroll container is in the DOM.
+    const onRowClick = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        onRowClick={onRowClick}
+      />,
+    );
+    expect(container.querySelector('[role="table"]')).not.toBeNull();
+    // If the virtualizer happens to render rows, clicking them calls onRowClick
+    const dataRows = Array.from(
+      container.querySelectorAll('[role="row"]'),
+    ).filter((r) => r.getAttribute("aria-rowindex") !== null);
+    if (dataRows.length > 0) {
+      fireEvent.click(dataRows[0]);
+      expect(onRowClick).toHaveBeenCalled();
+    }
+  });
+
+  it("empty state renders correctly when data is empty and resizing is enabled", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={[]}
+        height={300}
+        enableColumnResizing
+        emptyMessage="Nothing here"
+      />,
+    );
+    expect(container.textContent).toContain("Nothing here");
+  });
+});
+
+// ─── Group 9: Barrel re-export of ColumnSizingState ──────────────────────────
+
+describe("VirtualizedDataTable — ColumnSizingState barrel re-export", () => {
+  it("ColumnSizingState from the barrel index is compatible with the columnSizing prop", () => {
+    // This test is intentionally type-level: the import at the top of this file
+    // uses `import type { ColumnSizingState } from '../../index'`. If the barrel
+    // no longer re-exports it, tsc (run via `pnpm typecheck`) will error.
+    // At runtime we just verify the prop is accepted with a well-typed value.
+    const sizing: ColumnSizingState = { name: 250 };
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+        columnSizing={sizing}
+      />,
+    );
+    const header = container.querySelectorAll('[role="columnheader"]')[0] as HTMLElement;
+    expect(header.style.width).toBe("250px");
+  });
+});