@multiplatform.one/table 6.0.4 → 6.3.0

package/src/components/DataTableCell/dataTableCell.spec.tsx

@@ -13,6 +13,7 @@
 
 import React from "react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 // ── Mock form components ──────────────────────────────────────
@@ -40,6 +41,26 @@ vi.mock("@multiplatform.one/forms", () => ({
   Progress: createMock("Progress"),
   RadioGroup: createMock("RadioGroup"),
   ToggleGroup: createMock("ToggleGroup"),
+  // Functional fake: trigger toggles open; children render only while open
+  // (the popover host CellOptionsEditor mounts option groups through it).
+  FloatingPanel: ({ open, onOpenChange, trigger, children, disabled }: any) =>
+    React.createElement(
+      "div",
+      { "data-testid": "mock-FloatingPanel" },
+      React.createElement(
+        "div",
+        {
+          "data-testid": "floating-panel-trigger",
+          onClick: () => {
+            if (!disabled) onOpenChange?.(!open);
+          },
+        },
+        trigger,
+      ),
+      open
+        ? React.createElement("div", { "data-testid": "floating-panel-content" }, children)
+        : null,
+    ),
   DatePicker: createMock("DatePicker"),
   DatetimePicker: createMock("DatetimePicker"),
   TimePicker: createMock("TimePicker"),
@@ -49,6 +70,7 @@ vi.mock("@multiplatform.one/forms", () => ({
   Duration: createMock("Duration"),
   PhoneInput: createMock("PhoneInput"),
   Barcode: createMock("Barcode"),
+  BarcodePreview: createMock("BarcodePreview"),
   MentionInput: createMock("MentionInput"),
   OTPInput: createMock("OTPInput"),
   Rating: createMock("Rating"),
@@ -58,6 +80,14 @@ vi.mock("@multiplatform.one/forms", () => ({
   Geolocation: createMock("Geolocation"),
   ColorPicker: createMock("ColorPicker"),
   Button: createMock("Button"),
+  // Compact in-cell summary used by CellModalEditor; expose the routed field
+  // type so tests can assert which field the cell delegates to.
+  FieldDisplay: (props: any) =>
+    React.createElement("div", {
+      "data-testid": "mock-FieldDisplay",
+      "data-component": "FieldDisplay",
+      "data-field": props.field,
+    }),
 }));
 
 vi.mock("@multiplatform.one/rich-text", () => ({
@@ -77,6 +107,14 @@ vi.mock("@multiplatform.one/theme", () => ({
       control: {},
       transition: "quick",
     },
+    control: {
+      focusVisibleKnobProps: {
+        outlineWidth: 2,
+        outlineStyle: "solid",
+        outlineColor: "$outlineColor",
+        outlineOffset: 2,
+      },
+    },
   }),
 }));
 
@@ -147,45 +185,155 @@ describe("DataTableCell field type parity", () => {
     expectNotRendered(container, "Input");
   });
 
-  it("fileupload renders FileUpload, not custom FileUploadCell", () => {
-    const { container } = renderCell({
-      field: "fileupload",
-      value: null,
-    });
-    expectRendered(container, "FileUpload");
-    // Old FileUploadCell had "Attach" text
+  // The four "heavy" field types below render through CellModalEditor: the
+  // cell shows a compact FieldDisplay summary and the real form component
+  // mounts inside a Dialog (portaled to document.body) when the cell is
+  // clicked. The tests assert both halves of that contract.
+
+  async function expectModalEditor(
+    renderProps: Partial<React.ComponentProps<typeof DataTableCell>>,
+    fieldType: string,
+    editorName: string,
+  ) {
+    const { container, baseElement } = renderCell(renderProps);
+    // Cell shows the compact FieldDisplay summary routed to the right field
+    const display = container.querySelector('[data-component="FieldDisplay"]');
+    expect(display, `Expected FieldDisplay to render for ${fieldType}`).not.toBeNull();
+    expect(display?.getAttribute("data-field")).toBe(fieldType);
+    // Editor is not mounted until the cell is clicked
+    expectNotRendered(baseElement, editorName);
+    // Clicking the cell opens the modal containing the real editor
+    fireEvent.click(display!);
+    await waitFor(() => expectRendered(baseElement, editorName));
+    return { container, baseElement };
+  }
+
+  it("fileupload renders FileUpload, not custom FileUploadCell", async () => {
+    const { container } = await expectModalEditor(
+      { field: "fileupload", value: null },
+      "fileupload",
+      "FileUpload",
+    );
+    // Old FileUploadCell had "Attach" text in the cell
     expect(container.textContent).not.toContain("Attach");
   });
 
-  it("signature renders Signature, not status text", () => {
-    const { container } = renderCell({
-      field: "signature",
-      value: "",
-    });
-    expectRendered(container, "Signature");
-    // Old implementation showed "Not signed" / "Sign"
+  it("signature renders Signature, not status text", async () => {
+    const { container } = await expectModalEditor(
+      { field: "signature", value: "" },
+      "signature",
+      "Signature",
+    );
+    // Old implementation showed "Not signed" / "Sign" in the cell
     expect(container.textContent).not.toContain("Not signed");
     expect(container.textContent).not.toContain("Sign");
   });
 
-  it("geolocation renders Geolocation, not two plain Inputs", () => {
+  it("geolocation renders Geolocation, not two plain Inputs", async () => {
+    const { container, baseElement } = await expectModalEditor(
+      {
+        field: "geolocation",
+        value: JSON.stringify({ lat: 40.7128, lng: -74.006 }),
+        fieldProps: {
+          locationIcon: React.createElement("span", null, "loc"),
+        },
+      },
+      "geolocation",
+      "Geolocation",
+    );
+    expectNotRendered(container, "Input");
+    expectNotRendered(baseElement, "Input");
+  });
+
+  it("richtexteditor renders RichTextEditor", async () => {
+    const { container, baseElement } = await expectModalEditor(
+      { field: "richtexteditor", value: "<p>Hello</p>" },
+      "richtexteditor",
+      "RichTextEditor",
+    );
+    expectNotRendered(container, "TextArea");
+    expectNotRendered(baseElement, "TextArea");
+  });
+
+  it("barcode routes through the modal editor (LC-06), never inline in the cell", async () => {
+    const { container, baseElement } = await expectModalEditor(
+      { field: "barcode", value: "SKU-001234" },
+      "barcode",
+      "Barcode",
+    );
+    // The full editor (with its camera scanner surface) must not mount inline
+    // in the cell — only inside the modal after click.
+    expectNotRendered(container, "Barcode");
+    // The modal also carries the large scannable preview.
+    expectRendered(baseElement, "BarcodePreview");
+  });
+
+  it("custom render receives the cell's honest state as the render context (D-18.4)", () => {
+    const seen: Array<{ readOnly: boolean; disabled: boolean } | undefined> = [];
+    const render = vi.fn((value: any, _row: any, _onChange: any, context?: any) => {
+      seen.push(context);
+      return React.createElement("div", { "data-component": "CustomCell" }, String(value));
+    });
+
     const { container } = renderCell({
-      field: "geolocation",
-      value: JSON.stringify({ lat: 40.7128, lng: -74.006 }),
+      field: "custom",
+      value: "v1",
+      fieldProps: { render },
+    });
+    expectRendered(container, "CustomCell");
+    expect(seen.at(-1)).toEqual({ readOnly: false, disabled: false });
+
+    const readOnlyCell = renderCell({
+      field: "custom",
+      value: "v1",
+      fieldProps: { render },
+      readOnly: true,
+    });
+    // The custom branch still owns the read-only presentation (no FieldDisplay
+    // fallback) — the context flag is how it goes non-interactive.
+    expectRendered(readOnlyCell.container, "CustomCell");
+    expectNotRendered(readOnlyCell.container, "FieldDisplay");
+    expect(seen.at(-1)).toEqual({ readOnly: true, disabled: false });
+  });
+
+  it("custom cell commits are blocked while read-only (data stays safe)", () => {
+    const onChange = vi.fn();
+    let commit: ((value: any) => void) | undefined;
+    renderCell({
+      field: "custom",
+      value: "v1",
+      onChange,
+      readOnly: true,
       fieldProps: {
-        locationIcon: React.createElement("span", null, "loc"),
+        render: (_value: any, _row: any, cellCommit: (value: any) => void) => {
+          commit = cellCommit;
+          return React.createElement("div", { "data-component": "CustomCell" });
+        },
       },
     });
-    expectRendered(container, "Geolocation");
-    expectNotRendered(container, "Input");
+    commit?.("v2");
+    expect(onChange).not.toHaveBeenCalled();
   });
 
-  it("richtexteditor renders RichTextEditor", () => {
-    const { container } = renderCell({
-      field: "richtexteditor",
-      value: "<p>Hello</p>",
+  it("radiogroup routes through the popover editor (LC-06), never inline in the cell", async () => {
+    const { container, baseElement } = renderCell({
+      field: "radiogroup",
+      value: "medium",
+      fieldProps: {
+        options: [
+          { label: "Low", value: "low" },
+          { label: "Medium", value: "medium" },
+          { label: "High", value: "high" },
+        ],
+      },
     });
-    expectRendered(container, "RichTextEditor");
-    expectNotRendered(container, "TextArea");
+    // Cell face is the compact FieldDisplay summary — the option row must not
+    // mount inline where narrow columns would clip it (UX-022).
+    const display = container.querySelector('[data-component="FieldDisplay"]');
+    expect(display?.getAttribute("data-field")).toBe("radiogroup");
+    expectNotRendered(baseElement, "RadioGroup");
+    // Opening the panel mounts the full option group.
+    fireEvent.click(container.querySelector('[data-testid="floating-panel-trigger"]')!);
+    await waitFor(() => expectRendered(baseElement, "RadioGroup"));
   });
 });