@hexclave/dashboard-ui-components 1.0.2 → 1.0.5

package/src/components/data-grid/data-grid.test.tsx

@@ -0,0 +1,366 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  createDefaultDataGridState,
+  DataGrid,
+  isDataGridInteractiveRowClickTarget,
+  type DataGridColumnDef,
+  type DataGridProps,
+} from "./index";
+
+type Row = {
+  id: string,
+  name: string,
+};
+
+const columns: DataGridColumnDef<Row>[] = [
+  {
+    id: "name",
+    header: "Name",
+    accessor: (row) => row.name,
+    width: 160,
+    minWidth: 80,
+    sortable: true,
+    type: "string",
+  },
+];
+
+const wideColumns: DataGridColumnDef<Row>[] = [
+  {
+    id: "name",
+    header: "Name",
+    accessor: (row) => row.name,
+    width: 320,
+    minWidth: 80,
+    type: "string",
+  },
+  {
+    id: "email",
+    header: "Email",
+    accessor: (row) => `${row.name.toLowerCase().replaceAll(" ", ".")}@example.com`,
+    width: 420,
+    minWidth: 80,
+    type: "string",
+  },
+];
+
+type ObserverRecord = {
+  options?: IntersectionObserverInit,
+};
+
+let intersectionObserverRecords: ObserverRecord[] = [];
+
+class MockIntersectionObserver implements IntersectionObserver {
+  readonly root: Element | Document | null;
+  readonly rootMargin: string;
+  readonly thresholds: ReadonlyArray<number>;
+  private readonly callback: IntersectionObserverCallback;
+  private readonly record: ObserverRecord;
+
+  constructor(
+    callback: IntersectionObserverCallback,
+    options?: IntersectionObserverInit,
+  ) {
+    this.callback = callback;
+    this.root = options?.root ?? null;
+    this.rootMargin = options?.rootMargin ?? "";
+    this.thresholds = Array.isArray(options?.threshold)
+      ? options.threshold
+      : [options?.threshold ?? 0];
+    this.record = { options };
+    intersectionObserverRecords.push(this.record);
+  }
+
+  disconnect() {}
+  observe() {}
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+  unobserve() {}
+
+  trigger(entry: Partial<IntersectionObserverEntry> = {}) {
+    this.callback(
+      [
+        {
+          boundingClientRect: {} as DOMRectReadOnly,
+          intersectionRatio: 1,
+          intersectionRect: {} as DOMRectReadOnly,
+          isIntersecting: true,
+          rootBounds: null,
+          target: document.createElement("div"),
+          time: 0,
+          ...entry,
+        },
+      ],
+      this,
+    );
+  }
+}
+
+class MockResizeObserver implements ResizeObserver {
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+}
+
+function DataGridHarness(props: { fillHeight?: boolean }) {
+  const [state, setState] = useState(() => createDefaultDataGridState(columns));
+
+  return (
+    <div style={{ height: 400 }}>
+      <DataGrid<Row>
+        columns={columns}
+        rows={[{ id: "row-1", name: "Row 1" }]}
+        getRowId={(row) => row.id}
+        state={state}
+        onChange={setState}
+        paginationMode="infinite"
+        hasMore
+        fillHeight={props.fillHeight}
+      />
+    </div>
+  );
+}
+
+function InteractiveDataGridHarness(props: {
+  onSortChange?: DataGridProps<Row>["onSortChange"],
+  onSelectionChange?: DataGridProps<Row>["onSelectionChange"],
+}) {
+  const [state, setState] = useState(() => createDefaultDataGridState(columns));
+
+  return (
+    <DataGrid<Row>
+      columns={columns}
+      rows={[{ id: "row-1", name: "Row 1" }]}
+      getRowId={(row) => row.id}
+      state={state}
+      onChange={setState}
+      selectionMode="multiple"
+      onSortChange={props.onSortChange}
+      onSelectionChange={props.onSelectionChange}
+    />
+  );
+}
+
+function WideDataGridHarness() {
+  const [state, setState] = useState(() => createDefaultDataGridState(wideColumns));
+
+  return (
+    <div style={{ width: 320 }}>
+      <DataGrid<Row>
+        columns={wideColumns}
+        rows={[{ id: "row-1", name: "Row 1" }]}
+        getRowId={(row) => row.id}
+        state={state}
+        onChange={setState}
+      />
+    </div>
+  );
+}
+
+describe("DataGrid infinite scroll observer", () => {
+  beforeEach(() => {
+    intersectionObserverRecords = [];
+
+    vi.stubGlobal("IntersectionObserver", MockIntersectionObserver);
+    vi.stubGlobal("ResizeObserver", MockResizeObserver);
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function getBoundingClientRect() {
+        return {
+          x: 0,
+          y: 0,
+          width: 320,
+          height: 44,
+          top: 0,
+          left: 0,
+          right: 320,
+          bottom: 44,
+          toJSON() {
+            return this;
+          },
+        } as DOMRect;
+      },
+    );
+    Object.defineProperty(HTMLElement.prototype, "clientHeight", {
+      configurable: true,
+      get() {
+        return 400;
+      },
+    });
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return 400;
+      },
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("observes against the grid body when the grid owns vertical scrolling", async () => {
+    const { container } = render(<DataGridHarness fillHeight />);
+
+    await waitFor(() => {
+      expect(intersectionObserverRecords.length).toBeGreaterThan(0);
+    });
+
+    const grid = container.querySelector('[role="grid"]');
+    expect(grid).not.toBeNull();
+    const scrollContainer = grid?.children.item(1);
+
+    expect(intersectionObserverRecords.at(-1)?.options?.root).toBe(scrollContainer);
+  });
+
+  it("falls back to the viewport when the page owns vertical scrolling", async () => {
+    render(<DataGridHarness fillHeight={false} />);
+
+    await waitFor(() => {
+      expect(intersectionObserverRecords.length).toBeGreaterThan(0);
+    });
+
+    expect(intersectionObserverRecords.at(-1)?.options?.root ?? null).toBeNull();
+  });
+});
+
+describe("DataGrid controlled callbacks", () => {
+  beforeEach(() => {
+    vi.stubGlobal("ResizeObserver", MockResizeObserver);
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function getBoundingClientRect() {
+        return {
+          x: 0,
+          y: 0,
+          width: 320,
+          height: 44,
+          top: 0,
+          left: 0,
+          right: 320,
+          bottom: 44,
+          toJSON() {
+            return this;
+          },
+        } as DOMRect;
+      },
+    );
+    Object.defineProperty(HTMLElement.prototype, "clientHeight", {
+      configurable: true,
+      get() {
+        return 400;
+      },
+    });
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return 400;
+      },
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("fires onSortChange from the current controlled sort state", () => {
+    const onSortChange = vi.fn();
+    const { getByRole } = render(<InteractiveDataGridHarness onSortChange={onSortChange} />);
+
+    fireEvent.click(getByRole("columnheader", { name: /name/i }));
+
+    expect(onSortChange).toHaveBeenCalledTimes(1);
+    expect(onSortChange).toHaveBeenCalledWith([{ columnId: "name", direction: "asc" }]);
+  });
+
+  it("fires onSelectionChange when selecting all rows", () => {
+    const onSelectionChange = vi.fn();
+    const { getByRole } = render(<InteractiveDataGridHarness onSelectionChange={onSelectionChange} />);
+
+    fireEvent.click(getByRole("checkbox", { name: /select all rows/i }));
+
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
+    const [selectedIds, selectedRows] = onSelectionChange.mock.calls[0];
+    expect([...selectedIds]).toEqual(["row-1"]);
+    expect(selectedRows).toEqual([{ id: "row-1", name: "Row 1" }]);
+  });
+
+  it("identifies nested interactive controls as row-click blockers", () => {
+    const cell = document.createElement("div");
+    const button = document.createElement("button");
+    const label = document.createElement("span");
+    label.textContent = "Open menu";
+    button.append(label);
+    cell.append(button);
+
+    expect(isDataGridInteractiveRowClickTarget(label.firstChild)).toBe(true);
+    expect(isDataGridInteractiveRowClickTarget(cell)).toBe(false);
+  });
+});
+
+describe("DataGrid horizontal scrolling", () => {
+  beforeEach(() => {
+    vi.stubGlobal("ResizeObserver", MockResizeObserver);
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function getBoundingClientRect() {
+        return {
+          x: 0,
+          y: 0,
+          width: 320,
+          height: 44,
+          top: 0,
+          left: 0,
+          right: 320,
+          bottom: 44,
+          toJSON() {
+            return this;
+          },
+        } as DOMRect;
+      },
+    );
+    Object.defineProperty(HTMLElement.prototype, "clientHeight", {
+      configurable: true,
+      get() {
+        return 400;
+      },
+    });
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return 400;
+      },
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("sizes the sticky clipping layer to the full row width", () => {
+    const { container } = render(<WideDataGridHarness />);
+
+    const rowsClip = container.querySelector("[data-data-grid-rows-clip]");
+
+    expect(rowsClip).toBeInstanceOf(HTMLElement);
+    expect((rowsClip as HTMLElement).style.minWidth).toBe("740px");
+  });
+
+  it("lets the columns popover escape the sticky toolbar bounds", () => {
+    const { container, getByTitle } = render(<WideDataGridHarness />);
+
+    fireEvent.click(getByTitle("Columns"));
+
+    const stickyChrome = container.querySelector('[role="grid"]')?.firstElementChild;
+    expect(stickyChrome).toBeInstanceOf(HTMLElement);
+    expect((stickyChrome as HTMLElement).className).toContain("overflow-visible");
+    expect(container.textContent).toContain("Email");
+  });
+});