@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

package/src/widgets/__tests__/infinity-list.test.tsx

@@ -0,0 +1,132 @@
+import { describe, expect, test } from "bun:test";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import {
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../__tests__/test-utils";
+import { InfinityList } from "../infinity-list";
+
+// jsdom has no IntersectionObserver — stub stores the callback per observer
+// so tests can fire the "sentinel became visible" event manually instead of
+// simulating real scrolling.
+const observers: ((entries: readonly { isIntersecting: boolean }[]) => void)[] = [];
+globalThis.IntersectionObserver = class {
+  constructor(cb: (entries: readonly { isIntersecting: boolean }[]) => void) {
+    observers.push(cb);
+  }
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+} as unknown as typeof IntersectionObserver;
+
+function fireIntersect(): void {
+  observers[observers.length - 1]?.([{ isIntersecting: true }]);
+}
+
+function renderWithDispatcher(ui: ReactNode, dispatcher: Dispatcher) {
+  return render(<DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>);
+}
+
+type Row = { readonly id: string; readonly subject: string };
+type Page = { readonly rows: readonly Row[]; readonly nextCursor: string | null };
+
+function list(query: string) {
+  return (
+    <InfinityList<Page, Row>
+      query={query}
+      rows={(data) => data.rows}
+      nextCursor={(data) => data.nextCursor}
+      rowId={(row) => row.id}
+      renderRow={(row) => <span>{row.subject}</span>}
+      testId="inbox"
+    />
+  );
+}
+
+describe("InfinityList", () => {
+  test("rendert die erste Seite", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByText("Hallo")).toBeTruthy());
+  });
+
+  test("lädt die nächste Seite nach, sobald der Sentinel sichtbar wird", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: true,
+            data: { rows: [{ id: "m1", subject: "Erste" }], nextCursor: "c1" },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: { rows: [{ id: "m2", subject: "Zweite" }], nextCursor: null },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByText("Erste")).toBeTruthy());
+    fireIntersect();
+    await waitFor(() => expect(screen.getByText("Zweite")).toBeTruthy());
+    expect(screen.getByText("Erste")).toBeTruthy();
+    expect(calls).toBe(2);
+  });
+
+  test("Fehler → ErrorState, Retry lädt neu", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: false,
+            error: { code: "internal", message: "kaputt", i18nKey: "errors.internal" },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByRole("button")).toBeTruthy());
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => expect(screen.getByText("Hallo")).toBeTruthy());
+    expect(calls).toBe(2);
+  });
+
+  test("leeres Result rendert Empty-State", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <InfinityList<Page, Row>
+        query="inbox:query:message:list"
+        rows={(data) => data.rows}
+        nextCursor={(data) => data.nextCursor}
+        rowId={(row) => row.id}
+        renderRow={(row) => <span>{row.subject}</span>}
+        emptyState={<span>Keine Nachrichten</span>}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Keine Nachrichten")).toBeTruthy());
+  });
+});

package/src/widgets/__tests__/query-table.test.tsx

@@ -0,0 +1,118 @@
+import { describe, expect, mock, test } from "bun:test";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import {
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../__tests__/test-utils";
+import { QueryTable } from "../query-table";
+
+function renderWithDispatcher(ui: ReactNode, dispatcher: Dispatcher) {
+  return render(<DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>);
+}
+
+const COLUMNS = [
+  { field: "name", label: "Name" },
+  { field: "plan", label: "Plan" },
+] as const;
+
+describe("QueryTable", () => {
+  test("rendert Query-Result als DataTable-Rows", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: [
+          { id: "t1", name: "Acme", plan: "pro" },
+          { id: "t2", name: "Beta GmbH", plan: "free" },
+        ],
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} testId="tbl" />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    expect(screen.getByText("Beta GmbH")).toBeTruthy();
+    expect(screen.getByText("Name")).toBeTruthy();
+  });
+
+  test("Row-Click liefert die geklickte Row", async () => {
+    const onRowClick = mock((_row: { id: string }) => {});
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: [{ id: "t1", name: "Acme", plan: "pro" }],
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} onRowClick={onRowClick} />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    fireEvent.click(screen.getByText("Acme"));
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+    expect(onRowClick.mock.calls[0]?.[0]?.id).toBe("t1");
+  });
+
+  test("Fehler → ErrorState, Retry refetcht", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: false,
+            error: { code: "internal", message: "kaputt", i18nKey: "errors.internal" },
+          };
+        }
+        return { isSuccess: true, data: [{ id: "t1", name: "Acme", plan: "pro" }] };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} testId="tbl" />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByRole("button")).toBeTruthy());
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    expect(calls).toBe(2);
+  });
+
+  test("leeres Result rendert Empty-State", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({ isSuccess: true, data: [] })) as unknown as Dispatcher["query"],
+    });
+    const { container } = renderWithDispatcher(
+      <QueryTable
+        query="tenant:query:tenant:list"
+        columns={COLUMNS}
+        emptyState={<span>Keine Tenants</span>}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Keine Tenants")).toBeTruthy());
+    expect(container.querySelectorAll("tbody tr").length).toBe(0);
+  });
+
+  test("rows-Selector zieht Rows aus verschachteltem Result", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { items: [{ id: "x", name: "Nested", plan: "pro" }], total: 1 },
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable<{ items: readonly Record<string, unknown>[]; total: number }>
+        query="tenant:query:tenant:list"
+        columns={COLUMNS}
+        rows={(data) => data.items}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Nested")).toBeTruthy());
+  });
+});

package/src/widgets/__tests__/result-panel.test.tsx

@@ -0,0 +1,117 @@
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "../../__tests__/test-utils";
+import { ComparisonTable, ResultTable } from "../result-panel";
+
+const COLUMNS = [
+  { header: "Jahr", cell: (row: { year: number; total: number }) => row.year },
+  {
+    header: "Summe",
+    align: "right" as const,
+    cell: (row: { year: number; total: number }) => row.total,
+  },
+];
+const ROWS = [
+  { year: 2026, total: 100 },
+  { year: 2027, total: 200 },
+];
+
+describe("ResultTable", () => {
+  test("card=true wrapt in den gerundeten Border-Container mit bg-muted-Header", () => {
+    const { container } = render(
+      <ResultTable columns={COLUMNS} rows={ROWS} rowKey={(r) => String(r.year)} card testId="rt" />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeTruthy();
+    expect(container.querySelector("thead.bg-muted")).toBeTruthy();
+    expect(screen.getByText("2026")).toBeTruthy();
+  });
+
+  test("ohne card kein Wrapper (bare default)", () => {
+    const { container } = render(
+      <ResultTable columns={COLUMNS} rows={ROWS} rowKey={(r) => String(r.year)} testId="rt" />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeNull();
+    expect(container.querySelector("thead.bg-muted")).toBeNull();
+  });
+
+  test("footer rows render as table rows spanning all-but-last column, value under the last column", () => {
+    const { container } = render(
+      <ResultTable
+        columns={COLUMNS}
+        rows={ROWS}
+        rowKey={(r) => String(r.year)}
+        testId="rt"
+        footer={[
+          { label: "Subtotal", value: "300" },
+          { label: "Total", value: "300", emphasize: true },
+        ]}
+      />,
+    );
+    const footerRows = container.querySelectorAll("tbody tr");
+    // 2 data rows + 2 footer rows.
+    expect(footerRows).toHaveLength(4);
+    const totalRow = footerRows[3];
+    expect(totalRow?.querySelector("td[colspan]")?.textContent).toBe("Total");
+    expect(totalRow?.querySelectorAll("td")[1]?.textContent).toBe("300");
+    expect(totalRow?.className).toContain("font-semibold");
+    expect(screen.getByText("Subtotal")).toBeTruthy();
+  });
+
+  test("single-column table: footer value still renders (not dropped)", () => {
+    const singleColumn = [{ header: "Jahr", cell: (row: { year: number }) => row.year }];
+    const { container } = render(
+      <ResultTable
+        columns={singleColumn}
+        rows={ROWS}
+        rowKey={(r) => String(r.year)}
+        testId="rt"
+        footer={[{ label: "Total", value: "300", emphasize: true }]}
+      />,
+    );
+    const footerRows = container.querySelectorAll("tbody tr");
+    expect(footerRows).toHaveLength(3);
+    const totalRow = footerRows[2];
+    // Single <td> carries both label and value — colSpan is dropped, not
+    // set to 0, since there's only one column to span.
+    expect(totalRow?.querySelectorAll("td")).toHaveLength(1);
+    expect(totalRow?.querySelector("td")?.hasAttribute("colspan")).toBe(false);
+    expect(screen.getByText("Total")).toBeTruthy();
+    expect(screen.getByText("300")).toBeTruthy();
+  });
+});
+
+describe("ComparisonTable", () => {
+  const cols = ["A", "B"];
+  const metrics = [{ label: "Zins", value: (col: string) => `${col}-Zins` }];
+
+  test("card=true wrapt in den gerundeten Border-Container mit bg-muted-Header", () => {
+    const { container } = render(
+      <ComparisonTable
+        columns={cols}
+        columnHeader={(c) => c}
+        columnKey={(c) => c}
+        metrics={metrics}
+        metricLabel="Kennzahl"
+        card
+        testId="ct"
+      />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeTruthy();
+    expect(container.querySelector("thead.bg-muted")).toBeTruthy();
+    expect(screen.getByText("A-Zins")).toBeTruthy();
+  });
+
+  test("ohne card kein Wrapper (bare default)", () => {
+    const { container } = render(
+      <ComparisonTable
+        columns={cols}
+        columnHeader={(c) => c}
+        columnKey={(c) => c}
+        metrics={metrics}
+        metricLabel="Kennzahl"
+        testId="ct"
+      />,
+    );
+    expect(container.querySelector(".rounded-lg.border.bg-card")).toBeNull();
+    expect(container.querySelector("thead.bg-muted")).toBeNull();
+  });
+});

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

@@ -0,0 +1,243 @@
+import { describe, expect, mock, test } from "bun:test";
+import { fireEvent, render, screen } from "../../__tests__/test-utils";
+import { StatusBarChart, smoothPath, TimeseriesChart } from "../charts";
+import { CollapsibleSection } from "../collapsible-section";
+import { DetailList } from "../detail-list";
+import { ModeSwitch } from "../mode-switch";
+import { ProgressBar } from "../progress-bar";
+import { SectionCard } from "../section-card";
+import { MiniStat, StatCard } from "../stat";
+import { EmptyState } from "../states";
+import { StatusBadge } from "../status-badge";
+
+describe("StatusBadge", () => {
+  test("rendert Label mit Tone-Klassen", () => {
+    render(
+      <StatusBadge tone="ok" testId="badge">
+        Operational
+      </StatusBadge>,
+    );
+    const badge = screen.getByTestId("badge");
+    expect(badge.textContent).toBe("Operational");
+    expect(badge.className).toContain("text-status-ok");
+  });
+
+  test("muted nutzt die neutralen Theme-Tokens", () => {
+    render(
+      <StatusBadge tone="muted" testId="badge">
+        Resolved
+      </StatusBadge>,
+    );
+    expect(screen.getByTestId("badge").className).toContain("text-muted-foreground");
+  });
+});
+
+describe("ProgressBar", () => {
+  test("clampt value auf 0..1 und setzt aria", () => {
+    render(<ProgressBar value={1.7} testId="bar" />);
+    expect(screen.getByTestId("bar").getAttribute("aria-valuenow")).toBe("100");
+  });
+
+  test("negative Werte werden 0", () => {
+    render(<ProgressBar value={-3} testId="bar" />);
+    expect(screen.getByTestId("bar").getAttribute("aria-valuenow")).toBe("0");
+  });
+});
+
+describe("ModeSwitch", () => {
+  test("markiert aktive Option und feuert onChange", () => {
+    const onChange = mock((_v: string) => {});
+    render(
+      <ModeSwitch
+        value="a"
+        options={[
+          { value: "a", label: "Modus A" },
+          { value: "b", label: "Modus B" },
+        ]}
+        onChange={onChange}
+      />,
+    );
+    const active = screen.getByRole("button", { name: "Modus A" });
+    expect(active.getAttribute("aria-pressed")).toBe("true");
+    fireEvent.click(screen.getByRole("button", { name: "Modus B" }));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+
+  test("#902: Buttons sind als zusammengehörige Gruppe gekennzeichnet", () => {
+    render(
+      <ModeSwitch
+        value="a"
+        options={[
+          { value: "a", label: "Modus A" },
+          { value: "b", label: "Modus B" },
+        ]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole("group")).toBeTruthy();
+  });
+});
+
+describe("CollapsibleSection", () => {
+  test("async geflipptes defaultOpen öffnet nachträglich", () => {
+    const { rerender, container } = render(
+      <CollapsibleSection title="Erweitert" defaultOpen={false}>
+        <span>Inhalt</span>
+      </CollapsibleSection>,
+    );
+    const details = container.querySelector("details");
+    expect(details?.open).toBe(false);
+    rerender(
+      <CollapsibleSection title="Erweitert" defaultOpen={true}>
+        <span>Inhalt</span>
+      </CollapsibleSection>,
+    );
+    expect(container.querySelector("details")?.open).toBe(true);
+  });
+});
+
+describe("DetailList", () => {
+  test("rendert Label/Wert-Paare als dl", () => {
+    render(<DetailList rows={[{ label: "Name", value: "Acme" }]} testId="dl" />);
+    expect(screen.getByText("Name").tagName).toBe("DT");
+    expect(screen.getByText("Acme").tagName).toBe("DD");
+  });
+});
+
+describe("SectionCard", () => {
+  test("rendert Titel, Action-Slot und Children über das Card-Primitive", () => {
+    render(
+      <SectionCard title="Verlauf" action={<button type="button">Range</button>}>
+        <span>Body</span>
+      </SectionCard>,
+    );
+    expect(screen.getByText("Verlauf")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Range" })).toBeTruthy();
+    expect(screen.getByText("Body")).toBeTruthy();
+  });
+});
+
+describe("StatCard", () => {
+  test("rendert Label, Wert, Delta und Sub-Zeile", () => {
+    render(
+      <StatCard
+        label="Restschuld"
+        value="123.456 €"
+        sub="nach 10 Jahren"
+        delta={{ value: "2,1 %", direction: "down" }}
+      />,
+    );
+    expect(screen.getByText("Restschuld")).toBeTruthy();
+    expect(screen.getByText("123.456 €")).toBeTruthy();
+    expect(screen.getByText(/2,1 %/)).toBeTruthy();
+    expect(screen.getByText("nach 10 Jahren")).toBeTruthy();
+  });
+
+  test("accentColor färbt den Icon-Chip inline", () => {
+    const { container } = render(
+      <StatCard
+        icon={<svg aria-hidden="true" />}
+        label="Zins"
+        value="3,1 %"
+        accentColor="#123456"
+      />,
+    );
+    const chip = container.querySelector("span[style]");
+    // happy-dom parst color-mix()-backgroundColor nicht — color reicht als Beleg.
+    expect(chip?.getAttribute("style") ?? "").toContain("#123456");
+  });
+});
+
+describe("MiniStat", () => {
+  test("emphasize hebt die Kachel mit Ring hervor", () => {
+    render(<MiniStat label="Rate" value="890 €" emphasize testId="mini" />);
+    expect(screen.getByTestId("mini").className).toContain("ring-1");
+  });
+});
+
+describe("EmptyState", () => {
+  test("rendert Titel, Beschreibung und CTA", () => {
+    render(
+      <EmptyState
+        title="Noch keine Monitore"
+        description="Lege den ersten an."
+        action={<button type="button">Neu</button>}
+      />,
+    );
+    expect(screen.getByText("Noch keine Monitore")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Neu" })).toBeTruthy();
+  });
+});
+
+describe("smoothPath", () => {
+  test("leer → leerer Pfad, ein Punkt → Move + Line auf sich selbst", () => {
+    expect(smoothPath([])).toBe("");
+    expect(smoothPath([{ x: 1, y: 2 }])).toBe("M 1.0 2.0 L 1.0 2.0");
+  });
+
+  test("glättet über Quadratic-Midpoints und endet am letzten Punkt", () => {
+    const d = smoothPath([
+      { x: 0, y: 0 },
+      { x: 10, y: 20 },
+      { x: 20, y: 0 },
+    ]);
+    expect(d.startsWith("M 0.0 0.0")).toBe(true);
+    expect(d).toContain("Q 10.0 20.0, 15.0 10.0");
+    expect(d.endsWith("L 20.0 0.0")).toBe(true);
+  });
+});
+
+describe("StatusBarChart", () => {
+  test("rendert einen Bar pro Entry mit aria-Label", () => {
+    const { container } = render(
+      <StatusBarChart
+        ariaLabel="Uptime 90 Tage"
+        entries={[
+          { key: "d1", level: 1, tone: "ok" },
+          { key: "d2", level: 0.5, tone: "bad" },
+        ]}
+        startLabel="90 Tage"
+        endLabel="heute"
+      />,
+    );
+    expect(screen.getByRole("img", { name: "Uptime 90 Tage" })).toBeTruthy();
+    // 2 Entries × (Gradient-Bar + Tick) + 1 Last-Highlight-Stripe = 5 rects
+    expect(container.querySelectorAll("rect").length).toBe(5);
+    expect(screen.getByText("heute")).toBeTruthy();
+  });
+});
+
+describe("TimeseriesChart", () => {
+  test("unter 2 Messwerten rendert emptyContent statt Chart", () => {
+    const { container } = render(
+      <TimeseriesChart
+        points={[{ atMs: 1000, value: 42 }]}
+        windowStartMs={0}
+        windowEndMs={2000}
+        ariaLabel="Antwortzeit"
+        emptyContent={<span>Noch keine Messdaten</span>}
+      />,
+    );
+    expect(screen.getByText("Noch keine Messdaten")).toBeTruthy();
+    expect(container.querySelector("svg")).toBeNull();
+  });
+
+  test("rendert Linie + Fläche + Achsen-Labels", () => {
+    const { container } = render(
+      <TimeseriesChart
+        points={[
+          { atMs: 0, value: 100 },
+          { atMs: 1000, value: 200 },
+          { atMs: 2000, value: null },
+        ]}
+        windowStartMs={0}
+        windowEndMs={2000}
+        ariaLabel="Antwortzeit"
+        axisLabels={{ start: "vor 24h", end: "jetzt" }}
+      />,
+    );
+    expect(screen.getByRole("img", { name: "Antwortzeit" })).toBeTruthy();
+    expect(container.querySelectorAll("path").length).toBe(2);
+    expect(screen.getByText("jetzt")).toBeTruthy();
+  });
+});