@multiplatform.one/frappe-ui 7.11.0 → 7.15.0

package/src/FrappeTable.optionalProps.spec.tsx

@@ -0,0 +1,249 @@
+/**
+ * FrappeTable's two props that read as optional and were not (MPO-230).
+ *
+ * `filterableFields`: omitted under a provider carrying fixtures, the meta
+ * read stays inside the corpus. A fixture host that also carries a baseURL
+ * (what a generated app has) used to dial getdoctype on every page and fail
+ * CORS; now nothing reaches the network, DocType entry in the corpus or not.
+ *
+ * `fields`: omitted on a bench read (serverSide, or client mode without
+ * fixtures), the request used to ask for `name` alone and every other column
+ * rendered blank with no error. Now it asks for the columns' accessor keys,
+ * and the derived list is content-keyed so an inline `columns` literal does
+ * not refetch every render. Client mode over a corpus still reads whole
+ * documents.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, 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: "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" },
+  { id: "actions", header: "Actions", cell: () => null },
+];
+
+function forbidFetch() {
+  return vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+    throw new Error(`unexpected network request: ${String(input)}`);
+  });
+}
+
+function pressRows(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-row-press="true"]')) as HTMLElement[];
+}
+
+describe("FrappeTable under a fixture corpus with a baseURL and no filterableFields", () => {
+  it("issues zero requests when the corpus has no DocType entry", async () => {
+    const fetchSpy = forbidFetch();
+    const { container } = renderWithProviders(
+      <FrappeProvider
+        baseURL="https://frappetable-optional.spec.test"
+        fixtures={new InMemoryFixtureProvider({ Customer: customers })}
+      >
+        <FrappeTable<Customer>
+          doctype="Customer"
+          columns={columns}
+          layout="table"
+          enablePagination={false}
+          onRowClick={() => {}}
+        />
+      </FrappeProvider>,
+    );
+
+    expect(await screen.findByText("Acme Corp")).toBeTruthy();
+    expect(await screen.findByText("Globex")).toBeTruthy();
+    // No meta: rows fall back to the document name for their label.
+    await waitFor(() => {
+      expect(pressRows(container).map((row) => row.getAttribute("aria-label"))).toEqual([
+        "CUST-001",
+        "CUST-002",
+      ]);
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it("issues zero requests when the corpus carries the DocType, and reads whole documents", async () => {
+    const fetchSpy = forbidFetch();
+    const { container } = renderWithProviders(
+      <FrappeProvider
+        baseURL="https://frappetable-optional.spec.test"
+        fixtures={
+          new InMemoryFixtureProvider({
+            DocType: [
+              {
+                name: "Customer",
+                doctype: "DocType",
+                module: "Selling",
+                title_field: "customer_name",
+                fields: [
+                  { fieldname: "customer_name", fieldtype: "Data", label: "Customer Name" },
+                  { fieldname: "status", fieldtype: "Data", label: "Status" },
+                ],
+                permissions: [],
+              },
+            ],
+            Customer: customers,
+          })
+        }
+      >
+        <FrappeTable<Customer>
+          doctype="Customer"
+          columns={columns.filter((column) => column.id !== "customer_name")}
+          layout="table"
+          enablePagination={false}
+          onRowClick={() => {}}
+        />
+      </FrappeProvider>,
+    );
+
+    expect(await screen.findByText("Lead")).toBeTruthy();
+    // The title field is no column: its value labels the rows only because
+    // the corpus handed over whole documents.
+    await waitFor(() => {
+      expect(pressRows(container).map((row) => row.getAttribute("aria-label"))).toEqual([
+        "Acme Corp",
+        "Globex",
+      ]);
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe("FrappeTable serverSide with columns and no fields", () => {
+  const host = "https://frappetable-serverfields.spec.test";
+
+  function jsonResponse(body: unknown): Response {
+    return new Response(JSON.stringify(body), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  it("requests name plus every column accessor key, once", async () => {
+    const listRequests: URL[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+      const urlStr =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.client.get_count") {
+        return Promise.resolve(jsonResponse({ message: customers.length }));
+      }
+      if (url.pathname === "/api/resource/Customer") {
+        listRequests.push(url);
+        return Promise.resolve(jsonResponse({ data: customers }));
+      }
+      throw new Error(`unexpected network request: ${urlStr}`);
+    });
+
+    renderWithProviders(
+      <FrappeProvider baseURL={host}>
+        <FrappeTable<Customer>
+          doctype="Customer"
+          columns={[...columns]}
+          filterableFields={[{ id: "status", label: "Status", type: "text" }]}
+          serverSide
+          layout="table"
+          initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
+        />
+      </FrappeProvider>,
+    );
+
+    expect(await screen.findByText("Acme Corp")).toBeTruthy();
+    expect(await screen.findByText("Lead")).toBeTruthy();
+    expect(listRequests.length).toBe(1);
+    expect(JSON.parse(listRequests[0].searchParams.get("fields") ?? "[]")).toEqual([
+      "name",
+      "customer_name",
+      "status",
+    ]);
+
+    // The derived list is content-keyed: the post-load re-renders must not
+    // re-key the fetch and refetch.
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(listRequests.length).toBe(1);
+  });
+});
+
+describe("FrappeTable client mode against a bench with columns and no fields", () => {
+  const host = "https://frappetable-clientfields.spec.test";
+
+  it("subscribes with name plus every column accessor key", async () => {
+    const listRequests: URL[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+      const urlStr =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/resource/Customer") {
+        listRequests.push(url);
+        const fields: string[] = JSON.parse(url.searchParams.get("fields") ?? '["name"]');
+        const projected = customers.map((doc) =>
+          Object.fromEntries(
+            fields.map((field) => [field, (doc as unknown as Record<string, unknown>)[field]]),
+          ),
+        );
+        return Promise.resolve(
+          new Response(JSON.stringify({ data: projected }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          }),
+        );
+      }
+      throw new Error(`unexpected network request: ${urlStr}`);
+    });
+
+    renderWithProviders(
+      <FrappeProvider baseURL={host} realtime={false}>
+        <FrappeTable<Customer>
+          doctype="Customer"
+          columns={columns}
+          filterableFields={[{ id: "status", label: "Status", type: "text" }]}
+          layout="table"
+          enablePagination={false}
+        />
+      </FrappeProvider>,
+    );
+
+    // A bench answers a list read with no `fields` with `name` alone, so
+    // these cells render only because the request named the columns.
+    expect(await screen.findByText("Acme Corp")).toBeTruthy();
+    expect(await screen.findByText("Lead")).toBeTruthy();
+    expect(listRequests.length).toBeGreaterThan(0);
+    const requested: string[] = JSON.parse(listRequests[0].searchParams.get("fields") ?? "[]");
+    expect(requested).toEqual(expect.arrayContaining(["name", "customer_name", "status"]));
+    expect(requested).not.toContain("actions");
+  });
+});

package/src/FrappeTable.spec.tsx

@@ -11,7 +11,7 @@
  * document name (DG-A11Y-06).
  *
  * Fixture-hermetic: documents ride InMemoryFixtureProvider; the one test
- * that needs doctype meta mocks the `getdoctype` fetch.
+ * that needs doctype meta carries it in the corpus's DocType entry.
  */
 
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
@@ -56,9 +56,9 @@ const columns: DataTableColumn<Partial<Customer>>[] = [
   { 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.
+// Explicit filterableFields skip the doctype-meta read (same contract
+// DoctypeListScreen uses); the title-field test omits them and answers the
+// read from the corpus instead.
 const filterFields = [{ id: "status", label: "Status", type: "text" as const }];
 
 function pressRows(container: HTMLElement): HTMLElement[] {
@@ -143,49 +143,38 @@ describe("FrappeTable onRowClick → DataTable onRowPress", () => {
   });
 
   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);
+    // Meta comes from the corpus's DocType entry: a fixture host never dials
+    // getdoctype, whatever baseURL it carries (MPO-230).
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+      throw new Error(`unexpected network request: ${String(input)}`);
     });
 
     const onRowClick = vi.fn();
     const { container } = renderWithProviders(
       <FrappeProvider
-        baseURL={metaHost}
-        fixtures={new InMemoryFixtureProvider({ Customer: customers })}
+        baseURL="https://frappetable-meta.spec.test"
+        fixtures={
+          new InMemoryFixtureProvider({
+            DocType: [
+              {
+                name: "Customer",
+                doctype: "DocType",
+                module: "Selling",
+                title_field: "customer_name",
+                fields: [
+                  {
+                    fieldname: "customer_name",
+                    fieldtype: "Data",
+                    label: "Customer Name",
+                    in_list_view: 1,
+                  },
+                ],
+                permissions: [],
+              },
+            ],
+            Customer: customers,
+          })
+        }
       >
         <FrappeTable<Customer>
           doctype="Customer"
@@ -205,6 +194,7 @@ describe("FrappeTable onRowClick → DataTable onRowPress", () => {
         "Initech",
       ]);
     });
+    expect(fetchSpy).not.toHaveBeenCalled();
   });
 });
 

package/src/FrappeTable.stories.spec.tsx

@@ -0,0 +1,55 @@
+/**
+ * FrappeTable's fixture stories carry a baseURL, and FrappeTable under a
+ * fixture corpus never dials it for meta (MPO-230), so their filter menu and
+ * title-field row labels exist only if the corpus carries the DocType entry.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { Default } from "./FrappeTable.stories";
+
+vi.mock("@multiplatform.one/storybook", () => ({ action: () => vi.fn() }));
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const customerNames = new Set([
+  "Acme Corp",
+  "Global Tech",
+  "John Smith",
+  "Jane Doe",
+  "Tech Solutions",
+  "Startup Inc",
+  "Bob Wilson",
+  "Enterprise Ltd",
+]);
+
+describe("FrappeTable stories", () => {
+  it("Main labels rows by the corpus meta's title field and issues no request", async () => {
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+      throw new Error(`unexpected network request: ${String(input)}`);
+    });
+    const { container } = renderWithProviders(<Default />);
+
+    await waitFor(() => {
+      const labels = Array.from(container.querySelectorAll('[data-row-press="true"]')).map(
+        (row) => row.getAttribute("aria-label") ?? "",
+      );
+      expect(labels.length).toBeGreaterThan(0);
+      expect(labels.filter((label) => !customerNames.has(label))).toEqual([]);
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});

package/src/FrappeTable.stories.tsx

@@ -15,7 +15,7 @@ export default {
     docs: {
       description: {
         component:
-          "Table over useFrappeCollection / useLiveQuery (client) or Frappe REST (serverSide). Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live and ServerSide stories are the live-bench arm — they target STORYBOOK_FRAPPE_URL when reachable and fall back to fixtures otherwise.",
+          "Table over useFrappeCollection / useLiveQuery (client) or Frappe REST (serverSide). Fixture stories are network-hermetic (G-15/D-05): documents and DocType meta both come from InMemoryFixtureProvider, so nothing leaves the machine. The separately-named Live and ServerSide stories are the live-bench arm — they target STORYBOOK_FRAPPE_URL when reachable and fall back to fixtures otherwise.",
       },
     },
   },
@@ -24,13 +24,11 @@ export default {
 // ---------------------------------------------------------------------------
 // Hermetic story host (G-15 story honesty / D-05, closes UX-P18).
 //
-// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
-// fixture provider serves the *collection*, but FrappeTable still resolves
-// DocType meta over HTTP — so every one of those stories fired a real
-// cross-origin request that the browser rejected with a CORS error, poisoning
-// the console for every automated probe. MOCK_HOST keeps the same code path
-// (real fetch, real meta shape) without leaving the machine; ERR_HOST is the
-// deliberate failure host for the error-state story.
+// Fixture-backed stories carry a baseURL the way a generated app does, and
+// FrappeTable under a fixture corpus reads DocType meta from the corpus's
+// "DocType" entry, never that host (MPO-230). MOCK_HOST still answers
+// anything else locally so no stray request leaves the machine; ERR_HOST is
+// the deliberate failure host for the error-state story.
 // ---------------------------------------------------------------------------
 
 const MOCK_HOST = "https://frappetable.mock.test";
@@ -39,6 +37,7 @@ const ERR_HOST = "https://forbidden.frappetable.mock.test";
 function customerMetaRaw(name: string) {
   return {
     name,
+    doctype: "DocType",
     module: "Selling",
     title_field: "customer_name",
     fields: [
@@ -85,9 +84,6 @@ function jsonResponse(body: unknown, status = 200): Response {
     if (urlStr.startsWith(ERR_HOST)) return jsonResponse({ message: "Not permitted" }, 403);
     if (urlStr.startsWith(MOCK_HOST)) {
       const url = new URL(urlStr);
-      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
-      if (metaMatch)
-        return jsonResponse({ data: customerMetaRaw(decodeURIComponent(metaMatch[1])) });
       if (url.pathname === "/api/resource/DocType") {
         return jsonResponse({ data: [{ name: "Customer", module: "Selling" }] });
       }
@@ -183,6 +179,13 @@ const customerFixtures: Customer[] = [
   },
 ];
 
+function customerCorpus(customers: Customer[] = customerFixtures): InMemoryFixtureProvider {
+  return new InMemoryFixtureProvider({
+    DocType: [customerMetaRaw("Customer")],
+    Customer: customers,
+  });
+}
+
 const customerColumns: DataTableColumn<Partial<Customer>>[] = [
   { id: "name", header: "ID", accessorKey: "name" },
   { id: "customer_name", header: "Customer Name", accessorKey: "customer_name" },
@@ -212,10 +215,7 @@ const customerColumns: DataTableColumn<Partial<Customer>>[] = [
 ];
 
 export const Default = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Customer: customerFixtures })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={customerCorpus()}>
     <FrappeTable<Customer>
       doctype="Customer"
       columns={customerColumns}
@@ -236,10 +236,7 @@ Default.parameters = {
 
 Default.storyName = "Main";
 export const WithPagination = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Customer: customerFixtures })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={customerCorpus()}>
     <FrappeTable<Customer>
       doctype="Customer"
       columns={customerColumns}
@@ -258,10 +255,7 @@ WithPagination.parameters = {
 };
 
 export const WithSavedFilters = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Customer: customerFixtures })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={customerCorpus()}>
     <FrappeTable<Customer>
       doctype="Customer"
       columns={customerColumns}
@@ -376,14 +370,17 @@ class PendingFixtureProvider extends InMemoryFixtureProvider {
 
 /** Collection stuck syncing: the built-in loading panel renders (W9 / DG-ST-02). */
 export const Loading = () => (
-  <FrappeProvider baseURL={MOCK_HOST} fixtures={new PendingFixtureProvider()}>
+  <FrappeProvider
+    baseURL={MOCK_HOST}
+    fixtures={new PendingFixtureProvider({ DocType: [customerMetaRaw("Customer")] })}
+  >
     <FrappeTable<Customer> doctype="Customer" columns={customerColumns} />
   </FrappeProvider>
 );
 
 /** Zero documents, no filters, no failure — "No Customer records found" (empty ≠ error). */
 export const Empty = () => (
-  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ Customer: [] })}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={customerCorpus([])}>
     <FrappeTable<Customer> doctype="Customer" columns={customerColumns} />
   </FrappeProvider>
 );
@@ -394,10 +391,7 @@ export const Empty = () => (
  * from Empty per DG-TBL-06.
  */
 export const NoResults = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Customer: customerFixtures })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={customerCorpus()}>
     <FrappeTable<Customer>
       doctype="Customer"
       columns={customerColumns}
@@ -440,10 +434,10 @@ const minimalCustomerColumns: DataTableColumn<Partial<Customer>>[] = [
 ];
 
 /**
- * With a live bench, FrappeTable derives this list automatically from the
- * doctype metadata (docFieldsToFilterFields). Fixtures have no /api/method
- * metadata endpoint, so the story passes the equivalent list explicitly —
- * same contract, same UI.
+ * Omitted, FrappeTable derives this list from the doctype meta
+ * (docFieldsToFilterFields), here the corpus's DocType entry. The story
+ * passes the equivalent list explicitly to show the prop — same contract,
+ * same UI.
  */
 const customerFilterFields = [
   { id: "territory", label: "Territory", type: "text" as const },
@@ -478,10 +472,7 @@ const customerFilterFields = [
  * field/operator/value dropdown.
  */
 export const HiddenFieldFilters = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Customer: customerFixtures })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={customerCorpus()}>
     <FrappeTable<Customer>
       doctype="Customer"
       columns={minimalCustomerColumns}