@cosmicdrift/kumiko-renderer-web 0.232.0 → 0.234.0

package/src/__tests__/primitives.test.tsx

@@ -15,7 +15,7 @@ import { defaultPrimitives, END_LABEL_MIN_ROWS } from "../primitives";
 import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen, waitFor } from "./test-utils";
 
-const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card } =
+const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card, Section } =
   defaultPrimitives;
 
 describe("Button", () => {
@@ -43,7 +43,7 @@ describe("Button", () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  test("loading: rendert Spinner statt Children + ist disabled", () => {
+  test("loading: Spinner ersetzt icon-Slot, Children bleiben sichtbar (kein Width-Jump) + ist disabled", () => {
     const onClick = mock();
     render(
       <Button loading onClick={onClick} testId="btn">
@@ -53,10 +53,28 @@ describe("Button", () => {
     const btn = screen.getByTestId("btn") as HTMLButtonElement;
     expect(btn.disabled).toBe(true);
     expect(btn.dataset["loading"]).toBe("true");
-    // Children verschwinden während loading; Spinner ist ein <svg>.
-    expect(btn.textContent).not.toContain("Save");
+    expect(btn.textContent).toContain("Save");
     expect(btn.querySelector("svg")).not.toBeNull();
   });
+
+  test("icon: rendert ein SVG vor dem Label, kein SVG ohne icon-Prop", () => {
+    render(
+      <Button icon="trash" testId="btn">
+        Delete
+      </Button>,
+    );
+    const btn = screen.getByTestId("btn") as HTMLButtonElement;
+    const svg = btn.querySelector("svg");
+    expect(svg).not.toBeNull();
+    expect(btn.textContent).toBe("Delete");
+    // The icon sits before the label text node in DOM order.
+    expect(svg?.compareDocumentPosition(btn.lastChild as Node)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+
+    render(<Button testId="btn-no-icon">Delete</Button>);
+    expect(screen.getByTestId("btn-no-icon").querySelector("svg")).toBeNull();
+  });
 });
 
 describe("Banner", () => {
@@ -160,10 +178,10 @@ describe("Input kind mapping", () => {
     expect(onChange).toHaveBeenLastCalledWith(undefined);
   });
 
-  test('kind="boolean": onChange receives checked', () => {
+  test('kind="boolean" outside layout="inline": renders a switch, onChange receives checked', () => {
     const onChange = mock();
     render(<Input id="i" name="i" kind="boolean" value={false} onChange={onChange} />);
-    fireEvent.click(screen.getByRole("checkbox"));
+    fireEvent.click(screen.getByRole("switch"));
     expect(onChange).toHaveBeenCalledWith(true);
   });
 
@@ -234,6 +252,125 @@ describe("Input kind mapping", () => {
     expect(input.className).toContain("text-right");
     expect(document.querySelector("svg[aria-hidden='true']")).not.toBeNull();
   });
+
+  test('kind="number" unit="km": renders a muted, aria-hidden suffix inside the field and pads the input', () => {
+    render(<Input id="i" name="i" kind="number" value={58} unit="km" onChange={() => {}} />);
+    const input = screen.getByRole("spinbutton");
+    expect(input.className).toContain("pr-8");
+    const suffix = screen.getByText("km");
+    expect(suffix.getAttribute("aria-hidden")).toBe("true");
+    expect((input as HTMLInputElement).value).toBe("58");
+  });
+
+  test('kind="number" without unit: no suffix rendered, no right padding', () => {
+    render(<Input id="i" name="i" kind="number" value={58} onChange={() => {}} />);
+    expect(screen.queryByText("km")).toBeNull();
+    expect(screen.getByRole("spinbutton").className).not.toContain("pr-8");
+  });
+
+  test('kind="number" unit="km": typing only changes the numeric value, the unit never enters it', () => {
+    const onChange = mock();
+    render(<Input id="i" name="i" kind="number" value={58} unit="km" onChange={onChange} />);
+    fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "120" } });
+    expect(onChange).toHaveBeenCalledWith(120);
+  });
+
+  test('kind="number" icon="hash" unit="km": both decorations render without clobbering each other', () => {
+    render(
+      <Input id="i" name="i" kind="number" value={58} icon="hash" unit="km" onChange={() => {}} />,
+    );
+    const input = screen.getByRole("spinbutton");
+    expect(input.className).toContain("pl-8");
+    expect(input.className).toContain("pr-8");
+    expect(document.querySelector("svg[aria-hidden='true']")).not.toBeNull();
+    const suffix = screen.getByText("km");
+    expect(suffix.getAttribute("aria-hidden")).toBe("true");
+  });
+});
+
+// Boolean fields render a switch inside a standard (stacked) Field — matching
+// every other field's label-above-control arrangement — while layout="inline"
+// Fields (MultiSelectCheckboxes, the BooleanField widget) keep the checkbox.
+describe("Input kind=boolean: switch vs checkbox", () => {
+  test("Field (default layout) + Input(boolean): renders role=switch, not checkbox", () => {
+    render(
+      <Field id="active" label="Active" testId="field-active">
+        <Input id="active" name="active" kind="boolean" value={false} onChange={mock()} />
+      </Field>,
+    );
+    const field = screen.getByTestId("field-active");
+    expect(field.querySelector('[role="switch"]')).toBeTruthy();
+    expect(field.querySelector('[role="checkbox"]')).toBeNull();
+  });
+
+  test("Field(layout=inline) + Input(boolean): keeps the checkbox", () => {
+    render(
+      <Field id="opt" label="Option A" layout="inline" testId="field-opt">
+        <Input id="opt" name="opt" kind="boolean" value={false} onChange={mock()} />
+      </Field>,
+    );
+    const field = screen.getByTestId("field-opt");
+    expect(field.querySelector('[role="checkbox"]')).toBeTruthy();
+    expect(field.querySelector('[role="switch"]')).toBeNull();
+  });
+
+  test("clicking the switch reports the inverted value to onChange", () => {
+    const onChange = mock();
+    render(<Input id="active" name="active" kind="boolean" value={true} onChange={onChange} />);
+    fireEvent.click(screen.getByRole("switch"));
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  test("aria-checked reflects the value, and the switch toggles via keyboard", async () => {
+    const onChange = mock();
+    const { rerender } = render(
+      <Input id="active" name="active" kind="boolean" value={false} onChange={onChange} />,
+    );
+    expect(screen.getByRole("switch").getAttribute("aria-checked")).toBe("false");
+
+    rerender(<Input id="active" name="active" kind="boolean" value={true} onChange={onChange} />);
+    expect(screen.getByRole("switch").getAttribute("aria-checked")).toBe("true");
+
+    const user = userEvent.setup();
+    await user.tab();
+    expect(document.activeElement).toBe(screen.getByRole("switch"));
+    await user.keyboard(" ");
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  test("disabled prevents toggling", () => {
+    const onChange = mock();
+    render(
+      <Input id="active" name="active" kind="boolean" value={false} onChange={onChange} disabled />,
+    );
+    const toggle = screen.getByRole("switch") as HTMLButtonElement;
+    expect(toggle.disabled).toBe(true);
+    fireEvent.click(toggle);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("boolean field's label sits above the control, same as a text field's", () => {
+    render(
+      <>
+        <Field id="active" label="Active" testId="field-active">
+          <Input id="active" name="active" kind="boolean" value={false} onChange={mock()} />
+        </Field>
+        <Field id="title" label="Title" testId="field-title">
+          <Input id="title" name="title" kind="text" value="" onChange={mock()} />
+        </Field>
+      </>,
+    );
+
+    const booleanField = screen.getByTestId("field-active");
+    const textField = screen.getByTestId("field-title");
+
+    // Same structural shape: label-row first, control second — the exact
+    // regression the old inline-layout checkbox introduced for booleans.
+    expect(booleanField.children[0]?.querySelector("label")).toBeTruthy();
+    expect(booleanField.children[1]?.getAttribute("role")).toBe("switch");
+    expect(textField.children[0]?.querySelector("label")).toBeTruthy();
+    expect(textField.children[1]?.tagName).toBe("INPUT");
+  });
 });
 
 describe("DataTable", () => {
@@ -984,6 +1121,76 @@ describe("DataTable", () => {
       // beim Action-Click gleichzeitig zum Edit-Screen navigieren.
       expect(onRowClick).not.toHaveBeenCalled();
     });
+
+    // fw-ui-defaults: rowActionMode="inline" renders every action as an
+    // always-visible button (no Kebab, unlike adaptive) — a group with more
+    // than two icon-carrying actions collapses to icon-only so it doesn't
+    // become a wall of text buttons.
+    describe("icon-only collapse (mode='inline', >2 actions, all carry an icon)", () => {
+      test("renders icon-only buttons with an accessible name per action", () => {
+        render(
+          <DataTable
+            columns={cols}
+            rows={rows}
+            testId="dt"
+            rowActionMode="inline"
+            rowActions={[
+              { id: "edit", label: "Edit", icon: "pencil", onTrigger: mock() },
+              { id: "archive", label: "Archive", icon: "archive", onTrigger: mock() },
+              { id: "delete", label: "Delete", icon: "trash", onTrigger: mock() },
+            ]}
+          />,
+        );
+        for (const [id, label] of [
+          ["edit", "Edit"],
+          ["archive", "Archive"],
+          ["delete", "Delete"],
+        ] as const) {
+          expect(screen.getByTestId(`row-r1-action-${id}`).getAttribute("aria-label")).toBe(label);
+        }
+        const editButton = screen.getByTestId("row-r1-action-edit");
+        // Icon-only: children (the label text) are gone, only the <svg> renders.
+        expect(editButton.textContent).toBe("");
+        expect(editButton.querySelector("svg")).not.toBeNull();
+        expect(editButton.getAttribute("title")).toBe("Edit");
+      });
+
+      test("a group of exactly two icon actions keeps the text label (rule needs >2)", () => {
+        render(
+          <DataTable
+            columns={cols}
+            rows={rows}
+            testId="dt"
+            rowActionMode="inline"
+            rowActions={[
+              { id: "edit", label: "Edit", icon: "pencil", onTrigger: mock() },
+              { id: "delete", label: "Delete", icon: "trash", onTrigger: mock() },
+            ]}
+          />,
+        );
+        expect(screen.getByTestId("row-r1-action-edit").textContent).toContain("Edit");
+        expect(screen.getByTestId("row-r1-action-delete").textContent).toContain("Delete");
+      });
+
+      test("a mixed group (one action without an icon) keeps every label as text", () => {
+        render(
+          <DataTable
+            columns={cols}
+            rows={rows}
+            testId="dt"
+            rowActionMode="inline"
+            rowActions={[
+              { id: "edit", label: "Edit", icon: "pencil", onTrigger: mock() },
+              { id: "archive", label: "Archive", icon: "archive", onTrigger: mock() },
+              { id: "custom", label: "Custom", onTrigger: mock() },
+            ]}
+          />,
+        );
+        expect(screen.getByTestId("row-r1-action-edit").textContent).toContain("Edit");
+        expect(screen.getByTestId("row-r1-action-archive").textContent).toContain("Archive");
+        expect(screen.getByTestId("row-r1-action-custom").textContent).toContain("Custom");
+      });
+    });
   });
 
   describe("highlighted column", () => {
@@ -1202,9 +1409,11 @@ describe("Form", () => {
       </Form>,
     );
     const actionsFooter = screen.getByTestId("form-actions");
-    expect(actionsFooter.className).toContain("max-sm:fixed");
-    expect(actionsFooter.className).toContain("flex-wrap");
-    const contentContainer = actionsFooter.previousElementSibling as HTMLElement;
+    // stickyActions classes live on the outer footer container, which wraps
+    // the (optional) secondary group and the main actions group together.
+    const footer = actionsFooter.parentElement as HTMLElement;
+    expect(footer.className).toContain("max-sm:fixed");
+    const contentContainer = footer.previousElementSibling as HTMLElement;
     expect(contentContainer.className).toContain("max-sm:pb-32");
   });
 
@@ -1215,12 +1424,9 @@ describe("Form", () => {
       </Form>,
     );
     const actionsFooter = screen.getByTestId("form-actions");
-    expect(actionsFooter.className).not.toContain("max-sm:fixed");
-    // Shared cardFooter constant — this asserts the wrap fix (fw#2528) on the
-    // plain (non-sticky) footer, which also covers Section/Card since they
-    // render the same constant.
-    expect(actionsFooter.className).toContain("flex-wrap");
-    const contentContainer = actionsFooter.previousElementSibling as HTMLElement;
+    const footer = actionsFooter.parentElement as HTMLElement;
+    expect(footer.className).not.toContain("max-sm:fixed");
+    const contentContainer = footer.previousElementSibling as HTMLElement;
     expect(contentContainer.className).not.toContain("max-sm:pb-32");
   });
 });
@@ -1467,6 +1673,30 @@ describe("Card", () => {
   });
 });
 
+describe("Section", () => {
+  test("declared icon renders left of the title", () => {
+    render(
+      <Section title="Text" icon="tag" testId="s">
+        <span>body</span>
+      </Section>,
+    );
+    const titleEl = screen.getByTestId("s-title");
+    expect(titleEl.querySelector("svg")).not.toBeNull();
+    expect(titleEl.className).toContain("items-center");
+  });
+
+  test("no icon → header renders exactly as before (no svg, no layout change)", () => {
+    render(
+      <Section title="Text" testId="s">
+        <span>body</span>
+      </Section>,
+    );
+    const titleEl = screen.getByTestId("s-title");
+    expect(titleEl.querySelector("svg")).toBeNull();
+    expect(titleEl.textContent).toBe("Text");
+  });
+});
+
 describe("Stack", () => {
   test("gap-Variante bildet auf die Tailwind-gap-Klasse ab", () => {
     render(

package/src/__tests__/projection-detail-record-layout.test.tsx

@@ -129,6 +129,69 @@ describe("KumikoScreen / projectionDetail — record header + metrics band", ()
     expect(screen.queryByTestId("kumiko-screen-projection-detail-title")).toBeNull();
     expect(screen.queryByTestId("kumiko-screen-projection-detail-metrics")).toBeNull();
   });
+
+  test("colors the status badge via the StatusTone heuristic for a recognized value", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", status: "state" },
+    };
+    const dispatcher = dispatcherReturning({ ...rowData, state: "overdue" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.getByTestId("kumiko-screen-projection-detail-status").className).toContain(
+      "text-status-bad",
+    );
+  });
+
+  test("an unmapped status value falls back to the muted tone", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", status: "state" },
+    };
+    const dispatcher = dispatcherReturning({ ...rowData, state: "archived" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.getByTestId("kumiko-screen-projection-detail-status").className).toContain(
+      "text-muted-foreground",
+    );
+  });
+
+  test("read-only detail screens render no footer action bar", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(baseScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.queryByTestId("render-edit-form-actions")).toBeNull();
+  });
 });
 
 describe("KumikoScreen / projectionDetail — metric tiles render through the Metric primitive", () => {
@@ -399,6 +462,30 @@ describe("KumikoScreen / projectionDetail — layout.mode: 'tabs'", () => {
 
     expect(setSearchParamsCalls).toContainEqual({ tab: "payments" });
   });
+
+  test("relatedList tab content renders without its own Section card wrapper", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab("payments");
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:payments")).toBe(true),
+    );
+    // hideTitle (tabs mode) drops the Section wrapper — DataTable already
+    // draws its own card frame, so a second nested Card would double it up.
+    expect(screen.queryByTestId("related-list-Payments")).toBeNull();
+  });
 });
 
 // Only guard against a solon-shaped screen (relatedList-heavy) silently regressing.
@@ -448,6 +535,10 @@ describe("KumikoScreen / projectionDetail — unchanged for a solon-shaped scree
     // Contrast for the tabs-mode "form title suppressed" test above — outside
     // tabs mode (hideSectionTitles unset) the form's own title still renders.
     expect(screen.getByTestId("render-edit-form-title")).toBeTruthy();
+    // Contrast for the tabs-mode "no Section wrapper" test above — a stacked
+    // (non-tabs) relatedList section has a visible title, so it keeps its
+    // own Section card.
+    expect(screen.getByTestId("related-list-Payments")).toBeTruthy();
   });
 });
 

package/src/__tests__/render-edit.test.tsx

@@ -119,8 +119,8 @@ describe("RenderEdit", () => {
     // notes is hidden (isUrgent=false): title, count, isUrgent → 3 cells.
     expect(grid?.children.length).toBe(3);
 
-    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
-    fireEvent.click(urgentCheckbox as HTMLElement);
+    const urgentSwitch = screen.getByTestId("field-isUrgent").querySelector('[role="switch"]');
+    fireEvent.click(urgentSwitch as HTMLElement);
 
     // notes becomes visible → 4 cells, no leftover empty cell from before.
     expect(grid?.children.length).toBe(4);
@@ -240,10 +240,9 @@ describe("RenderEdit", () => {
     );
 
     expect(screen.queryByTestId("field-notes")).toBeNull();
-    // boolean-Feld = vendored Radix-Checkbox → button[role=checkbox], kein
-    // native input[type=checkbox] mehr.
-    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
-    fireEvent.click(urgentCheckbox as HTMLElement);
+    // boolean field in a standard form = vendored Radix Switch → button[role=switch].
+    const urgentSwitch = screen.getByTestId("field-isUrgent").querySelector('[role="switch"]');
+    fireEvent.click(urgentSwitch as HTMLElement);
     expect(screen.queryByTestId("field-notes")).toBeTruthy();
   });
 
@@ -284,7 +283,7 @@ describe("RenderEdit", () => {
     expect(seenResults[0]?.isSuccess).toBe(true);
   });
 
-  test("layout.width defaults the form shell to max-w-full when unset", () => {
+  test("layout.width defaults the form shell to max-w-4xl when unset", () => {
     render(
       <DispatcherProvider dispatcher={makeDispatcher()}>
         <RenderEdit<TestValues>
@@ -298,7 +297,7 @@ describe("RenderEdit", () => {
     );
 
     const shell = screen.getByTestId("render-edit-form").firstElementChild;
-    expect(shell?.className).toContain("max-w-full");
+    expect(shell?.className).toContain("max-w-4xl");
     expect(shell?.className).not.toContain("max-w-3xl");
   });
 
@@ -2858,8 +2857,8 @@ describe("RenderEdit locked state (#1896)", () => {
     expect((titleInput as HTMLInputElement).disabled).toBe(true);
     const countInput = screen.getByTestId("field-count").querySelector("input");
     expect((countInput as HTMLInputElement).disabled).toBe(true);
-    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
-    expect((urgentCheckbox as HTMLButtonElement).disabled).toBe(true);
+    const urgentSwitch = screen.getByTestId("field-isUrgent").querySelector('[role="switch"]');
+    expect((urgentSwitch as HTMLButtonElement).disabled).toBe(true);
     expect((screen.getByTestId("render-edit-submit") as HTMLButtonElement).disabled).toBe(true);
   });
 
@@ -2927,6 +2926,26 @@ describe("RenderEdit locked state (#1896)", () => {
     expect(onDelete).not.toHaveBeenCalled();
   });
 
+  test("Delete sitzt in der secondary-Gruppe, Submit in der Haupt-Gruppe (fw#2568)", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 1, isUrgent: false }}
+          writeCommand="order:create"
+          onDelete={async () => {}}
+        />
+      </DispatcherProvider>,
+    );
+
+    const deleteButton = screen.getByTestId("render-edit-delete");
+    const submitButton = screen.getByTestId("render-edit-submit");
+    expect(deleteButton.closest('[data-testid$="-actions-secondary"]')).not.toBeNull();
+    expect(submitButton.closest('[data-testid$="-actions-secondary"]')).toBeNull();
+  });
+
   test("disabled prevents picking a draft candidate from adopting it (fw#1909)", async () => {
     const screenDef: EntityEditScreenDefinition = {
       id: "orders:screen:order-wizard-locked-draftpicker",