@multiplatform.one/frappe-ui 6.6.0 → 7.0.0

package/src/FrappeTable.retryStorm.spec.tsx

@@ -0,0 +1,140 @@
+/**
+ * FrappeTable retry-storm regression — a persistently-failing fetch must
+ * not loop (fetch → error → evict → refetch at microtask speed; the storm
+ * that froze storybook renderers and OOM'd vitest workers).
+ *
+ * The protection lives at the shared altitude: the collection cache in
+ * `@multiplatform.one/frappe` (frappeReact.ts) HOLDS an errored entry while
+ * any consumer retains it, so the error-state re-render re-acquires the
+ * same entry instead of starting a fresh failing sync; the entry is evicted
+ * on LAST release, making retry-by-remount exactly one fresh attempt.
+ * FrappeTable/Kanban/Calendar/TreeView/Gantt all consume that one hook —
+ * there is no per-view latch (the old attachments.tsx latch is gone).
+ *
+ * Cache-level pins live in public/frappe/src/frappeReact.spec.ts
+ * ("REGRESSION: an error-state consumer does not loop failing fetches").
+ * This spec pins the same contract end-to-end through a real view that was
+ * once flagged unprotected: FrappeTable with a down bench.
+ */
+
+import type { FixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+interface Customer {
+  name: string;
+  doctype: string;
+  customer_name: string;
+}
+
+const columns: DataTableColumn<Partial<Customer>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "customer_name", accessorKey: "customer_name", header: "Customer Name" },
+];
+
+// Explicit filterableFields skip the doctype-meta fetch (hermetic — the
+// only network the table needs is the list subscription itself).
+const filterFields = [{ id: "customer_name", label: "Customer Name", type: "text" as const }];
+
+/**
+ * A bench that is down: every list fetch rejects. Counts attempts so the
+ * spec can assert the bound. The cap is a safety valve — a regressed
+ * (evict-on-error) cache refetches at microtask speed and would hang the
+ * worker before any assertion runs; "recovering" after the cap lets the
+ * test fail on the count instead.
+ */
+class DownBenchFixtureProvider implements FixtureProvider {
+  getListCalls = 0;
+
+  async getList(): Promise<never[]> {
+    this.getListCalls++;
+    if (this.getListCalls > 25) return [];
+    throw new Error("bench down");
+  }
+
+  async getDoc(): Promise<null> {
+    return null;
+  }
+
+  createDoc(): Promise<never> {
+    return Promise.reject(new Error("unsupported"));
+  }
+
+  updateDoc(): Promise<never> {
+    return Promise.reject(new Error("unsupported"));
+  }
+
+  deleteDoc(): Promise<never> {
+    return Promise.reject(new Error("unsupported"));
+  }
+}
+
+function renderTable(fixtures: FixtureProvider) {
+  return renderWithProviders(
+    <FrappeProvider baseURL="https://frappetable-retrystorm.spec.test" fixtures={fixtures}>
+      <FrappeTable<Customer>
+        doctype="Customer"
+        columns={columns}
+        filterableFields={filterFields}
+        layout="table"
+        enablePagination={false}
+        error={(err) => <div data-testid="table-error">{err.message}</div>}
+      />
+    </FrappeProvider>,
+  );
+}
+
+describe("FrappeTable retry-storm regression (persistently-failing fetch)", () => {
+  it("surfaces the failure from exactly one bounded fetch attempt — no refetch loop", async () => {
+    const fixtures = new DownBenchFixtureProvider();
+    renderTable(fixtures);
+
+    // Honest error surface (not an empty table), carrying the sync detail.
+    const errorNode = await screen.findByTestId("table-error");
+    expect(errorNode.textContent).toMatch(/bench down/);
+
+    // The error-state re-render re-acquired the HELD errored entry — the
+    // failure came from ONE sync attempt, not a loop.
+    expect(fixtures.getListCalls).toBe(1);
+
+    // Give a storm every chance: run well past the sync layer's debounce
+    // and GC grace windows, then re-check the bound.
+    await act(() => new Promise((resolve) => setTimeout(resolve, 300)));
+    expect(fixtures.getListCalls).toBe(1);
+  });
+
+  it("retry-by-remount starts exactly ONE fresh attempt (bounded, explicit retries)", async () => {
+    const fixtures = new DownBenchFixtureProvider();
+    const first = renderTable(fixtures);
+    await screen.findByTestId("table-error");
+    expect(fixtures.getListCalls).toBe(1);
+
+    // Last consumer releases the errored entry → evicted immediately; the
+    // remount (the Retry contract) is the one place a fresh sync starts.
+    first.unmount();
+    renderTable(fixtures);
+    await screen.findByTestId("table-error");
+    expect(fixtures.getListCalls).toBe(2);
+
+    await act(() => new Promise((resolve) => setTimeout(resolve, 300)));
+    expect(fixtures.getListCalls).toBe(2);
+  });
+});

package/src/FrappeTable.spec.tsx

@@ -0,0 +1,222 @@
+/**
+ * FrappeTable row activation — the replacement contract for the deleted
+ * per-cell pressable layer (onRowClick → DataTable onRowPress).
+ *
+ * The public prop stays `onRowClick` (backoffice DoctypeListScreen and
+ * other consumers keep their API); inside, the ROW is one pressable unit:
+ * a single roving tab stop per row set (LC-49), Enter AND Space activate
+ * the focused row (LC-50), inner interactive controls (selection
+ * checkboxes) win over the row press, and rows are named by document
+ * identity — the doctype title-field value when meta is loaded, else the
+ * document name (DG-A11Y-06).
+ *
+ * Fixture-hermetic: documents ride InMemoryFixtureProvider; the one test
+ * that needs doctype meta mocks the `getdoctype` fetch.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+interface Customer {
+  name: string;
+  doctype: string;
+  customer_name: string;
+  status: string;
+}
+
+const customers: Customer[] = [
+  { name: "CUST-001", doctype: "Customer", customer_name: "Acme Corp", status: "Active" },
+  { name: "CUST-002", doctype: "Customer", customer_name: "Globex", status: "Active" },
+  { name: "CUST-003", doctype: "Customer", customer_name: "Initech", status: "Lead" },
+];
+
+const columns: DataTableColumn<Partial<Customer>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "customer_name", accessorKey: "customer_name", header: "Customer Name" },
+  { id: "status", accessorKey: "status", header: "Status" },
+];
+
+// Explicit filterableFields skip the doctype-meta fetch (hermetic — same
+// contract DoctypeListScreen uses); the title-field test omits them and
+// mocks the meta endpoint instead.
+const filterFields = [{ id: "status", label: "Status", type: "text" as const }];
+
+function pressRows(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-row-press="true"]')) as HTMLElement[];
+}
+
+function renderTable(extraProps: Record<string, unknown> = {}) {
+  const onRowClick = vi.fn();
+  const result = renderWithProviders(
+    <FrappeProvider
+      baseURL="https://frappetable.spec.test"
+      fixtures={new InMemoryFixtureProvider({ Customer: customers })}
+    >
+      <FrappeTable<Customer>
+        doctype="Customer"
+        columns={columns}
+        filterableFields={filterFields}
+        layout="table"
+        enablePagination={false}
+        onRowClick={onRowClick}
+        {...extraProps}
+      />
+    </FrappeProvider>,
+  );
+  return { ...result, onRowClick };
+}
+
+describe("FrappeTable onRowClick → DataTable onRowPress", () => {
+  it("activates on mouse click anywhere in the row and on Enter AND Space", async () => {
+    const { container, onRowClick } = renderTable();
+    await screen.findByText("Acme Corp");
+    const rows = pressRows(container);
+    expect(rows).toHaveLength(3);
+
+    fireEvent.click(screen.getByText("Globex"));
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+    expect(onRowClick).toHaveBeenCalledWith(expect.objectContaining({ name: "CUST-002" }));
+
+    rows[0].focus();
+    fireEvent.keyDown(rows[0], { key: "Enter" });
+    expect(onRowClick).toHaveBeenCalledTimes(2);
+    expect(onRowClick).toHaveBeenLastCalledWith(expect.objectContaining({ name: "CUST-001" }));
+    fireEvent.keyDown(rows[0], { key: " " });
+    expect(onRowClick).toHaveBeenCalledTimes(3);
+  });
+
+  it("exposes ONE roving tab stop, names rows by doc name, and keeps cells pressable-free", async () => {
+    const { container } = renderTable();
+    await screen.findByText("Acme Corp");
+    const rows = pressRows(container);
+
+    // LC-49: exactly one tab stop across the row set; arrows rove it.
+    expect(rows.map((row) => row.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+    rows[0].focus();
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(rows[1]);
+
+    // DG-A11Y-06: rows named by document identity (name — no meta here).
+    expect(rows.map((row) => row.getAttribute("aria-label"))).toEqual([
+      "CUST-001",
+      "CUST-002",
+      "CUST-003",
+    ]);
+
+    // The per-cell pressable layer is GONE: no cell-level buttons or
+    // extra tab stops inside pressable rows (plain text columns).
+    for (const row of rows) {
+      expect(row.querySelectorAll('[role="button"]')).toHaveLength(0);
+      expect(row.querySelectorAll('[tabindex="0"]')).toHaveLength(0);
+    }
+  });
+
+  it("keeps selection checkboxes working without firing the row press", async () => {
+    const { onRowClick } = renderTable({ enableRowSelection: true });
+    await screen.findByText("Acme Corp");
+
+    // Selection names ride the same identity channel ("Select row {name}").
+    const checkbox = await screen.findByRole("checkbox", { name: "Select row CUST-001" });
+    fireEvent.click(checkbox);
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    expect(onRowClick).not.toHaveBeenCalled();
+  });
+
+  it("labels rows by the doctype title-field value once meta loads", async () => {
+    // Distinct host: useDocTypeMeta caches per `${baseURL}:${doctype}`.
+    const metaHost = "https://frappetable-meta.spec.test";
+    const realFetch = globalThis.fetch;
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input: any, init?: any) => {
+      const url =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      if (url.startsWith(metaHost)) {
+        if (url.includes("/api/method/frappe.desk.form.load.getdoctype")) {
+          return new Response(
+            JSON.stringify({
+              docs: [
+                {
+                  name: "Customer",
+                  module: "Selling",
+                  title_field: "customer_name",
+                  fields: [
+                    {
+                      fieldname: "customer_name",
+                      fieldtype: "Data",
+                      label: "Customer Name",
+                      in_list_view: 1,
+                    },
+                  ],
+                  permissions: [],
+                },
+              ],
+            }),
+            { status: 200, headers: { "Content-Type": "application/json" } },
+          );
+        }
+        return new Response(JSON.stringify({ data: [] }), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        });
+      }
+      return realFetch(input, init);
+    });
+
+    const onRowClick = vi.fn();
+    const { container } = renderWithProviders(
+      <FrappeProvider
+        baseURL={metaHost}
+        fixtures={new InMemoryFixtureProvider({ Customer: customers })}
+      >
+        <FrappeTable<Customer>
+          doctype="Customer"
+          columns={columns}
+          layout="table"
+          enablePagination={false}
+          onRowClick={onRowClick}
+        />
+      </FrappeProvider>,
+    );
+
+    await screen.findByText("Acme Corp");
+    await waitFor(() => {
+      expect(pressRows(container).map((row) => row.getAttribute("aria-label"))).toEqual([
+        "Acme Corp",
+        "Globex",
+        "Initech",
+      ]);
+    });
+  });
+});
+
+describe("FrappeTable layout forwarding", () => {
+  it("passes layout=list through to DataTable document rows", async () => {
+    const { container } = renderTable({ layout: "list" });
+    await screen.findByText("Acme Corp");
+    expect(container.querySelector('[data-testid="data-table-list"]')).not.toBeNull();
+    expect(container.querySelectorAll('[data-testid="data-table-list-row"]').length).toBe(
+      customers.length,
+    );
+    expect(container.querySelector(".is_Table")).toBeNull();
+    expect(container.querySelector('[aria-label="Table headers"]')).toBeNull();
+  });
+});