@agent-native/toolkit 0.15.0 → 0.16.0

package/src/data-grid/DataGrid.spec.tsx

@@ -0,0 +1,243 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  DataGrid,
+  dataGridColumnTemplate,
+  type DataGridColumn,
+} from "./index.js";
+
+interface Row {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const columns: readonly DataGridColumn<Row>[] = [
+  {
+    id: "name",
+    label: "Name",
+    width: 180,
+    getValue: (row) => row.name,
+    renderCell: ({ value }) => String(value ?? ""),
+  },
+  {
+    id: "status",
+    label: "Status",
+    width: 120,
+    getValue: (row) => row.status,
+    renderCell: ({ value }) => String(value ?? ""),
+    renderEditor: ({ value, onCommit }) => (
+      <input
+        aria-label="Status editor"
+        defaultValue={String(value ?? "")}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") onCommit(event.currentTarget.value);
+        }}
+      />
+    ),
+  },
+];
+
+const rows: readonly Row[] = [
+  { id: "row-1", name: "First", status: "Open" },
+  { id: "row-2", name: "Second", status: "Closed" },
+];
+
+describe("data-grid", () => {
+  it("builds a bounded template and includes the selection column only when requested", () => {
+    expect(dataGridColumnTemplate(columns, { name: 40 }, "none")).toBe(
+      "96px 120px",
+    );
+    expect(dataGridColumnTemplate(columns, { name: 220 }, "multiple")).toBe(
+      "40px 220px 120px",
+    );
+  });
+
+  describe("DataGrid", () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+      vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+      container = document.createElement("div");
+      document.body.appendChild(container);
+      root = createRoot(container);
+    });
+
+    afterEach(() => {
+      act(() => root.unmount());
+      container.remove();
+      vi.restoreAllMocks();
+      vi.unstubAllGlobals();
+    });
+
+    it("moves the active cell with arrows and commits an editor value", () => {
+      const onActiveCellChange = vi.fn();
+      const onCellCommit = vi.fn();
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            onActiveCellChange={onActiveCellChange}
+            onCellCommit={onCellCommit}
+          />,
+        );
+      });
+
+      const firstNameCell = container.querySelector<HTMLElement>(
+        '[data-data-grid-row-id="row-1"][data-data-grid-column-id="name"]',
+      );
+      expect(firstNameCell?.getAttribute("tabindex")).toBe("0");
+
+      act(() => {
+        firstNameCell?.dispatchEvent(
+          new KeyboardEvent("keydown", { bubbles: true, key: "ArrowRight" }),
+        );
+      });
+      expect(onActiveCellChange).toHaveBeenCalledWith({
+        rowId: "row-1",
+        columnId: "status",
+        editing: false,
+      });
+
+      const statusCell = container.querySelector<HTMLElement>(
+        '[data-data-grid-row-id="row-1"][data-data-grid-column-id="status"]',
+      );
+      act(() => {
+        statusCell?.dispatchEvent(
+          new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }),
+        );
+      });
+      expect(
+        container.querySelector('input[aria-label="Status editor"]'),
+      ).not.toBeNull();
+
+      const input = container.querySelector<HTMLInputElement>(
+        'input[aria-label="Status editor"]',
+      );
+      expect(input).not.toBeNull();
+      if (input) {
+        input.value = "In progress";
+        act(() => {
+          input.dispatchEvent(
+            new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }),
+          );
+        });
+      }
+      expect(onCellCommit).toHaveBeenCalledWith({
+        row: rows[0],
+        rowIndex: 0,
+        column: columns[1],
+        previousValue: "Open",
+        value: "In progress",
+      });
+    });
+
+    it("supports controlled multi-row selection", () => {
+      const onSelectedRowIdsChange = vi.fn();
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            selection="multiple"
+            onSelectedRowIdsChange={onSelectedRowIdsChange}
+          />,
+        );
+      });
+
+      const rowCheckbox = container.querySelector<HTMLInputElement>(
+        '[aria-label="Select row row-1"]',
+      );
+      act(() => rowCheckbox?.click());
+      expect(onSelectedRowIdsChange).toHaveBeenCalledTimes(1);
+      expect(Array.from(onSelectedRowIdsChange.mock.calls[0][0])).toEqual([
+        "row-1",
+      ]);
+    });
+
+    it("reports pointer-based column resizing through the app callback", () => {
+      const onColumnWidthsChange = vi.fn();
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            onColumnWidthsChange={onColumnWidthsChange}
+          />,
+        );
+      });
+
+      const resizeHandle = container.querySelector<HTMLButtonElement>(
+        '[aria-label="Resize name column"]',
+      );
+      expect(resizeHandle).not.toBeNull();
+
+      act(() => {
+        resizeHandle?.dispatchEvent(
+          new PointerEvent("pointerdown", {
+            bubbles: true,
+            button: 0,
+            clientX: 100,
+          }),
+        );
+        document.dispatchEvent(
+          new PointerEvent("pointermove", {
+            bubbles: true,
+            clientX: 180,
+          }),
+        );
+        document.dispatchEvent(
+          new PointerEvent("pointerup", { bubbles: true, clientX: 180 }),
+        );
+      });
+
+      expect(onColumnWidthsChange).toHaveBeenLastCalledWith({ name: 260 });
+    });
+
+    it("lets an app own the outer header and body while sharing the grid template", () => {
+      const renderHeader = vi.fn(({ gridTemplateColumns }) => (
+        <div data-testid="custom-header" style={{ gridTemplateColumns }} />
+      ));
+      const renderBody = vi.fn(({ gridTemplateColumns }) => (
+        <div data-testid="custom-body" style={{ gridTemplateColumns }} />
+      ));
+
+      act(() => {
+        root.render(
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.id}
+            renderHeader={renderHeader}
+            renderBody={renderBody}
+          />,
+        );
+      });
+
+      expect(
+        container.querySelector("[data-testid=custom-header]"),
+      ).not.toBeNull();
+      expect(
+        container.querySelector("[data-testid=custom-body]"),
+      ).not.toBeNull();
+      expect(renderHeader).toHaveBeenCalledWith(
+        expect.objectContaining({ gridTemplateColumns: "180px 120px" }),
+      );
+      expect(renderBody).toHaveBeenCalledWith(
+        expect.objectContaining({ rows, columns }),
+      );
+    });
+  });
+});