@cosmicdrift/kumiko-bundled-features 0.1.0

package/src/auth-email-password/web/__tests__/session-roles.test.ts

@@ -0,0 +1,54 @@
+// computeActiveRoles — client-side merge muss byte-identisch zum server-
+// side merge in auth-routes.ts (switch-tenant) + login.write.ts sein.
+// Sonst sieht client andere roles als server → role-gating divergiert
+// (entweder UI zeigt was nicht erlaubt ist, oder umgekehrt).
+
+import { describe, expect, test } from "vitest";
+import type { CurrentUserProfile, TenantSummary } from "../auth-client";
+import { computeActiveRoles } from "../session";
+
+const user = (globalRoles: readonly string[]): CurrentUserProfile => ({
+  id: "u1",
+  email: "u@e.com",
+  displayName: "U",
+  globalRoles,
+});
+
+const t = (id: string, roles: readonly string[]): TenantSummary => ({ tenantId: id, roles });
+
+describe("computeActiveRoles", () => {
+  test("user=null → []", () => {
+    expect(computeActiveRoles(null, "tenant-1", [t("tenant-1", ["Admin"])])).toEqual([]);
+  });
+
+  test("globalRoles + active tenant membership → merged + dedupe", () => {
+    const result = computeActiveRoles(user(["SystemAdmin"]), "tenant-1", [
+      t("tenant-1", ["Admin"]),
+    ]);
+    expect([...result].sort()).toEqual(["Admin", "SystemAdmin"]);
+  });
+
+  test("dedupe: gleiche Rolle in global + membership → einmal", () => {
+    const result = computeActiveRoles(user(["Admin", "SystemAdmin"]), "tenant-1", [
+      t("tenant-1", ["Admin", "User"]),
+    ]);
+    expect([...result].sort()).toEqual(["Admin", "SystemAdmin", "User"]);
+  });
+
+  test("kein activeTenantId → nur globalRoles", () => {
+    const result = computeActiveRoles(user(["SystemAdmin"]), null, [t("tenant-1", ["Admin"])]);
+    expect(result).toEqual(["SystemAdmin"]);
+  });
+
+  test("activeTenantId zeigt auf nicht-vorhandenen tenant → nur globalRoles", () => {
+    const result = computeActiveRoles(user(["SystemAdmin"]), "tenant-2", [
+      t("tenant-1", ["Admin"]),
+    ]);
+    expect(result).toEqual(["SystemAdmin"]);
+  });
+
+  test("OHNE globalRoles + active membership → nur membership-roles", () => {
+    const result = computeActiveRoles(user([]), "tenant-1", [t("tenant-1", ["Admin"])]);
+    expect(result).toEqual(["Admin"]);
+  });
+});

package/src/auth-email-password/web/__tests__/tenant-switcher.test.tsx

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, test } from "vitest";
+import { TenantSwitcher } from "../tenant-switcher";
+import { makeSessionApi, renderWithProviders } from "./test-utils";
+
+// Radix-DropdownMenu reagiert auf pointerdown, nicht auf click — daher
+// userEvent statt fireEvent.
+
+describe("TenantSwitcher", () => {
+  test("renders nothing when user is null", () => {
+    const session = makeSessionApi({ status: "unauthenticated", user: null });
+    const { container } = renderWithProviders(<TenantSwitcher />, { session });
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("renders nothing when user has only one tenant", () => {
+    const session = makeSessionApi({
+      tenants: [{ tenantId: "t1", roles: ["Admin"] }],
+    });
+    const { container } = renderWithProviders(<TenantSwitcher />, { session });
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("renders trigger when user has multiple tenants", () => {
+    const session = makeSessionApi({
+      activeTenantId: "tenant-a",
+      tenants: [
+        { tenantId: "tenant-a", roles: ["Admin"] },
+        { tenantId: "tenant-b", roles: ["User"] },
+      ],
+    });
+    renderWithProviders(<TenantSwitcher tenantName={(id) => `Tenant ${id}`} />, { session });
+    // tenantName-Resolver liefert "Tenant tenant-a" als Trigger-Label
+    expect(screen.getByText("Tenant tenant-a")).toBeTruthy();
+  });
+
+  test("opens dropdown showing all memberships with roles", async () => {
+    const user = userEvent.setup();
+    const session = makeSessionApi({
+      activeTenantId: "tenant-a",
+      tenants: [
+        { tenantId: "tenant-a", roles: ["Admin"] },
+        { tenantId: "tenant-b", roles: ["User", "Billing"] },
+      ],
+    });
+    renderWithProviders(<TenantSwitcher tenantName={(id) => `Tenant ${id}`} />, {
+      session,
+    });
+    await user.click(screen.getByRole("button", { name: /Tenant tenant-a/ }));
+    // Trigger zeigt aktiven Tenant ("Tenant tenant-a") + Dropdown-Items
+    // listen ALLE Tenants — nutze getAllByText um Mehrdeutigkeit
+    // explizit zu erlauben, dann Roles-Strings als eindeutigen Anker.
+    expect(screen.getAllByText("Tenant tenant-a").length).toBeGreaterThan(0);
+    expect(screen.getByText("Tenant tenant-b")).toBeTruthy();
+    expect(screen.getByText("Admin")).toBeTruthy();
+    expect(screen.getByText("User, Billing")).toBeTruthy();
+  });
+
+  test("clicking a tenant triggers switchTenant", async () => {
+    const user = userEvent.setup();
+    const session = makeSessionApi({
+      activeTenantId: "tenant-a",
+      tenants: [
+        { tenantId: "tenant-a", roles: ["Admin"] },
+        { tenantId: "tenant-b", roles: ["User"] },
+      ],
+    });
+    renderWithProviders(<TenantSwitcher tenantName={(id) => `Tenant ${id}`} />, {
+      session,
+    });
+    await user.click(screen.getByRole("button", { name: /Tenant tenant-a/ }));
+    await user.click(screen.getByText("Tenant tenant-b"));
+    expect(session.switchTenant).toHaveBeenCalledWith("tenant-b");
+  });
+
+  test("clicking the active tenant is a no-op (closes menu, no switch call)", async () => {
+    const user = userEvent.setup();
+    const session = makeSessionApi({
+      activeTenantId: "tenant-a",
+      tenants: [
+        { tenantId: "tenant-a", roles: ["Admin"] },
+        { tenantId: "tenant-b", roles: ["User"] },
+      ],
+    });
+    renderWithProviders(<TenantSwitcher tenantName={(id) => `Tenant ${id}`} />, {
+      session,
+    });
+    await user.click(screen.getByRole("button", { name: /Tenant tenant-a/ }));
+    // Im Dropdown gibt's einen menuitemcheckbox für tenant-a (Radix-Role
+    // bei CheckboxItem) — nicht den Trigger erwischen, sondern den im
+    // role="menu".
+    const items = screen.getAllByRole("menuitemcheckbox");
+    const activeItem = items.find((el) => el.textContent?.includes("Tenant tenant-a"));
+    expect(activeItem).toBeDefined();
+    if (activeItem) await user.click(activeItem);
+    expect(session.switchTenant).not.toHaveBeenCalled();
+  });
+});

package/src/auth-email-password/web/__tests__/test-utils.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+//
+// Shared test setup für die Web-UI-Components. Mountet das Minimum
+// an Provider-Tree den die Components zur Laufzeit voraussetzen
+// (LocaleProvider mit Bundle, SessionContext mit injizierbarem Wert).
+
+import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
+import {
+  createStaticLocaleResolver,
+  LocaleProvider,
+  PrimitivesProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import { defaultPrimitives } from "@cosmicdrift/kumiko-renderer-web";
+import { render as _render, type RenderResult } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { vi } from "vitest";
+import { defaultTranslations } from "../../i18n";
+import type { SessionApi, SessionState } from "../session";
+import { SessionContext } from "../session";
+
+// Stateless Resolver — module-level cached, weil renderWithProviders
+// ihn pro Mount sonst neu konstruiert (~0.5ms × N Tests). Tests die
+// einen *anderen* Locale brauchen, übergeben ihren eigenen Resolver
+// über options.resolver.
+const sharedDeResolver = createStaticLocaleResolver({ locale: "de" });
+
+export type MakeSessionApiOptions = Partial<SessionState> & {
+  readonly login?: SessionApi["login"];
+  readonly logout?: SessionApi["logout"];
+  readonly switchTenant?: SessionApi["switchTenant"];
+};
+
+export function makeSessionApi(overrides: MakeSessionApiOptions = {}): SessionApi {
+  const { login, logout, switchTenant, ...stateOverrides } = overrides;
+  const base: SessionState = {
+    status: "authenticated",
+    user: {
+      id: "test-user",
+      email: "user@example.com",
+      displayName: "Test User",
+      globalRoles: [],
+    },
+    activeTenantId: "tenant-1",
+    tenants: [{ tenantId: "tenant-1", roles: ["Admin"] }],
+    roles: ["Admin"],
+    ...stateOverrides,
+  };
+  return {
+    ...base,
+    login: login ?? vi.fn<SessionApi["login"]>(async () => ({ ok: true })),
+    logout: logout ?? vi.fn<SessionApi["logout"]>(async () => {}),
+    switchTenant: switchTenant ?? vi.fn<SessionApi["switchTenant"]>(async () => {}),
+  };
+}
+
+export function renderWithProviders(
+  ui: ReactElement,
+  options: {
+    readonly resolver?: LocaleResolver;
+    readonly session?: SessionApi;
+  } = {},
+): RenderResult & { readonly session: SessionApi } {
+  const resolver = options.resolver ?? sharedDeResolver;
+  const session = options.session ?? makeSessionApi();
+  const result = _render(
+    <PrimitivesProvider value={defaultPrimitives}>
+      <LocaleProvider resolver={resolver} fallbackBundles={[defaultTranslations]}>
+        <SessionContext.Provider value={session}>{ui}</SessionContext.Provider>
+      </LocaleProvider>
+    </PrimitivesProvider>,
+  );
+  return { ...result, session };
+}

package/src/auth-email-password/web/__tests__/user-menu.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, test } from "vitest";
+import { UserMenu } from "../user-menu";
+import { makeSessionApi, renderWithProviders } from "./test-utils";
+
+// Radix-DropdownMenu reagiert auf pointerdown — fireEvent.click greift
+// dort nicht. userEvent simuliert die volle Pointer-Sequenz und Radix
+// öffnet sauber.
+
+describe("UserMenu", () => {
+  test("renders nothing when user is null", () => {
+    const session = makeSessionApi({ status: "unauthenticated", user: null });
+    const { container } = renderWithProviders(<UserMenu />, { session });
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("shows displayName + initials when authenticated", () => {
+    const session = makeSessionApi({
+      user: { id: "u1", email: "alice@example.com", displayName: "Alice Wonder", globalRoles: [] },
+    });
+    renderWithProviders(<UserMenu />, { session });
+    // Avatar = "AW", Display-Name "Alice Wonder"
+    expect(screen.getByText("AW")).toBeTruthy();
+    expect(screen.getByText("Alice Wonder")).toBeTruthy();
+  });
+
+  test("falls back to email-based initials when displayName empty", () => {
+    const session = makeSessionApi({
+      user: { id: "u1", email: "bob@example.com", displayName: "", globalRoles: [] },
+    });
+    renderWithProviders(<UserMenu />, { session });
+    // Trim "" → leerer displayName → fallback auf email → erste 2 Chars
+    expect(screen.getByText("BO")).toBeTruthy();
+  });
+
+  test("opens dropdown on click and shows logout button", async () => {
+    const user = userEvent.setup();
+    const session = makeSessionApi();
+    renderWithProviders(<UserMenu />, { session });
+    await user.click(screen.getByRole("button", { name: /Test User/ }));
+    expect(screen.getByText("Abmelden")).toBeTruthy();
+    expect(screen.getByText("user@example.com")).toBeTruthy();
+  });
+
+  test("logout-click triggers session.logout", async () => {
+    const user = userEvent.setup();
+    const session = makeSessionApi();
+    renderWithProviders(<UserMenu />, { session });
+    await user.click(screen.getByRole("button", { name: /Test User/ }));
+    await user.click(screen.getByText("Abmelden"));
+    expect(session.logout).toHaveBeenCalledOnce();
+  });
+});

package/src/auth-email-password/web/__tests__/verify-email-screen.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { VerifyEmailScreen } from "../verify-email-screen";
+import { renderWithProviders } from "./test-utils";
+
+beforeEach(() => {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => new Response(null, { status: 200 })),
+  );
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("VerifyEmailScreen", () => {
+  test("ohne Token → missing-token-Page", () => {
+    renderWithProviders(<VerifyEmailScreen />);
+    expect(screen.getByText(/enthält keinen Token/i)).toBeTruthy();
+  });
+
+  test("mit Token + 200 → success-state nach auto-submit", async () => {
+    const fetchMock = vi.fn(async () => new Response(null, { status: 200 }));
+    vi.stubGlobal("fetch", fetchMock);
+
+    renderWithProviders(<VerifyEmailScreen token="t-abc" />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith(
+        "/api/auth/verify-email",
+        expect.objectContaining({
+          method: "POST",
+          body: JSON.stringify({ token: "t-abc" }),
+        }),
+      );
+      expect(screen.getByText("E-Mail bestätigt")).toBeTruthy();
+    });
+  });
+
+  test("mit Token + 422 → error-state", async () => {
+    const errBody = JSON.stringify({
+      error: {
+        code: "invalid_verification_token",
+        details: { reason: "invalid_verification_token" },
+      },
+    });
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => new Response(errBody, { status: 422 })),
+    );
+
+    renderWithProviders(<VerifyEmailScreen token="bad" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Bestätigung fehlgeschlagen")).toBeTruthy();
+    });
+  });
+});