@cosmicdrift/kumiko-renderer-web 0.26.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",

package/src/layout/__tests__/avatar.test.tsx

@@ -0,0 +1,51 @@
+// Avatar Render-Tests (Phase 1, test-luecken-integration, Tier 2).
+//
+// Avatar ist ein pures Presentational-Component (kein Context, kein Radix)
+// → happy-dom-Render reicht. Pinnt die Initials-Extraktion und die
+// deterministische, id-basierte Farbwahl.
+
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { Avatar } from "../avatar";
+
+const colorClass = (className: string): string | undefined =>
+  className.split(/\s+/).find((c) => c.startsWith("bg-"));
+
+describe("Avatar — Initials", () => {
+  test("Zwei-Wort-Label → Initialen beider Wörter (DH), role=img, aria-label", () => {
+    render(<Avatar id="u1" label="Daniel Hennig" testId="av" />);
+    const el = screen.getByTestId("av");
+    expect(el.textContent).toBe("DH");
+    expect(el.getAttribute("role")).toBe("img");
+    expect(el.getAttribute("aria-label")).toBe("Daniel Hennig");
+  });
+
+  test("Single-Word → erste 2 Buchstaben, upper-case (Daniel → DA)", () => {
+    render(<Avatar id="u" label="Daniel" testId="av" />);
+    expect(screen.getByTestId("av").textContent).toBe("DA");
+  });
+
+  test("Email als Single-Token → erste 2 Buchstaben (alice@… → AL)", () => {
+    // Hinweis: der Code-Kommentar behauptet "A", der Code liefert aber "AL"
+    // (split(/\s+/) trennt nicht an '@'). Test pinnt das IST-Verhalten.
+    render(<Avatar id="u" label="alice@example.com" testId="av" />);
+    expect(screen.getByTestId("av").textContent).toBe("AL");
+  });
+
+  test("leeres / reines Whitespace-Label → '?'", () => {
+    render(<Avatar id="u" label="   " testId="av" />);
+    expect(screen.getByTestId("av").textContent).toBe("?");
+  });
+});
+
+describe("Avatar — Farbwahl", () => {
+  test("deterministisch pro id (gleiche id → gleiche Color-Class, unabhängig vom Label)", () => {
+    const { unmount } = render(<Avatar id="stable-id" label="A B" testId="a1" />);
+    const c1 = colorClass(screen.getByTestId("a1").className);
+    unmount();
+    render(<Avatar id="stable-id" label="Z W" testId="a2" />);
+    const c2 = colorClass(screen.getByTestId("a2").className);
+    expect(c1).toMatch(/^bg-/);
+    expect(c1).toBe(c2);
+  });
+});

package/src/layout/__tests__/nav-registry.test.ts

@@ -0,0 +1,73 @@
+// nav-registry Pure-Logik Tests (Phase 1, test-luecken-integration, Tier 1).
+//
+// buildNavRegistrySlice(ForApp) qualifiziert Feature-lokale Nav-IDs zu QNs
+// (feature:nav:id), wendet einen optionalen Workspace-Allow-Filter an und
+// baut topLevel + byParent. Pure, kein DOM.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  AppSchema,
+  FeatureSchema,
+  NavDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { buildNavRegistrySlice, buildNavRegistrySliceForApp } from "../nav-tree";
+
+function feature(navs: readonly NavDefinition[], featureName = "tasks"): FeatureSchema {
+  return { featureName, entities: {}, screens: [], navs };
+}
+
+describe("buildNavRegistrySlice", () => {
+  test("qualifiziert Nav-IDs zu feature:nav:id", () => {
+    const slice = buildNavRegistrySlice(feature([{ id: "main", label: "Main" }]));
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:main"]);
+  });
+
+  test("parent-child: child unter byParent(qualified-parent), screen wird qualifiziert", () => {
+    const slice = buildNavRegistrySlice(
+      feature([
+        { id: "main", label: "Main" },
+        { id: "list", label: "List", parent: "main", screen: "task-list" },
+      ]),
+    );
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:main"]);
+    const children = slice.byParent("tasks:nav:main");
+    expect(children.map((n) => n.id)).toEqual(["tasks:nav:list"]);
+    expect(children[0]?.screen).toBe("tasks:screen:task-list");
+  });
+
+  test("allowedNavQns filtert nicht-erlaubte Navs raus", () => {
+    const slice = buildNavRegistrySlice(
+      feature([
+        { id: "a", label: "A" },
+        { id: "b", label: "B" },
+      ]),
+      new Set(["tasks:nav:a"]),
+    );
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:a"]);
+  });
+
+  test("child mit gedropptem Parent wird top-level (statt zu verschwinden)", () => {
+    const slice = buildNavRegistrySlice(
+      feature([
+        { id: "main", label: "Main" },
+        { id: "list", label: "List", parent: "main" },
+      ]),
+      new Set(["tasks:nav:list"]), // nur child erlaubt, parent gedroppt
+    );
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:list"]);
+    expect(slice.byParent("tasks:nav:main")).toEqual([]);
+  });
+});
+
+describe("buildNavRegistrySliceForApp", () => {
+  test("qualifiziert Navs pro Feature (multi-feature)", () => {
+    const app: AppSchema = {
+      features: [
+        feature([{ id: "catalog", label: "Catalog" }], "shop"),
+        feature([{ id: "users", label: "Users" }], "admin"),
+      ],
+    };
+    const slice = buildNavRegistrySliceForApp(app);
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["shop:nav:catalog", "admin:nav:users"]);
+  });
+});

package/src/layout/__tests__/workspace-access.test.ts

@@ -0,0 +1,94 @@
+// workspace-shell Pure-Logik Tests (Phase 1, test-luecken-integration, Tier 1).
+//
+// filterByAccess (Rollen-Filter + Sortierung), resolveDefaultId
+// (preferred > default > first), firstNavScreenId (erste Nav mit Screen).
+// Pure, kein DOM.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  AppSchema,
+  WorkspaceDefinition,
+  WorkspaceSchema,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { filterByAccess, firstNavScreenId, resolveDefaultId } from "../workspace-shell";
+
+function ws(definition: WorkspaceDefinition): WorkspaceSchema {
+  return { definition, navMembers: [] };
+}
+
+describe("filterByAccess", () => {
+  test("ohne access-rule immer sichtbar", () => {
+    const out = filterByAccess([ws({ id: "a", label: "A" }), ws({ id: "b", label: "B" })], []);
+    expect(out.map((w) => w.definition.id)).toEqual(["a", "b"]);
+  });
+
+  test("access {roles} filtert nach user-roles", () => {
+    const admin = ws({ id: "admin", label: "Admin", access: { roles: ["Admin"] } });
+    const open = ws({ id: "all", label: "All" });
+    expect(filterByAccess([admin, open], ["Admin"]).map((w) => w.definition.id)).toEqual([
+      "admin",
+      "all",
+    ]);
+    expect(filterByAccess([admin, open], ["User"]).map((w) => w.definition.id)).toEqual(["all"]);
+  });
+
+  test("sortiert nach order (lower = earlier)", () => {
+    const out = filterByAccess(
+      [ws({ id: "b", label: "B", order: 2 }), ws({ id: "a", label: "A", order: 1 })],
+      [],
+    );
+    expect(out.map((w) => w.definition.id)).toEqual(["a", "b"]);
+  });
+});
+
+describe("resolveDefaultId", () => {
+  test("preferred gewinnt wenn sichtbar", () => {
+    expect(resolveDefaultId([ws({ id: "a", label: "A" }), ws({ id: "b", label: "B" })], "b")).toBe(
+      "b",
+    );
+  });
+
+  test("default-flag wenn kein preferred", () => {
+    expect(
+      resolveDefaultId(
+        [ws({ id: "a", label: "A" }), ws({ id: "b", label: "B", default: true })],
+        undefined,
+      ),
+    ).toBe("b");
+  });
+
+  test("erste sichtbare als Fallback", () => {
+    expect(
+      resolveDefaultId([ws({ id: "a", label: "A" }), ws({ id: "b", label: "B" })], undefined),
+    ).toBe("a");
+  });
+
+  test("preferred nicht sichtbar → Fallback (hier: erste)", () => {
+    expect(resolveDefaultId([ws({ id: "a", label: "A" })], "nonexistent")).toBe("a");
+  });
+});
+
+describe("firstNavScreenId", () => {
+  const app: AppSchema = {
+    features: [
+      {
+        featureName: "shop",
+        entities: {},
+        screens: [],
+        navs: [
+          { id: "header", label: "H" }, // Section-Header ohne screen
+          { id: "list", label: "L", screen: "catalog" },
+        ],
+      },
+    ],
+  };
+
+  test("erste Nav (in navMembers-Reihenfolge) mit screen → lastSegment(screen)", () => {
+    expect(firstNavScreenId(app, ["shop:nav:header", "shop:nav:list"])).toBe("catalog");
+  });
+
+  test("leere oder undefined navMembers → ''", () => {
+    expect(firstNavScreenId(app, [])).toBe("");
+    expect(firstNavScreenId(app, undefined)).toBe("");
+  });
+});

package/src/layout/__tests__/workspace-switcher.test.tsx

@@ -0,0 +1,50 @@
+// WorkspaceSwitcher Render-Tests (Phase 1, test-luecken-integration, Tier 2).
+//
+// Dumb presentational component (kein Radix). Pinnt: kein Switcher bei
+// <= 1 Workspace, tablist mit aria-selected am aktiven, onSelect-Callback.
+// Nutzt useTranslation → über test-utils mit LocaleProvider gerendert.
+
+import { describe, expect, mock, test } from "bun:test";
+import type { WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
+import { fireEvent, render, screen } from "../../__tests__/test-utils";
+import { WorkspaceSwitcher } from "../workspace-switcher";
+
+function ws(id: string, label = id): WorkspaceSchema {
+  return { definition: { id, label }, navMembers: [] };
+}
+
+describe("WorkspaceSwitcher — Render", () => {
+  test("ein einziger Workspace → rendert nichts (kein nutzloser Switcher)", () => {
+    const { container } = render(
+      <WorkspaceSwitcher workspaces={[ws("a")]} activeId="a" onSelect={() => {}} />,
+    );
+    expect(container.querySelector('[role="tablist"]')).toBeNull();
+  });
+
+  test("mehrere Workspaces → tablist, aria-selected am aktiven Tab", () => {
+    render(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="b"
+        onSelect={() => {}}
+        testId="sw"
+      />,
+    );
+    expect(screen.getByTestId("sw").getAttribute("role")).toBe("tablist");
+    expect(screen.getByTestId("workspace-tab-a").getAttribute("aria-selected")).toBe("false");
+    expect(screen.getByTestId("workspace-tab-b").getAttribute("aria-selected")).toBe("true");
+  });
+
+  test("Click ruft onSelect mit der Workspace-id", () => {
+    const onSelect = mock((_id: string) => {});
+    render(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="a"
+        onSelect={onSelect}
+      />,
+    );
+    fireEvent.click(screen.getByTestId("workspace-tab-b"));
+    expect(onSelect).toHaveBeenCalledWith("b");
+  });
+});