@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

package/src/widgets/__tests__/ai-text-field.test.tsx

@@ -0,0 +1,267 @@
+import { describe, expect, mock, test } from "bun:test";
+import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import { type ReactElement, useState } from "react";
+import {
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../__tests__/test-utils";
+import { AiTextArea, AiTextField, type AiTextFieldProps } from "../ai-text-field";
+
+function renderWithDispatcher(
+  ui: ReactElement,
+  query: NonNullable<Parameters<typeof createMockDispatcher>[0]>["query"],
+) {
+  const dispatcher = createMockDispatcher({ query });
+  return render(<DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>);
+}
+
+// Real controlled-component loop: onChange feeds back into `value` so
+// Tab-accept sees the actually-typed text, not a stale prop. Plain
+// `mock()`-only setups (no state) can't exercise this — that's a test
+// bug we hit and fixed once already (see git history), keep it this way.
+function ControlledAiTextField(
+  props: Omit<AiTextFieldProps, "value" | "onChange"> & {
+    readonly initialValue: string;
+    readonly onChangeSpy?: (v: string) => void;
+  },
+) {
+  const { initialValue, onChangeSpy, ...rest } = props;
+  const [value, setValue] = useState(initialValue);
+  return (
+    <AiTextField
+      {...rest}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        onChangeSpy?.(v);
+      }}
+    />
+  );
+}
+
+describe("AiTextField", () => {
+  test("plain typing calls onChange like a normal text field", () => {
+    const onChangeSpy = mock((_v: string) => {});
+    renderWithDispatcher(
+      <ControlledAiTextField
+        label="Title"
+        id="title"
+        name="title"
+        initialValue=""
+        onChangeSpy={onChangeSpy}
+        actions={[]}
+        completion={false}
+        testId="title"
+      />,
+      (async () => ({
+        isSuccess: true,
+        data: { type: "text", text: "", usage: { inputTokens: 0, outputTokens: 0 } },
+      })) as never,
+    );
+    fireEvent.change(screen.getByTestId("title-input"), { target: { value: "hi" } });
+    expect(onChangeSpy).toHaveBeenCalledWith("hi");
+  });
+
+  test("ghost-text: shows suggestion, Tab accepts it appended to the typed text", async () => {
+    const onChangeSpy = mock((_v: string) => {});
+    renderWithDispatcher(
+      <ControlledAiTextField
+        label="Title"
+        id="title"
+        name="title"
+        initialValue=""
+        onChangeSpy={onChangeSpy}
+        actions={[]}
+        completionDebounceMs={5}
+        testId="title"
+      />,
+      (async () => ({
+        isSuccess: true,
+        data: { type: "text", text: "fox", usage: { inputTokens: 1, outputTokens: 1 } },
+      })) as never,
+    );
+
+    const input = screen.getByTestId("title-input");
+    fireEvent.change(input, { target: { value: "the quick brown " } });
+
+    await waitFor(() => expect(screen.queryByText("fox")).toBeTruthy(), { timeout: 1000 });
+
+    fireEvent.keyDown(input, { key: "Tab" });
+    expect(onChangeSpy).toHaveBeenLastCalledWith("the quick brown fox");
+  });
+
+  test("ghost-text: Esc discards the suggestion without calling onChange", async () => {
+    const onChangeSpy = mock((_v: string) => {});
+    renderWithDispatcher(
+      <ControlledAiTextField
+        label="Title"
+        id="title"
+        name="title"
+        initialValue=""
+        onChangeSpy={onChangeSpy}
+        actions={[]}
+        completionDebounceMs={5}
+        testId="title"
+      />,
+      (async () => ({
+        isSuccess: true,
+        data: { type: "text", text: "there", usage: { inputTokens: 1, outputTokens: 1 } },
+      })) as never,
+    );
+
+    const input = screen.getByTestId("title-input");
+    fireEvent.change(input, { target: { value: "hi " } });
+    await waitFor(() => expect(screen.queryByText("there")).toBeTruthy(), { timeout: 1000 });
+
+    onChangeSpy.mockClear();
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(screen.queryByText("there")).toBeNull();
+    expect(onChangeSpy).not.toHaveBeenCalled();
+  });
+
+  test("feature_disabled → toolbar hides, field stays usable (graceful degradation)", async () => {
+    const onChangeSpy = mock((_v: string) => {});
+    renderWithDispatcher(
+      <ControlledAiTextField
+        label="Title"
+        id="title"
+        name="title"
+        initialValue=""
+        onChangeSpy={onChangeSpy}
+        completionDebounceMs={5}
+        testId="title"
+      />,
+      (async () => ({
+        isSuccess: false,
+        error: { code: "feature_disabled", message: "off", i18nKey: "errors.feature.disabled" },
+      })) as never,
+    );
+
+    fireEvent.change(screen.getByTestId("title-input"), { target: { value: "hi " } });
+    await waitFor(() => expect(screen.queryByRole("button")).toBeNull(), { timeout: 1000 });
+    expect(screen.getByTestId("title-input")).toBeTruthy();
+  });
+
+  test("correct action: opens dialog, runs immediately, apply calls onChange with the result", async () => {
+    const onChangeSpy = mock((_v: string) => {});
+    renderWithDispatcher(
+      <ControlledAiTextField
+        label="Title"
+        id="title"
+        name="title"
+        initialValue="teh cat sat"
+        onChangeSpy={onChangeSpy}
+        completion={false}
+        actions={["correct"]}
+        testId="title"
+      />,
+      (async (_type: string, payload: unknown) => {
+        const mode = (payload as { mode: string }).mode;
+        if (mode !== "correct") throw new Error(`unexpected mode ${mode}`);
+        return {
+          isSuccess: true,
+          data: { type: "text", text: "the cat sat", usage: { inputTokens: 3, outputTokens: 3 } },
+        };
+      }) as never,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Correct" }));
+    await waitFor(() => expect(screen.queryByText("the cat sat")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+    expect(onChangeSpy).toHaveBeenCalledWith("the cat sat");
+  });
+});
+
+describe("AiTextField ghost-text overlay — scroll sync", () => {
+  test("Tab/Escape aside: overlay mirrors the input's scrollLeft on an interactive scroll", async () => {
+    renderWithDispatcher(
+      <ControlledAiTextField
+        label="Title"
+        id="title"
+        name="title"
+        initialValue=""
+        actions={[]}
+        completionDebounceMs={5}
+        testId="title"
+      />,
+      (async () => ({
+        isSuccess: true,
+        data: { type: "text", text: "fox", usage: { inputTokens: 1, outputTokens: 1 } },
+      })) as never,
+    );
+
+    const input = screen.getByTestId("title-input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "the quick brown " } });
+    await waitFor(() => expect(screen.queryByText("fox")).toBeTruthy(), { timeout: 1000 });
+
+    const overlay = input.parentElement?.querySelector('[aria-hidden="true"]') as HTMLDivElement;
+    expect(overlay).toBeTruthy();
+
+    // Interactive scroll (e.g. arrow-key caret move) — caught by the
+    // onScroll handler.
+    Object.defineProperty(input, "scrollLeft", { value: 50, writable: true });
+    fireEvent.scroll(input);
+    expect(overlay.scrollLeft).toBe(50);
+  });
+
+  test("overlay resyncs on typing even without a `scroll` event (Chrome doesn't fire one for caret-follow auto-scroll)", async () => {
+    renderWithDispatcher(
+      <ControlledAiTextField
+        label="Title"
+        id="title"
+        name="title"
+        initialValue=""
+        actions={[]}
+        completionDebounceMs={5}
+        testId="title"
+      />,
+      (async () => ({
+        isSuccess: true,
+        data: { type: "text", text: "fox", usage: { inputTokens: 1, outputTokens: 1 } },
+      })) as never,
+    );
+
+    const input = screen.getByTestId("title-input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "the quick brown " } });
+    await waitFor(() => expect(screen.queryByText("fox")).toBeTruthy(), { timeout: 1000 });
+
+    const overlay = input.parentElement?.querySelector('[aria-hidden="true"]') as HTMLDivElement;
+
+    // Simulate the browser having auto-scrolled the input to reveal the
+    // caret WITHOUT firing a `scroll` event — the real Chrome behavior this
+    // bug hinged on. Only the value/suggestion-keyed layout effect (not
+    // onScroll) can catch this.
+    Object.defineProperty(input, "scrollLeft", { value: 120, writable: true });
+    fireEvent.change(input, { target: { value: "the quick brown f" } });
+    await waitFor(() => expect(screen.queryByText("fox")).toBeTruthy(), { timeout: 1000 });
+
+    expect(overlay.scrollLeft).toBe(120);
+  });
+});
+
+describe("AiTextArea", () => {
+  test("renders a textarea with the given rows", () => {
+    const onChange = mock((_v: string) => {});
+    renderWithDispatcher(
+      <AiTextArea
+        label="Body"
+        id="body"
+        name="body"
+        value=""
+        onChange={onChange}
+        rows={6}
+        actions={[]}
+        completion={false}
+        testId="body"
+      />,
+      (async () => ({ isSuccess: true, data: {} })) as never,
+    );
+    const el = screen.getByTestId("body-input") as HTMLTextAreaElement;
+    expect(el.tagName).toBe("TEXTAREA");
+    expect(el.getAttribute("rows")).toBe("6");
+  });
+});

package/src/widgets/__tests__/drawer.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, mock, test } from "bun:test";
+import { fireEvent, render, screen } from "../../__tests__/test-utils";
+import { Drawer } from "../drawer";
+
+describe("Drawer", () => {
+  test("rendert Titel + Inhalt wenn open", () => {
+    render(
+      <Drawer open={true} onOpenChange={() => {}} title="Mail" testId="drawer">
+        <div>Body</div>
+      </Drawer>,
+    );
+    expect(screen.getByText("Mail")).toBeTruthy();
+    expect(screen.getByText("Body")).toBeTruthy();
+  });
+
+  test("open=false rendert nichts", () => {
+    render(
+      <Drawer open={false} onOpenChange={() => {}} title="Mail">
+        <div>Body</div>
+      </Drawer>,
+    );
+    expect(screen.queryByText("Body")).toBeNull();
+  });
+
+  test("Escape ruft onOpenChange(false)", () => {
+    const onOpenChange = mock((_open: boolean) => {});
+    render(
+      <Drawer open={true} onOpenChange={onOpenChange} title="Mail" testId="drawer">
+        <div>Body</div>
+      </Drawer>,
+    );
+    fireEvent.keyDown(screen.getByTestId("drawer"), { key: "Escape" });
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/widgets/__tests__/form-kit.test.tsx

@@ -0,0 +1,368 @@
+import { describe, expect, mock, test } from "bun:test";
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { act, fireEvent, render, renderHook, screen } from "../../__tests__/test-utils";
+import { DetailList } from "../detail-list";
+import {
+  BooleanField,
+  DateField,
+  FileField,
+  MoneyField,
+  NumberField,
+  PercentField,
+  RangeField,
+  SelectField,
+  TextareaField,
+  TextField,
+} from "../form-fields";
+import { ComparisonTable, ResultPanel, ResultTable } from "../result-panel";
+import { useDraft } from "../use-draft";
+
+describe("useDraft", () => {
+  test("field() liefert verdrahtete Props, onChange patcht den Draft", () => {
+    const { result } = renderHook(() => useDraft<{ sum: number | undefined }>({ sum: 100 }));
+    expect(result.current.field("sum")).toMatchObject({ id: "sum", name: "sum", value: 100 });
+    act(() => result.current.field("sum").onChange(250));
+    expect(result.current.draft.sum).toBe(250);
+  });
+
+  test("reset stellt die Defaults wieder her", () => {
+    const { result } = renderHook(() => useDraft<{ a: number | undefined }>({ a: 1 }));
+    act(() => result.current.patch({ a: 9 }));
+    expect(result.current.draft.a).toBe(9);
+    act(() => result.current.reset());
+    expect(result.current.draft.a).toBe(1);
+  });
+
+  test("idPrefix verhindert doppelte DOM-ids bei mehreren useDraft-Formularen mit gleichem Feldnamen", () => {
+    const a = renderHook(() =>
+      useDraft<{ sum: number | undefined }>({ sum: 1 }, { idPrefix: "a" }),
+    );
+    const b = renderHook(() =>
+      useDraft<{ sum: number | undefined }>({ sum: 2 }, { idPrefix: "b" }),
+    );
+    expect(a.result.current.field("sum").id).toBe("a-sum");
+    expect(b.result.current.field("sum").id).toBe("b-sum");
+    // name bleibt der reine Key — nur die DOM-id wird prefixt.
+    expect(a.result.current.field("sum").name).toBe("sum");
+  });
+});
+
+describe("NumberField", () => {
+  test("rendert Label und meldet Zahl bei Eingabe", () => {
+    const onChange = mock();
+    render(<NumberField label="Summe" id="sum" name="sum" value={300} onChange={onChange} />);
+    expect(screen.getByText("Summe")).toBeTruthy();
+    fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "42" } });
+    expect(onChange).toHaveBeenCalledWith(42);
+  });
+
+  test("leeres Feld meldet undefined", () => {
+    const onChange = mock();
+    render(<NumberField label="X" id="x" name="x" value={5} onChange={onChange} />);
+    fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "" } });
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  test("MoneyField/PercentField rendern als beschriftetes Zahlenfeld ohne Einheit-Badge", () => {
+    const noop = (): void => {};
+    const { rerender } = render(
+      <MoneyField label="Betrag (€)" id="b" name="b" value={1} onChange={noop} />,
+    );
+    expect(screen.getByText("Betrag (€)")).toBeTruthy();
+    expect(screen.getByRole("spinbutton")).toBeTruthy();
+    expect(screen.queryByText("€")).toBeNull(); // Einheit lebt im Label, kein separates Badge
+    rerender(<PercentField label="Zins (%)" id="z" name="z" value={1} onChange={noop} />);
+    expect(screen.queryByText("%")).toBeNull();
+  });
+});
+
+describe("DetailList emphasize", () => {
+  test("emphasize hebt Label und Wert hervor", () => {
+    render(
+      <DetailList
+        testId="dl"
+        rows={[
+          { label: "Summe", value: "100" },
+          { label: "Effektiv", value: "3,1 %", emphasize: true },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Effektiv").className).toContain("font-semibold");
+    expect(screen.getByText("Summe").className).not.toContain("font-semibold");
+  });
+});
+
+describe("ResultPanel", () => {
+  test("empty zeigt den Platzhalter, keine Liste", () => {
+    render(<ResultPanel title="Ergebnis" empty emptyText="Werte eingeben" />);
+    expect(screen.getByText("Werte eingeben")).toBeTruthy();
+  });
+
+  test("gefüllt zeigt Kennzahlen und children", () => {
+    render(
+      <ResultPanel title="Ergebnis" rows={[{ label: "Rate", value: "890 €" }]}>
+        <span>extra</span>
+      </ResultPanel>,
+    );
+    expect(screen.getByText("Rate")).toBeTruthy();
+    expect(screen.getByText("extra")).toBeTruthy();
+  });
+});
+
+describe("ResultTable", () => {
+  test("rendert Header, Zeilen und rechtsbündige Zahlenspalte", () => {
+    render(
+      <ResultTable
+        testId="rt"
+        columns={[
+          { header: "Tranche", cell: (r: { name: string; sum: string }) => r.name },
+          { header: "Summe", align: "right", cell: (r) => r.sum },
+        ]}
+        rows={[{ name: "Bank", sum: "300.000 €" }]}
+        rowKey={(r) => r.name}
+      />,
+    );
+    expect(screen.getByText("Tranche")).toBeTruthy();
+    expect(screen.getByText("Bank")).toBeTruthy();
+    expect(screen.getByText("Summe").className).toContain("text-right");
+    expect(screen.getByText("300.000 €").className).toContain("tabular-nums");
+  });
+});
+
+describe("Feld-Widgets (Select/Date/Text/Boolean/Textarea)", () => {
+  const noopStr = (): void => {};
+
+  test("SelectField rendert Label und den aktuell gewählten Wert", () => {
+    render(
+      <SelectField
+        label="Land"
+        id="l"
+        name="l"
+        value="NW"
+        onChange={noopStr}
+        options={[
+          { value: "NW", label: "Nordrhein-Westfalen" },
+          { value: "BY", label: "Bayern" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Land")).toBeTruthy();
+    expect(screen.getByText("Nordrhein-Westfalen")).toBeTruthy();
+  });
+
+  test("TextField meldet Eingabe", () => {
+    const onChange = mock();
+    render(<TextField label="Name" id="n" name="n" value="A" onChange={onChange} />);
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Neu" } });
+    expect(onChange).toHaveBeenCalledWith("Neu");
+  });
+
+  test("DateField rendert mit Wert", () => {
+    render(
+      <DateField
+        label="Datum"
+        id="d"
+        name="d"
+        value="2026-07-10"
+        onChange={noopStr}
+        max="2030-01-01"
+      />,
+    );
+    expect(screen.getByText("Datum")).toBeTruthy();
+  });
+
+  test("BooleanField meldet Umschalten", () => {
+    const onChange = mock();
+    render(<BooleanField label="Aktiv" id="b" name="b" value={false} onChange={onChange} />);
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  test("TextareaField meldet Eingabe", () => {
+    const onChange = mock();
+    render(<TextareaField label="Notiz" id="t" name="t" value="" onChange={onChange} rows={3} />);
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Text" } });
+    expect(onChange).toHaveBeenCalledWith("Text");
+  });
+});
+
+describe("ResultPanel footer", () => {
+  test("rendert den footer-Slot", () => {
+    render(
+      <ResultPanel
+        title="R"
+        rows={[{ label: "X", value: "1" }]}
+        footer={<button type="button">Los</button>}
+      >
+        <span>body</span>
+      </ResultPanel>,
+    );
+    expect(screen.getByRole("button", { name: "Los" })).toBeTruthy();
+  });
+});
+
+describe("RangeField", () => {
+  test("meldet den Slider-Wert als Zahl", () => {
+    const onChange = mock();
+    render(
+      <RangeField
+        label="Abruf"
+        id="r"
+        name="r"
+        value={20}
+        min={0}
+        max={100}
+        step={5}
+        onChange={onChange}
+      />,
+    );
+    expect(screen.getByText("Abruf")).toBeTruthy();
+    fireEvent.change(screen.getByRole("slider"), { target: { value: "45" } });
+    expect(onChange).toHaveBeenCalledWith(45);
+  });
+});
+
+describe("FileField", () => {
+  test("rendert Label", () => {
+    render(
+      <FileField label="Bild" id="f" name="f" value={null} onChange={() => {}} variant="image" />,
+    );
+    expect(screen.getByText("Bild")).toBeTruthy();
+  });
+
+  test('variant="image" mit gesetzter FileRef zeigt Preview + Remove-Button', () => {
+    render(
+      <FileField
+        label="Bild"
+        id="f3"
+        name="f3"
+        value="file-abc"
+        onChange={() => {}}
+        variant="image"
+      />,
+    );
+    const img = document.querySelector("img") as HTMLImageElement;
+    expect(img.src).toContain("/api/files/file-abc");
+    expect(screen.getByRole("button", { name: "Remove" })).toBeTruthy();
+  });
+
+  test("Remove-Button ruft onChange(null)", () => {
+    const onChange = mock();
+    render(
+      <FileField
+        label="Bild"
+        id="f4"
+        name="f4"
+        value="file-abc"
+        onChange={onChange}
+        variant="image"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  test("entityType/fieldName reichen bis in den /api/files-Upload-Request durch", async () => {
+    const originalFetch = global.fetch;
+    const fetchSpy = mock(
+      async (_url: string, _init?: RequestInit) => new Response(JSON.stringify({ id: "file-1" })),
+    );
+    global.fetch = fetchSpy as unknown as typeof fetch;
+    try {
+      render(
+        <FileField
+          label="Anhang"
+          id="f2"
+          name="f2"
+          value={null}
+          onChange={() => {}}
+          entityType="property"
+          fieldName="brochure"
+        />,
+      );
+      const input = document.getElementById("f2") as HTMLInputElement;
+      const file = new File(["x"], "brochure.pdf", { type: "application/pdf" });
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+      expect(fetchSpy).toHaveBeenCalled();
+      const body = fetchSpy.mock.calls[0]?.[1]?.body as FormData;
+      expect(body.get("entityType")).toBe("property");
+      expect(body.get("fieldName")).toBe("brochure");
+    } finally {
+      global.fetch = originalFetch;
+    }
+  });
+});
+
+describe("Button size", () => {
+  function SizedButton({ size }: { readonly size: "sm" | "md" | "icon" }): ReactNode {
+    const { Button } = usePrimitives();
+    return (
+      <Button size={size} onClick={() => {}}>
+        X
+      </Button>
+    );
+  }
+  test("size=sm rendert die kompakte shadcn-Größe (h-8)", () => {
+    render(<SizedButton size="sm" />);
+    expect(screen.getByRole("button", { name: "X" }).className).toContain("h-8");
+  });
+
+  test("ariaLabel gibt icon-only-Buttons einen zugänglichen Namen", () => {
+    function IconBtn(): ReactNode {
+      const { Button } = usePrimitives();
+      return (
+        <Button size="icon" ariaLabel="Entfernen" onClick={() => {}}>
+          ✕
+        </Button>
+      );
+    }
+    render(<IconBtn />);
+    expect(screen.getByRole("button", { name: "Entfernen" })).toBeTruthy();
+  });
+
+  test('width="full" streckt den Button (w-full)', () => {
+    function WideBtn(): ReactNode {
+      const { Button } = usePrimitives();
+      return (
+        <Button width="full" onClick={() => {}}>
+          Upgrade
+        </Button>
+      );
+    }
+    render(<WideBtn />);
+    expect(screen.getByRole("button", { name: "Upgrade" }).className).toContain("w-full");
+  });
+});
+
+describe("ComparisonTable", () => {
+  test("transponierte Matrix mit Best-Highlight je Kennzahl", () => {
+    const cols = [
+      { name: "A", rate: 900 },
+      { name: "B", rate: 850 },
+    ];
+    render(
+      <ComparisonTable
+        testId="cmp"
+        columns={cols}
+        columnHeader={(c) => c.name}
+        columnKey={(c) => c.name}
+        metricLabel="Kennzahl"
+        metrics={[
+          {
+            label: "Rate",
+            value: (c: { name: string; rate: number }) => `${c.rate} €`,
+            bestIndex: (cs) => ((cs[0]?.rate ?? 0) <= (cs[1]?.rate ?? 0) ? 0 : 1),
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Kennzahl")).toBeTruthy();
+    expect(screen.getByText("A")).toBeTruthy();
+    // B (850) ist günstiger → hervorgehoben (font-semibold text-primary span)
+    expect(screen.getByText("850 €").className).toContain("text-primary");
+    expect(screen.getByText("900 €").className).not.toContain("text-primary");
+  });
+});