@rovula/ui 0.1.28 → 0.1.29

package/src/components/DataTable/DataTable.test.tsx

@@ -0,0 +1,696 @@
+import type { ReactNode } from "react";
+import { ColumnDef } from "@tanstack/react-table";
+import {
+  act,
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { DataTable } from "./DataTable";
+
+type TestRow = { id: string; name: string };
+
+const baseColumns: ColumnDef<TestRow>[] = [
+  { accessorKey: "name", header: "Name" },
+];
+
+function tableWrap(node: ReactNode) {
+  return <div style={{ height: 420, minHeight: 420 }}>{node}</div>;
+}
+
+function getScrollHost(container: HTMLElement): HTMLElement {
+  const el = container.querySelector(".min-h-0.overflow-auto");
+  if (!el || !(el instanceof HTMLElement)) {
+    throw new Error("scroll host not found");
+  }
+  return el;
+}
+
+describe("DataTable", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders headers and row cells", () => {
+    const data: TestRow[] = [
+      { id: "a", name: "Alpha" },
+      { id: "b", name: "Bravo" },
+    ];
+
+    render(
+      tableWrap(
+        <DataTable
+          columns={baseColumns}
+          data={data}
+          paginationMode="client"
+        />,
+      ),
+    );
+
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Bravo")).toBeInTheDocument();
+  });
+
+  it("marks highlighted row with data-highlighted", () => {
+    const data: TestRow[] = [
+      { id: "a", name: "Alpha" },
+      { id: "b", name: "Bravo" },
+    ];
+
+    const { container } = render(
+      tableWrap(
+        <DataTable
+          columns={baseColumns}
+          data={data}
+          paginationMode="client"
+          highlightRowId="b"
+        />,
+      ),
+    );
+
+    const rowB = container.querySelector('tr[data-row-id="b"]');
+    expect(rowB).toHaveAttribute("data-highlighted", "true");
+
+    const rowA = container.querySelector('tr[data-row-id="a"]');
+    expect(rowA).not.toHaveAttribute("data-highlighted");
+  });
+
+  it("scrollToHighlightOnMouseLeave calls scrollIntoView on the highlighted body row", async () => {
+    const user = userEvent.setup();
+    const scrollIntoView = vi
+      .spyOn(HTMLElement.prototype, "scrollIntoView")
+      .mockImplementation(() => {});
+
+    const data: TestRow[] = [{ id: "x", name: "Row" }];
+
+    const { container } = render(
+      tableWrap(
+        <DataTable
+          columns={baseColumns}
+          data={data}
+          paginationMode="client"
+          highlightRowId="x"
+          scrollToHighlightOnMouseLeave
+        />,
+      ),
+    );
+
+    const scrollHost = getScrollHost(container);
+    await user.pointer({ keys: "[MouseLeft>]", target: scrollHost });
+    await user.pointer({ keys: "[/MouseLeft]", target: scrollHost });
+
+    scrollIntoView.mockClear();
+    fireEvent.mouseLeave(scrollHost);
+
+    await waitFor(() => expect(scrollIntoView).toHaveBeenCalled());
+  });
+
+  describe("virtualized scroll highlight", () => {
+    let rectSpy: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+      rectSpy = vi
+        .spyOn(HTMLElement.prototype, "getBoundingClientRect")
+        .mockImplementation(function (this: HTMLElement) {
+          const className =
+            typeof this.className === "string" ? this.className : "";
+          if (
+            className.includes("min-h-0") &&
+            className.includes("overflow-auto")
+          ) {
+            return {
+              width: 640,
+              height: 320,
+              top: 0,
+              left: 0,
+              bottom: 320,
+              right: 640,
+              x: 0,
+              y: 0,
+              toJSON: () => ({}),
+            } as DOMRect;
+          }
+          if (this.tagName === "THEAD") {
+            return {
+              width: 640,
+              height: 48,
+              top: 0,
+              left: 0,
+              bottom: 48,
+              right: 640,
+              x: 0,
+              y: 0,
+              toJSON: () => ({}),
+            } as DOMRect;
+          }
+          // Body rows: mock must reflect real row height; 0 breaks the virtualizer (it thinks the whole list fits).
+          if (this.tagName === "TR" && this.closest("tbody")) {
+            return {
+              width: 640,
+              height: 42,
+              top: 0,
+              left: 0,
+              bottom: 42,
+              right: 640,
+              x: 0,
+              y: 0,
+              toJSON: () => ({}),
+            } as DOMRect;
+          }
+          return {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+          } as DOMRect;
+        });
+    });
+
+    afterEach(() => {
+      rectSpy.mockRestore();
+    });
+
+    it("virtualizes: distant body rows are not mounted near scroll top", async () => {
+      const n = 400;
+      const data: TestRow[] = Array.from({ length: n }, (_, i) => ({
+        id: `r-${i}`,
+        name: `Row ${i}`,
+      }));
+
+      const { container } = render(
+        tableWrap(
+          <DataTable
+            columns={baseColumns}
+            data={data}
+            paginationMode="infinite"
+            virtualized
+            virtualRowEstimate={40}
+          />,
+        ),
+      );
+
+      const scrollHost = getScrollHost(container);
+      scrollHost.scrollTo({ top: 0 });
+      fireEvent.scroll(scrollHost);
+
+      await waitFor(() => {
+        expect(container.querySelector('[data-row-id="r-0"]')).toBeTruthy();
+      });
+
+      const mounted = container.querySelectorAll("tbody tr[data-row-id]").length;
+      expect(mounted).toBeGreaterThan(0);
+      expect(container.querySelector('[data-row-id="r-350"]')).toBeNull();
+      expect(mounted).toBeLessThan(350);
+    });
+
+    it("with scrollToHighlightOnMouseLeave, wheel pauses following highlight; mouse leave resumes", async () => {
+      const data: TestRow[] = Array.from({ length: 200 }, (_, i) => ({
+        id: `r-${i}`,
+        name: `Row ${i}`,
+      }));
+
+      const { container, rerender } = render(
+        tableWrap(
+          <DataTable
+            columns={baseColumns}
+            data={data}
+            paginationMode="infinite"
+            virtualized
+            virtualRowEstimate={40}
+            highlightRowId="r-0"
+            scrollToHighlightOnMouseLeave
+          />,
+        ),
+      );
+
+      const scrollHost = getScrollHost(container);
+      Object.defineProperty(scrollHost, "scrollHeight", {
+        configurable: true,
+        value: 80_000,
+      });
+      Object.defineProperty(scrollHost, "scrollTop", {
+        configurable: true,
+        writable: true,
+        value: 0,
+      });
+
+      const scrollTo = vi.fn().mockImplementation(() => {});
+      scrollHost.scrollTo = scrollTo as typeof scrollHost.scrollTo;
+
+      await waitFor(() => {
+        expect(
+          container.querySelectorAll("tbody tr[data-row-id]").length,
+        ).toBeGreaterThan(0);
+      });
+
+      scrollTo.mockClear();
+
+      await act(async () => {
+        rerender(
+          tableWrap(
+            <DataTable
+              columns={baseColumns}
+              data={data}
+              paginationMode="infinite"
+              virtualized
+              virtualRowEstimate={40}
+              highlightRowId="r-10"
+              scrollToHighlightOnMouseLeave
+            />,
+          ),
+        );
+      });
+
+      await waitFor(() => expect(scrollTo.mock.calls.length).toBeGreaterThan(0));
+
+      scrollTo.mockClear();
+
+      fireEvent.wheel(scrollHost, { deltaY: 10 });
+
+      await act(async () => {
+        rerender(
+          tableWrap(
+            <DataTable
+              columns={baseColumns}
+              data={data}
+              paginationMode="infinite"
+              virtualized
+              virtualRowEstimate={40}
+              highlightRowId="r-20"
+              scrollToHighlightOnMouseLeave
+            />,
+          ),
+        );
+      });
+
+      expect(scrollTo.mock.calls.length).toBe(0);
+
+      scrollTo.mockClear();
+      fireEvent.mouseLeave(scrollHost);
+
+      await waitFor(() => expect(scrollTo.mock.calls.length).toBeGreaterThan(0));
+    });
+
+    /**
+     * Regression: infinite-mode `scroll` must not set userInteracting — smooth
+     * programmatic highlight scroll emits many scroll events after the programmatic
+     * lock unlocks; that used to flip userInteracting and block the next follow.
+     */
+    it("still follows highlight after extra scroll events (no false pause from scroll listener)", async () => {
+      const data: TestRow[] = Array.from({ length: 200 }, (_, i) => ({
+        id: `r-${i}`,
+        name: `Row ${i}`,
+      }));
+
+      const { container, rerender } = render(
+        tableWrap(
+          <DataTable
+            columns={baseColumns}
+            data={data}
+            paginationMode="infinite"
+            virtualized
+            virtualRowEstimate={40}
+            highlightRowId="r-0"
+          />,
+        ),
+      );
+
+      const scrollHost = getScrollHost(container);
+      Object.defineProperty(scrollHost, "scrollHeight", {
+        configurable: true,
+        value: 80_000,
+      });
+
+      const scrollTo = vi.fn().mockImplementation(() => {});
+      scrollHost.scrollTo = scrollTo as typeof scrollHost.scrollTo;
+
+      await waitFor(() => {
+        expect(
+          container.querySelectorAll("tbody tr[data-row-id]").length,
+        ).toBeGreaterThan(0);
+      });
+
+      scrollTo.mockClear();
+
+      await act(async () => {
+        rerender(
+          tableWrap(
+            <DataTable
+              columns={baseColumns}
+              data={data}
+              paginationMode="infinite"
+              virtualized
+              virtualRowEstimate={40}
+              highlightRowId="r-30"
+            />,
+          ),
+        );
+      });
+
+      await waitFor(() => expect(scrollTo.mock.calls.length).toBeGreaterThan(0));
+
+      scrollTo.mockClear();
+      for (let i = 0; i < 5; i += 1) {
+        fireEvent.scroll(scrollHost);
+      }
+
+      await act(async () => {
+        rerender(
+          tableWrap(
+            <DataTable
+              columns={baseColumns}
+              data={data}
+              paginationMode="infinite"
+              virtualized
+              virtualRowEstimate={40}
+              highlightRowId="r-50"
+            />,
+          ),
+        );
+      });
+
+      await waitFor(() => expect(scrollTo.mock.calls.length).toBeGreaterThan(0));
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Inline editing
+  // -------------------------------------------------------------------------
+
+  describe("Inline editing", () => {
+    type EditRow = {
+      id: string;
+      first: string;
+      second: string;
+      third: string;
+    };
+
+    const editData: EditRow[] = [
+      { id: "r1", first: "A", second: "B", third: "C" },
+      { id: "r2", first: "D", second: "E", third: "F" },
+    ];
+
+    const editColumns: ColumnDef<EditRow>[] & {
+      enableEditing?: boolean | ((row: import("@tanstack/react-table").Row<EditRow>) => boolean);
+      editVariant?: "text" | "select";
+      editTextProps?: { placeholder?: string };
+      onCommit?: (row: import("@tanstack/react-table").Row<EditRow>, value: string) => Partial<EditRow>;
+    }[] = [
+      {
+        accessorKey: "first",
+        header: "First",
+        enableEditing: true,
+        editVariant: "text",
+        editTextProps: { placeholder: "First" },
+        onCommit: (_row: any, v: string) => ({ first: v, second: "" }),
+      } as any,
+      {
+        accessorKey: "second",
+        header: "Second",
+        enableEditing: true,
+        editVariant: "text",
+        editTextProps: { placeholder: "Second" },
+      } as any,
+      {
+        accessorKey: "third",
+        header: "Third",
+        enableEditing: true,
+        editVariant: "text",
+        editTextProps: { placeholder: "Third" },
+      } as any,
+    ];
+
+    it("click activation: shows input on cell click", async () => {
+      const user = userEvent.setup();
+      render(
+        tableWrap(
+          <DataTable
+            columns={editColumns}
+            data={editData}
+            enableEditing
+            editDisplayMode="cell"
+            editTrigger="click"
+          />,
+        ),
+      );
+
+      const cell = screen.getByText("A");
+      await user.click(cell);
+
+      await waitFor(() =>
+        expect(screen.getByDisplayValue("A")).toBeInTheDocument(),
+      );
+    });
+
+    it("double-click activation: does NOT activate on single click", async () => {
+      const user = userEvent.setup();
+      render(
+        tableWrap(
+          <DataTable
+            columns={editColumns}
+            data={editData}
+            enableEditing
+            editDisplayMode="cell"
+            editTrigger="doubleClick"
+          />,
+        ),
+      );
+
+      const cell = screen.getByText("A");
+      await user.click(cell);
+
+      expect(screen.queryByDisplayValue("A")).not.toBeInTheDocument();
+
+      await user.dblClick(cell);
+
+      await waitFor(() =>
+        expect(screen.getByDisplayValue("A")).toBeInTheDocument(),
+      );
+    });
+
+    it("blur commits value and fires onCellCommit", async () => {
+      const user = userEvent.setup();
+      const onCommit = vi.fn();
+
+      render(
+        tableWrap(
+          <DataTable
+            columns={editColumns}
+            data={editData}
+            enableEditing
+            editDisplayMode="cell"
+            editTrigger="click"
+            onCellCommit={onCommit}
+          />,
+        ),
+      );
+
+      await user.click(screen.getByText("A"));
+
+      const input = await screen.findByDisplayValue("A");
+      await user.clear(input);
+      await user.type(input, "NEW");
+
+      await user.click(document.body);
+
+      await waitFor(() => {
+        expect(onCommit).toHaveBeenCalledWith(
+          "r1",
+          "first",
+          expect.objectContaining({ first: "NEW" }),
+        );
+      });
+    });
+
+    it("onCommit shapes the patch (clears downstream fields)", async () => {
+      const user = userEvent.setup();
+      const onCommit = vi.fn();
+
+      render(
+        tableWrap(
+          <DataTable
+            columns={editColumns}
+            data={editData}
+            enableEditing
+            editDisplayMode="cell"
+            editTrigger="click"
+            onCellCommit={onCommit}
+          />,
+        ),
+      );
+
+      await user.click(screen.getByText("A"));
+
+      const input = await screen.findByDisplayValue("A");
+      await user.clear(input);
+      await user.type(input, "CHANGED");
+      await user.click(document.body);
+
+      await waitFor(() => {
+        expect(onCommit).toHaveBeenCalledWith("r1", "first", {
+          first: "CHANGED",
+          second: "",
+        });
+      });
+    });
+
+    it("Escape exits row edit mode", async () => {
+      const user = userEvent.setup();
+      render(
+        tableWrap(
+          <DataTable
+            columns={editColumns}
+            data={editData}
+            enableEditing
+            editDisplayMode="row"
+            editTrigger="click"
+          />,
+        ),
+      );
+
+      await user.click(screen.getByText("A"));
+
+      await waitFor(() =>
+        expect(screen.getByDisplayValue("A")).toBeInTheDocument(),
+      );
+
+      await user.keyboard("{Escape}");
+
+      await waitFor(() =>
+        expect(screen.queryByDisplayValue("A")).not.toBeInTheDocument(),
+      );
+    });
+
+    it("row mode: clicking one cell activates entire row", async () => {
+      const user = userEvent.setup();
+      render(
+        tableWrap(
+          <DataTable
+            columns={editColumns}
+            data={editData}
+            enableEditing
+            editDisplayMode="row"
+            editTrigger="click"
+          />,
+        ),
+      );
+
+      await user.click(screen.getByText("A"));
+
+      await waitFor(() => {
+        expect(screen.getByDisplayValue("A")).toBeInTheDocument();
+        expect(screen.getByDisplayValue("B")).toBeInTheDocument();
+        expect(screen.getByDisplayValue("C")).toBeInTheDocument();
+      });
+    });
+
+    it("alwaysEditing renders inputs without activation", () => {
+      render(
+        tableWrap(
+          <DataTable
+            columns={editColumns}
+            data={editData}
+            enableEditing
+            editDisplayMode="cell"
+            editTrigger="click"
+            alwaysEditing={() => true}
+          />,
+        ),
+      );
+
+      expect(screen.getByDisplayValue("A")).toBeInTheDocument();
+      expect(screen.getByDisplayValue("B")).toBeInTheDocument();
+      expect(screen.getByDisplayValue("D")).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // data-testid
+  // -------------------------------------------------------------------------
+
+  describe("testId prop", () => {
+    it("sets data-testid on root, thead, and tbody", () => {
+      const data: TestRow[] = [{ id: "a", name: "Alpha" }];
+      const { container } = render(
+        tableWrap(
+          <DataTable
+            columns={baseColumns}
+            data={data}
+            testId="my-table"
+          />,
+        ),
+      );
+
+      expect(container.querySelector('[data-testid="my-table"]')).toBeTruthy();
+      expect(
+        container.querySelector('[data-testid="my-table-thead"]'),
+      ).toBeTruthy();
+      expect(
+        container.querySelector('[data-testid="my-table-tbody"]'),
+      ).toBeTruthy();
+    });
+
+    it("does not render data-testid when prop is omitted", () => {
+      const data: TestRow[] = [{ id: "a", name: "Alpha" }];
+      const { container } = render(
+        tableWrap(
+          <DataTable columns={baseColumns} data={data} />,
+        ),
+      );
+
+      expect(container.querySelector("[data-testid]")).toBeNull();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Editing — error display
+  // -------------------------------------------------------------------------
+
+  describe("Inline editing — error message", () => {
+    type ErrRow = { id: string; val: string };
+
+    it("renders error message from editError when cell is active", async () => {
+      const user = userEvent.setup();
+      const errColumns = [
+        {
+          accessorKey: "val",
+          header: "Value",
+          enableEditing: true,
+          editVariant: "text" as const,
+          editTextProps: { placeholder: "Value" },
+          editError: (row: any) =>
+            !row.original.val.trim() ? "Required" : undefined,
+        },
+      ];
+
+      const { container } = render(
+        tableWrap(
+          <DataTable
+            columns={errColumns}
+            data={[{ id: "r1", val: "Hello" }]}
+            enableEditing
+            editDisplayMode="cell"
+            editTrigger="click"
+          />,
+        ),
+      );
+
+      await user.click(screen.getByText("Hello"));
+      await waitFor(() =>
+        expect(screen.getByDisplayValue("Hello")).toBeInTheDocument(),
+      );
+
+      expect(container.querySelector('[class*="text-error"]')).toBeNull();
+    });
+  });
+});