@cosmicdrift/kumiko-renderer-web 0.1.0

package/src/__tests__/nav-base-path.test.tsx

@@ -0,0 +1,388 @@
+// @vitest-environment jsdom
+//
+// useBrowserNavApi({ basePath }) — Read-Pfad strippt den Prefix vor
+// parsePath, Write-Pfad prepend'd ihn vor pushState/replaceState/hrefFor.
+// URLs außerhalb des basePath liefern route=undefined, kein Auto-Redirect.
+//
+// Diese Datei ist gleichzeitig das gelebte Recipe für basePath: alle
+// Use-Cases die ein App-Autor unter einem Prefix mounten will (Admin-
+// Bereich unter /admin, Embedded-App unter /embed, Workspace-Routing
+// unter Prefix) sind hier mit Beispiel-URLs durchgespielt.
+
+import { NavProvider, useNav } from "@cosmicdrift/kumiko-renderer";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, test } from "vitest";
+import { KumikoLink, useBrowserNavApi } from "../app/nav";
+
+function AdminBrowserNav({ children }: { readonly children: ReactNode }): ReactNode {
+  const api = useBrowserNavApi({ basePath: "/admin" });
+  return <NavProvider value={api}>{children}</NavProvider>;
+}
+
+function Probe(): React.ReactElement {
+  const nav = useNav();
+  return (
+    <div>
+      <span data-testid="screen-id">{nav.route?.screenId ?? "(none)"}</span>
+      <span data-testid="entity-id">{nav.route?.entityId ?? "(none)"}</span>
+      <span data-testid="route-defined">{nav.route === undefined ? "out" : "in"}</span>
+      <span data-testid="href-list">{nav.hrefFor({ screenId: "task-list" })}</span>
+      <button
+        type="button"
+        data-testid="go-list"
+        onClick={() => nav.navigate({ screenId: "task-list" })}
+      >
+        go-list
+      </button>
+      <button
+        type="button"
+        data-testid="go-edit"
+        onClick={() => nav.navigate({ screenId: "task-edit", entityId: "xyz" })}
+      >
+        go-edit
+      </button>
+      <button
+        type="button"
+        data-testid="replace-list"
+        onClick={() => nav.replace({ screenId: "task-list" })}
+      >
+        replace-list
+      </button>
+    </div>
+  );
+}
+
+describe("useBrowserNavApi({ basePath: '/admin' })", () => {
+  beforeEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
+  test("Read: URL '/admin/task-list' → in-app route screenId='task-list'", () => {
+    window.history.replaceState(null, "", "/admin/task-list");
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+    expect(screen.getByTestId("route-defined").textContent).toBe("in");
+  });
+
+  test("Read: URL '/admin' (genau basePath) → in-app route undefined (Root, kein screen)", () => {
+    window.history.replaceState(null, "", "/admin");
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    // parsePath("/") returnt undefined, weil leerer Pfad keine route ist —
+    // aber wir sind IN-app (route-defined='in' wäre falsch hier weil
+    // parsePath die undefined-Antwort gibt). Prüfung über screen-id.
+    expect(screen.getByTestId("screen-id").textContent).toBe("(none)");
+  });
+
+  test("Read: URL '/marketing/foo' (außerhalb basePath) → route=undefined, App rendert Out-State", () => {
+    window.history.replaceState(null, "", "/marketing/foo");
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    expect(screen.getByTestId("route-defined").textContent).toBe("out");
+    expect(screen.getByTestId("screen-id").textContent).toBe("(none)");
+  });
+
+  test("Write: navigate({ screenId: 'task-list' }) → URL '/admin/task-list'", () => {
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-list"));
+    });
+    expect(window.location.pathname).toBe("/admin/task-list");
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+  });
+
+  test("Write: navigate mit entityId → '/admin/task-edit/xyz'", () => {
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-edit"));
+    });
+    expect(window.location.pathname).toBe("/admin/task-edit/xyz");
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-edit");
+    expect(screen.getByTestId("entity-id").textContent).toBe("xyz");
+  });
+
+  test("Write: replace verhält sich symmetrisch", () => {
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("replace-list"));
+    });
+    expect(window.location.pathname).toBe("/admin/task-list");
+  });
+
+  test("hrefFor: KumikoLink rendert Anchor mit prepended basePath", () => {
+    render(
+      <AdminBrowserNav>
+        <KumikoLink to={{ screenId: "task-list" }}>Liste</KumikoLink>
+      </AdminBrowserNav>,
+    );
+    const anchor = screen.getByText("Liste") as HTMLAnchorElement;
+    expect(anchor.getAttribute("href")).toBe("/admin/task-list");
+  });
+
+  test("hrefFor in Probe: in-app route → mit basePath prefix", () => {
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    expect(screen.getByTestId("href-list").textContent).toBe("/admin/task-list");
+  });
+
+  test("Round-trip: aus '/admin/task-edit/xyz' navigate zu '/task-list' → '/admin/task-list'", () => {
+    window.history.replaceState(null, "", "/admin/task-edit/xyz");
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-edit");
+
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-list"));
+    });
+    expect(window.location.pathname).toBe("/admin/task-list");
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+  });
+});
+
+describe("useBrowserNavApi (basePath-Edge-Cases via API)", () => {
+  beforeEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
+  test("basePath mit trailing slash wird normalisiert", () => {
+    function NavWithTrailing({ children }: { readonly children: ReactNode }): ReactNode {
+      const api = useBrowserNavApi({ basePath: "/admin/" });
+      return <NavProvider value={api}>{children}</NavProvider>;
+    }
+    window.history.replaceState(null, "", "/admin/task-list");
+    render(
+      <NavWithTrailing>
+        <Probe />
+      </NavWithTrailing>,
+    );
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+  });
+
+  test("basePath ohne leading slash wird normalisiert", () => {
+    function NavWithoutLeading({ children }: { readonly children: ReactNode }): ReactNode {
+      const api = useBrowserNavApi({ basePath: "admin" });
+      return <NavProvider value={api}>{children}</NavProvider>;
+    }
+    window.history.replaceState(null, "", "/admin/task-list");
+    render(
+      <NavWithoutLeading>
+        <Probe />
+      </NavWithoutLeading>,
+    );
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+  });
+
+  test("basePath='/' verhält sich wie kein basePath", () => {
+    function NavWithRoot({ children }: { readonly children: ReactNode }): ReactNode {
+      const api = useBrowserNavApi({ basePath: "/" });
+      return <NavProvider value={api}>{children}</NavProvider>;
+    }
+    window.history.replaceState(null, "", "/task-list");
+    render(
+      <NavWithRoot>
+        <Probe />
+      </NavWithRoot>,
+    );
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-edit"));
+    });
+    expect(window.location.pathname).toBe("/task-edit/xyz");
+  });
+
+  test("Prefix-aber-nicht-Match: '/administrator' MATCHT NICHT '/admin'", () => {
+    // /administrator startet zwar mit 'admin', aber nicht mit '/admin/' —
+    // strict-segment-Boundary verhindert false positives wie diesen.
+    window.history.replaceState(null, "", "/administrator/dashboard");
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    expect(screen.getByTestId("route-defined").textContent).toBe("out");
+  });
+});
+
+describe("useBrowserNavApi({ basePath }) — Browser-History-Integration", () => {
+  beforeEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
+  test("popstate (Browser-Back) re-rendert mit gestrippter Route", () => {
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-edit"));
+    });
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-edit");
+    expect(window.location.pathname).toBe("/admin/task-edit/xyz");
+
+    // Simulate Browser-Back zur App-Root: URL fällt auf /admin zurück,
+    // popstate feuert. Hook muss erneut strip + parse durchziehen.
+    act(() => {
+      window.history.replaceState(null, "", "/admin");
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    });
+    expect(screen.getByTestId("screen-id").textContent).toBe("(none)");
+  });
+
+  test("popstate aus dem App-Bereich raus → route wird out-of-app", () => {
+    window.history.replaceState(null, "", "/admin/task-list");
+    render(
+      <AdminBrowserNav>
+        <Probe />
+      </AdminBrowserNav>,
+    );
+    expect(screen.getByTestId("route-defined").textContent).toBe("in");
+
+    act(() => {
+      window.history.replaceState(null, "", "/marketing");
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    });
+    expect(screen.getByTestId("route-defined").textContent).toBe("out");
+  });
+});
+
+describe("useBrowserNavApi({ basePath }) — searchParams-Orthogonalität", () => {
+  beforeEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
+  function SearchProbe(): React.ReactElement {
+    const nav = useNav();
+    return (
+      <div>
+        <span data-testid="filter">{nav.searchParams["filter"] ?? "(none)"}</span>
+        <button
+          type="button"
+          data-testid="set-filter"
+          onClick={() => nav.setSearchParams({ filter: "open" })}
+        >
+          set
+        </button>
+      </div>
+    );
+  }
+
+  test("Read: ?filter=open unter '/admin/task-list' wird gelesen, nicht von basePath berührt", () => {
+    window.history.replaceState(null, "", "/admin/task-list?filter=open");
+    render(
+      <AdminBrowserNav>
+        <SearchProbe />
+      </AdminBrowserNav>,
+    );
+    expect(screen.getByTestId("filter").textContent).toBe("open");
+  });
+
+  test("Write: setSearchParams behält basePath im URL-Pfad", () => {
+    window.history.replaceState(null, "", "/admin/task-list");
+    render(
+      <AdminBrowserNav>
+        <SearchProbe />
+      </AdminBrowserNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("set-filter"));
+    });
+    // Pfad bleibt mit basePath-Prefix, ?filter wird angehängt.
+    expect(window.location.pathname).toBe("/admin/task-list");
+    expect(window.location.search).toBe("?filter=open");
+  });
+});
+
+describe("useBrowserNavApi({ basePath, hasWorkspaces })", () => {
+  beforeEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
+  function WorkspaceAdminNav({ children }: { readonly children: ReactNode }): ReactNode {
+    const api = useBrowserNavApi({ basePath: "/admin", hasWorkspaces: true });
+    return <NavProvider value={api}>{children}</NavProvider>;
+  }
+
+  function WorkspaceProbe(): React.ReactElement {
+    const nav = useNav();
+    return (
+      <div>
+        <span data-testid="workspace-id">{nav.route?.workspaceId ?? "(none)"}</span>
+        <span data-testid="screen-id">{nav.route?.screenId ?? "(none)"}</span>
+        <span data-testid="href-dispatch">
+          {nav.hrefFor({ workspaceId: "dispatch", screenId: "task-list" })}
+        </span>
+        <button
+          type="button"
+          data-testid="go-dispatch"
+          onClick={() => nav.navigate({ workspaceId: "dispatch", screenId: "task-list" })}
+        >
+          go
+        </button>
+      </div>
+    );
+  }
+
+  test("Read: '/admin/dispatch/task-list' → workspaceId='dispatch', screenId='task-list'", () => {
+    window.history.replaceState(null, "", "/admin/dispatch/task-list");
+    render(
+      <WorkspaceAdminNav>
+        <WorkspaceProbe />
+      </WorkspaceAdminNav>,
+    );
+    expect(screen.getByTestId("workspace-id").textContent).toBe("dispatch");
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+  });
+
+  test("Write: hrefFor mit Workspace-Target prepend'd basePath VOR die Workspace-id", () => {
+    render(
+      <WorkspaceAdminNav>
+        <WorkspaceProbe />
+      </WorkspaceAdminNav>,
+    );
+    expect(screen.getByTestId("href-dispatch").textContent).toBe("/admin/dispatch/task-list");
+  });
+
+  test("Write: navigate mit Workspace-Target landet auf '/admin/dispatch/task-list'", () => {
+    render(
+      <WorkspaceAdminNav>
+        <WorkspaceProbe />
+      </WorkspaceAdminNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-dispatch"));
+    });
+    expect(window.location.pathname).toBe("/admin/dispatch/task-list");
+    expect(screen.getByTestId("workspace-id").textContent).toBe("dispatch");
+    expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
+  });
+});

package/src/__tests__/nav-search-params.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+//
+// useBrowserNavApi Lese-/Schreib-Pfad für searchParams. Vor dieser
+// Suite war das Mapping `window.location.search ↔ NavApi.searchParams`
+// nur über useListUrlState mit Mock-NavApi indirekt getestet — der
+// echte URLSearchParams-Parse + replaceState-Roundtrip war ungetestet.
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { useBrowserNavApi } from "../app/nav";
+
+function setLocation(pathname: string, search: string): void {
+  window.history.replaceState(null, "", `${pathname}${search}`);
+}
+
+describe("useBrowserNavApi — searchParams", () => {
+  test("liest aktuelle ?key=value-Pairs als Plain-Record", () => {
+    setLocation("/orders", "?orders.sort=createdAt&orders.dir=desc");
+    const { result } = renderHook(() => useBrowserNavApi());
+    expect(result.current.searchParams).toEqual({
+      "orders.sort": "createdAt",
+      "orders.dir": "desc",
+    });
+  });
+
+  test("leeres ?-Suffix → leeres Record (kein crash)", () => {
+    setLocation("/orders", "");
+    const { result } = renderHook(() => useBrowserNavApi());
+    expect(result.current.searchParams).toEqual({});
+  });
+
+  test("setSearchParams: schreibt URL via replaceState (kein History-Push)", () => {
+    setLocation("/orders", "");
+    const initialHistoryLength = window.history.length;
+    const { result } = renderHook(() => useBrowserNavApi());
+    act(() => {
+      result.current.setSearchParams({ "orders.sort": "name", "orders.dir": "asc" });
+    });
+    expect(window.location.search).toBe("?orders.sort=name&orders.dir=asc");
+    // replaceState statt pushState — History-Länge unverändert.
+    expect(window.history.length).toBe(initialHistoryLength);
+  });
+
+  test("setSearchParams: null löscht den Key", () => {
+    setLocation("/orders", "?orders.sort=name&orders.dir=asc");
+    const { result } = renderHook(() => useBrowserNavApi());
+    act(() => {
+      result.current.setSearchParams({ "orders.dir": null });
+    });
+    expect(window.location.search).toBe("?orders.sort=name");
+  });
+
+  test("setSearchParams: mehrere Updates atomar (sort+dir+page in einem Call)", () => {
+    setLocation("/orders", "?orders.page=5");
+    const { result } = renderHook(() => useBrowserNavApi());
+    act(() => {
+      result.current.setSearchParams({
+        "orders.sort": "createdAt",
+        "orders.dir": "desc",
+        "orders.page": null,
+      });
+    });
+    // Reihenfolge im Output stabil weil URLSearchParams insertion-order
+    // bewahrt; löschen reduziert die Liste.
+    expect(window.location.search).toContain("orders.sort=createdAt");
+    expect(window.location.search).toContain("orders.dir=desc");
+    expect(window.location.search).not.toContain("orders.page");
+  });
+
+  test("re-render nach setSearchParams: searchParams reflektiert neuen State", () => {
+    setLocation("/orders", "");
+    const { result, rerender } = renderHook(() => useBrowserNavApi());
+    act(() => {
+      result.current.setSearchParams({ "orders.q": "acme" });
+    });
+    rerender();
+    expect(result.current.searchParams).toEqual({ "orders.q": "acme" });
+  });
+
+  test("Pfad bleibt unangetastet bei setSearchParams", () => {
+    setLocation("/dashboard", "");
+    const { result } = renderHook(() => useBrowserNavApi());
+    act(() => {
+      result.current.setSearchParams({ "items.q": "x" });
+    });
+    expect(window.location.pathname).toBe("/dashboard");
+  });
+});

package/src/__tests__/nav-tree.test.tsx

@@ -0,0 +1,183 @@
+// @vitest-environment jsdom
+//
+// NavTree: Sidebar-Navigation aus dem Schema. Pinnt zwei Verträge:
+//   1. Section-Header (parent ohne screen) plus children-Collapse
+//      via Chevron-Click — State lokal im NavTree.
+//   2. Active-State greift auf node mit screen wenn nav.route's
+//      screenId matcht (Standard-Sidebar-Verhalten).
+
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { describe, expect, test } from "vitest";
+import { NavTree } from "../layout/nav-tree";
+import { fireEvent, render, screen } from "./test-utils";
+
+function makeSchema(): FeatureSchema {
+  return {
+    featureName: "showcase",
+    entities: {},
+    screens: [
+      { id: "items", type: "entityList", entity: "item", columns: [] },
+      { id: "active", type: "entityList", entity: "item", columns: [] },
+      { id: "backlog", type: "entityList", entity: "item", columns: [] },
+    ],
+    navs: [
+      // Section ohne Screen mit children — togglebar (Variant 2)
+      { id: "data", label: "Data", order: 10 },
+      // Parent mit Screen UND children — Link + separater Chevron (Variant 1)
+      {
+        id: "items",
+        label: "Items",
+        parent: "data",
+        screen: "items",
+        order: 10,
+      },
+      {
+        id: "active",
+        label: "Active",
+        parent: "items",
+        screen: "active",
+        order: 10,
+      },
+      {
+        id: "backlog",
+        label: "Backlog",
+        parent: "items",
+        screen: "backlog",
+        order: 20,
+      },
+    ],
+  } as FeatureSchema;
+}
+
+function makeRoleGatedSchema(): FeatureSchema {
+  return {
+    featureName: "showcase",
+    entities: {},
+    screens: [
+      { id: "public-screen", type: "entityList", entity: "x", columns: [] },
+      { id: "admin-screen", type: "entityList", entity: "x", columns: [] },
+      { id: "sysadmin-screen", type: "entityList", entity: "x", columns: [] },
+    ],
+    navs: [
+      // Public — keine access-rule, sichtbar für alle (auch anonymous)
+      { id: "public", label: "Public", screen: "public-screen", order: 10 },
+      // Admin — nur User mit "Admin"-Rolle
+      {
+        id: "admin",
+        label: "Admin",
+        screen: "admin-screen",
+        order: 20,
+        access: { roles: ["Admin"] },
+      },
+      // Sysadmin — nur User mit "SystemAdmin"-Rolle
+      {
+        id: "sysadmin",
+        label: "Sysadmin",
+        screen: "sysadmin-screen",
+        order: 30,
+        access: { roles: ["SystemAdmin"] },
+      },
+    ],
+  } as FeatureSchema;
+}
+
+describe("NavTree role-gating", () => {
+  // Pinnt den prod-bug aus 2026-05-02: DefaultAppShell hat user-prop
+  // nicht durchgereicht → resolveNavigation sieht user=undefined →
+  // ALLE role-gated nav-einträge werden ausgeblendet (auch wenn der
+  // user de-facto die Rolle hat).
+
+  test("user mit ['SystemAdmin','User'] sieht public + sysadmin, NICHT admin", () => {
+    render(
+      <NavTree
+        schema={makeRoleGatedSchema()}
+        user={{ id: "u1", roles: ["SystemAdmin", "User"] }}
+      />,
+    );
+    expect(screen.getByText("Public")).toBeTruthy();
+    expect(screen.getByText("Sysadmin")).toBeTruthy();
+    expect(screen.queryByText("Admin")).toBeNull();
+  });
+
+  test("user mit ['Admin'] sieht public + admin, NICHT sysadmin", () => {
+    render(<NavTree schema={makeRoleGatedSchema()} user={{ id: "u1", roles: ["Admin"] }} />);
+    expect(screen.getByText("Public")).toBeTruthy();
+    expect(screen.getByText("Admin")).toBeTruthy();
+    expect(screen.queryByText("Sysadmin")).toBeNull();
+  });
+
+  test("OHNE user-prop (anonymous) → role-gated navs ausgeblendet, nur public sichtbar", () => {
+    // Genau das Verhalten das den prod-bug verursacht hat: wenn
+    // DefaultAppShell user nicht weiterreicht, sieht resolveNavigation
+    // anonymous → alle role-gated navs verschwinden.
+    render(<NavTree schema={makeRoleGatedSchema()} />);
+    expect(screen.getByText("Public")).toBeTruthy();
+    expect(screen.queryByText("Admin")).toBeNull();
+    expect(screen.queryByText("Sysadmin")).toBeNull();
+  });
+
+  test("multi-role-merge: user mit überlappenden rollen sieht beide", () => {
+    render(
+      <NavTree
+        schema={makeRoleGatedSchema()}
+        user={{ id: "u1", roles: ["Admin", "SystemAdmin", "User"] }}
+      />,
+    );
+    expect(screen.getByText("Public")).toBeTruthy();
+    expect(screen.getByText("Admin")).toBeTruthy();
+    expect(screen.getByText("Sysadmin")).toBeTruthy();
+  });
+});
+
+describe("NavTree", () => {
+  test("Section-Header (parent ohne screen) rendert children eingerückt — default expanded", () => {
+    render(<NavTree schema={makeSchema()} testId="tree" />);
+
+    // Section "Data" ist als Toggle-Button gerendert (uppercase).
+    const dataHeader = screen.getByText("Data").closest("button") as HTMLButtonElement;
+    expect(dataHeader).not.toBeNull();
+    expect(dataHeader.getAttribute("aria-expanded")).toBe("true");
+
+    // Children sind sichtbar im DOM.
+    expect(screen.getByText("Items")).toBeTruthy();
+    expect(screen.getByText("Active")).toBeTruthy();
+    expect(screen.getByText("Backlog")).toBeTruthy();
+  });
+
+  test("Click auf Section-Header toggled aria-expanded — children verschwinden", () => {
+    render(<NavTree schema={makeSchema()} testId="tree" />);
+
+    const dataHeader = screen.getByText("Data").closest("button") as HTMLButtonElement;
+    fireEvent.click(dataHeader);
+
+    expect(dataHeader.getAttribute("aria-expanded")).toBe("false");
+    // Items ist child von Data → nach Collapse nicht mehr im DOM
+    expect(screen.queryByText("Items")).toBeNull();
+    expect(screen.queryByText("Active")).toBeNull();
+  });
+
+  test("Parent mit Screen + children — Chevron-Click toggled, ohne Navigation", () => {
+    render(<NavTree schema={makeSchema()} testId="tree" />);
+
+    // "Items" hat children Active+Backlog; default expanded
+    expect(screen.getByText("Active")).toBeTruthy();
+    expect(screen.getByText("Backlog")).toBeTruthy();
+
+    // Section-Header "Data" ist ein einziger Toggle-Button (kein nested
+    // chevron-button drin). Parent-mit-Screen "Items" rendert dagegen den
+    // KumikoLink + separaten Chevron-Button als Geschwister — der ist
+    // der EINZIGE button mit aria-label "Zuklappen"/"Aufklappen".
+    // aria-Label kommt aus dem Framework-Default-Bundle. Test-Setup
+    // läuft auf "en" → "Expand"/"Collapse". Apps können das in eigenen
+    // Bundles per `kumiko.nav.*` überschreiben.
+    const chevronButtons = screen.getAllByRole("button", { name: /Expand|Collapse/ });
+    expect(chevronButtons.length).toBe(1);
+    fireEvent.click(chevronButtons[0] as HTMLButtonElement);
+
+    // Items ist jetzt collapsed; Active/Backlog weg
+    expect(screen.queryByText("Active")).toBeNull();
+    expect(screen.queryByText("Backlog")).toBeNull();
+    // Items selbst bleibt sichtbar
+    expect(screen.getByText("Items")).toBeTruthy();
+  });
+});