@cosmicdrift/kumiko-renderer-web 0.14.0 → 0.15.0

package/src/__tests__/use-query-live.test.tsx

@@ -1,4 +1,4 @@
-// @vitest-environment jsdom
+import { describe, expect, test } from "bun:test";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import {
   DispatcherProvider,
@@ -8,7 +8,6 @@ import {
   useQuery,
 } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
-import { describe, expect, test } from "vitest";
 import { act, createMockDispatcher, render, waitFor } from "./test-utils";
 
 // Test-Helper: fake LiveEventSubscriber. Sammelt alle Subscriber, das

package/src/__tests__/use-query.test.tsx

@@ -1,8 +1,7 @@
-// @vitest-environment jsdom
+import { describe, expect, mock, test } from "bun:test";
 import type { Dispatcher, DispatcherError } from "@cosmicdrift/kumiko-headless";
 import { DispatcherProvider, useQuery } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
-import { describe, expect, test, vi } from "vitest";
 import { act, createMockDispatcher, renderHook, waitFor } from "./test-utils";
 
 function makeDispatcher(queryFn?: Dispatcher["query"]): Dispatcher {
@@ -17,7 +16,7 @@ function wrap(dispatcher: Dispatcher) {
 
 describe("useQuery", () => {
   test("loads on mount; populates data, flips loading to false", async () => {
-    const query = vi.fn(
+    const query = mock(
       async () => ({ isSuccess: true, data: [{ id: "1" }, { id: "2" }] }) as never,
     );
     const dispatcher = makeDispatcher(query as unknown as Dispatcher["query"]);
@@ -32,7 +31,7 @@ describe("useQuery", () => {
     await waitFor(() => expect(result.current.loading).toBe(false));
     expect(result.current.data).toEqual([{ id: "1" }, { id: "2" }]);
     expect(result.current.error).toBeNull();
-    expect(query).toHaveBeenCalledOnce();
+    expect(query).toHaveBeenCalledTimes(1);
   });
 
   test("server error surfaces via `error`; data stays null", async () => {
@@ -42,7 +41,7 @@ describe("useQuery", () => {
       i18nKey: "errors.not_found",
       message: "no",
     };
-    const query = vi.fn(async () => ({ isSuccess: false, error: err }) as never);
+    const query = mock(async () => ({ isSuccess: false, error: err }) as never);
     const { result } = renderHook(() => useQuery("task:list", {}), {
       wrapper: wrap(makeDispatcher(query as unknown as Dispatcher["query"])),
     });
@@ -53,7 +52,7 @@ describe("useQuery", () => {
   });
 
   test("enabled:false skips the auto-fetch until refetch is called", async () => {
-    const query = vi.fn(async () => ({ isSuccess: true, data: ["hi"] }) as never);
+    const query = mock(async () => ({ isSuccess: true, data: ["hi"] }) as never);
     const { result } = renderHook(() => useQuery("task:list", {}, { enabled: false }), {
       wrapper: wrap(makeDispatcher(query as unknown as Dispatcher["query"])),
     });
@@ -65,13 +64,13 @@ describe("useQuery", () => {
     await act(async () => {
       await result.current.refetch();
     });
-    expect(query).toHaveBeenCalledOnce();
+    expect(query).toHaveBeenCalledTimes(1);
     expect(result.current.data).toEqual(["hi"]);
   });
 
   test("refetch re-runs and replaces data (after-mutation reload pattern)", async () => {
     let callCount = 0;
-    const query = vi.fn(async () => {
+    const query = mock(async () => {
       callCount += 1;
       return { isSuccess: true, data: [callCount] } as never;
     });

package/src/__tests__/use-store.test.tsx

@@ -1,7 +1,6 @@
-// @vitest-environment jsdom
+import { describe, expect, mock, test } from "bun:test";
 import { createStore, shallowEqual } from "@cosmicdrift/kumiko-headless";
 import { useStore, useStoreSelector } from "@cosmicdrift/kumiko-renderer";
-import { describe, expect, test, vi } from "vitest";
 import { act, renderHook } from "./test-utils";
 
 describe("useStore", () => {
@@ -116,7 +115,7 @@ describe("useStoreSelector", () => {
 
   test("custom equals receives previous and current selected values", () => {
     const store = createStore({ count: 0 });
-    const equals = vi.fn((_a: number, _b: number) => false); // never equal
+    const equals = mock((_a: number, _b: number) => false); // never equal
     let renderCount = 0;
     renderHook(() => {
       renderCount += 1;

package/src/__tests__/visual-tree-integration.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 //
 // V.1.1-D Integration-Test — End-to-End-Beweis für die Schleife
 // `clientFeatures.treeProvider → useTreeProviders → VisualTree →
@@ -22,6 +21,7 @@
 // setupTestStack kommt mit V.1.2 wenn text-content's Slug-Liste durch
 // die Server-Pipeline geht.
 
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
 import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
 import type { FeatureSchema, WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
 import {
@@ -32,7 +32,6 @@ import {
 } from "@cosmicdrift/kumiko-renderer";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import { useBrowserNavApi } from "../app/nav";
 import { TreeProvidersProvider } from "../app/tree-providers-context";
 import { setDispatchListener } from "../layout/target-resolver-stub";

package/src/__tests__/workspace-shell.test.tsx

@@ -1,5 +1,4 @@
-// @vitest-environment jsdom
-
+import { beforeEach, describe, expect, mock, test } from "bun:test";
 import type { WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
 import {
   createStaticLocaleResolver,
@@ -9,7 +8,6 @@ import {
 } from "@cosmicdrift/kumiko-renderer";
 import { render as _render, act } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
 import { useBrowserNavApi } from "../app/nav";
 import {
   filterByAccess,
@@ -237,7 +235,7 @@ describe("WorkspaceSwitcher", () => {
   });
 
   test("clicking a tab calls onSelect with that workspace id", () => {
-    const onSelect = vi.fn();
+    const onSelect = mock();
     render(
       <WorkspaceSwitcher
         workspaces={[

package/src/app/create-app.tsx

@@ -27,7 +27,7 @@ import {
   useNav,
 } from "@cosmicdrift/kumiko-renderer";
 import { type ComponentType, type ReactNode, useMemo } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot, type Root } from "react-dom/client";
 import { lastSegment } from "../layout/nav-tree";
 import { defaultPrimitives } from "../primitives";
 import { ToastProvider } from "../primitives/toast";
@@ -111,7 +111,7 @@ function readInjectedSchema(): AppSchema | FeatureSchema | undefined {
   return w.__KUMIKO_SCHEMA__;
 }
 
-export function createKumikoApp(options: CreateKumikoAppOptions = {}): void {
+export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonly root: Root } {
   const rootId = options.rootId ?? "root";
   const container = document.getElementById(rootId);
   if (!container) {
@@ -272,7 +272,9 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): void {
     </TokensBoot>
   );
 
-  createRoot(container).render(tree);
+  const root = createRoot(container);
+  root.render(tree);
+  return { root };
 }
 
 // TokensBoot nutzt den browser-backed TokensApi-Hook (class-based

package/src/layout/__tests__/visual-tree.test.tsx

@@ -1,10 +1,8 @@
-// @vitest-environment jsdom
-
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
 import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
 import { NavProvider } from "@cosmicdrift/kumiko-renderer";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import { useBrowserNavApi } from "../../app/nav";
 import { TreeProvidersProvider } from "../../app/tree-providers-context";
 import { setDispatchListener } from "../target-resolver-stub";
@@ -43,9 +41,9 @@ function makeMutableProvider(initial: readonly TreeNode[]): {
   };
 }
 
-function renderTree(
+async function renderTree(
   providers: ReadonlyMap<string, TreeChildrenSubscribe>,
-): ReturnType<typeof render> {
+): Promise<ReturnType<typeof render>> {
   function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
     // V.1.4b: TreeNodeRenderer + ActionButton nutzen useDispatchTarget,
     // das useNav greift — Tests brauchen NavProvider. Browser-nav reset
@@ -57,7 +55,12 @@ function renderTree(
       </NavProvider>
     );
   }
-  return render(<VisualTree workspaceId="test-ws" />, { wrapper: Wrapper });
+  const result = render(<VisualTree workspaceId="test-ws" />, { wrapper: Wrapper });
+  // Asynchrone React-Effects (useEffect mit setTimeout/Promise) in
+  // act() abfangen. Ohne das feuern State-Updates außerhalb von act
+  // und produzieren "not wrapped in act"-Warnungen.
+  await act(async () => {});
+  return result;
 }
 
 // vitest+Bun-Runtime liefert nur ein partielles localStorage (kein
@@ -90,15 +93,15 @@ beforeEach(() => {
 });
 
 describe("VisualTree — Empty-State", () => {
-  test("ohne registrierte Provider rendert sichtbaren Empty-Hint", () => {
-    renderTree(new Map());
+  test("ohne registrierte Provider rendert sichtbaren Empty-Hint", async () => {
+    await renderTree(new Map());
     expect(screen.getByLabelText("Visual Tree (no providers)")).toBeTruthy();
     expect(screen.getByText(/Keine Tree-Provider aktiv/)).toBeTruthy();
   });
 
-  test("Provider-Map vorhanden + emittet leere TreeNode[]: kein Empty-State, kein NavTree-Fallback", () => {
+  test("Provider-Map vorhanden + emittet leere TreeNode[]: kein Empty-State, kein NavTree-Fallback", async () => {
     const providers = new Map([["text-content", makeStaticProvider([])]]);
-    renderTree(providers);
+    await renderTree(providers);
     // Nicht im Empty-State (es gibt einen registrierten Provider, der
     // hat nur kein Knoten emittet). Stattdessen rendert die ProviderBranch
     // mit dem featureName als Label im aria-tree.
@@ -108,39 +111,39 @@ describe("VisualTree — Empty-State", () => {
 });
 
 describe("VisualTree — Provider-Iteration", () => {
-  test("Single-Provider mit static-children rendert Top-Level-Knoten", () => {
+  test("Single-Provider mit static-children rendert Top-Level-Knoten", async () => {
     const providers = new Map([
       ["text-content", makeStaticProvider([{ label: "Marketing" }, { label: "Legal" }])],
     ]);
-    renderTree(providers);
+    await renderTree(providers);
     expect(screen.getByText("Marketing")).toBeTruthy();
     expect(screen.getByText("Legal")).toBeTruthy();
   });
 
-  test("Multi-Provider alphabetisch sortiert nach featureName", () => {
+  test("Multi-Provider alphabetisch sortiert nach featureName", async () => {
     // legal-pages kommt alphabetisch vor text-content
     const providers = new Map<string, TreeChildrenSubscribe>([
       ["text-content", makeStaticProvider([{ label: "Marketing" }])],
       ["legal-pages", makeStaticProvider([{ label: "Imprint" }])],
     ]);
-    renderTree(providers);
+    await renderTree(providers);
     const branches = document.querySelectorAll("[data-kumiko-tree-branch]");
     expect(branches[0]?.getAttribute("data-kumiko-tree-branch")).toBe("legal-pages");
     expect(branches[1]?.getAttribute("data-kumiko-tree-branch")).toBe("text-content");
   });
 
-  test("Provider der nicht emittet bleibt im loading-State sichtbar", () => {
+  test("Provider der nicht emittet bleibt im loading-State sichtbar", async () => {
     // Provider ruft emit nie auf (z.B. async-fetch noch im Flug)
     const noopProvider: TreeChildrenSubscribe = () => () => () => {};
     const providers = new Map([["slow-feature", noopProvider]]);
-    renderTree(providers);
+    await renderTree(providers);
     expect(screen.getByText("slow-feature: lädt …")).toBeTruthy();
   });
 
-  test("Subscribe-Update: zweiter Emit re-rendert die Liste", () => {
+  test("Subscribe-Update: zweiter Emit re-rendert die Liste", async () => {
     const { provider, emit } = makeMutableProvider([{ label: "Hero" }]);
     const providers = new Map([["text-content", provider]]);
-    renderTree(providers);
+    await renderTree(providers);
 
     expect(screen.getByText("Hero")).toBeTruthy();
 
@@ -153,7 +156,7 @@ describe("VisualTree — Provider-Iteration", () => {
     expect(screen.getByText("Hero")).toBeTruthy();
   });
 
-  test("Provider-Unsubscribe wird beim Unmount gecallt", () => {
+  test("Provider-Unsubscribe wird beim Unmount gecallt", async () => {
     let unsubscribed = false;
     const provider: TreeChildrenSubscribe = () => (emit) => {
       emit([{ label: "Foo" }]);
@@ -162,7 +165,7 @@ describe("VisualTree — Provider-Iteration", () => {
       };
     };
     const providers = new Map([["test", provider]]);
-    const result = renderTree(providers);
+    const result = await renderTree(providers);
 
     expect(unsubscribed).toBe(false);
     result.unmount();
@@ -177,7 +180,7 @@ describe("VisualTree — Click-Dispatch", () => {
     cleanup = undefined;
   });
 
-  test("Click auf Knoten mit target ruft dispatchTarget mit dem TargetRef", () => {
+  test("Click auf Knoten mit target ruft dispatchTarget mit dem TargetRef", async () => {
     const dispatched: unknown[] = [];
     cleanup = setDispatchListener((target) => {
       dispatched.push(target);
@@ -194,7 +197,7 @@ describe("VisualTree — Click-Dispatch", () => {
         ]),
       ],
     ]);
-    renderTree(providers);
+    await renderTree(providers);
 
     fireEvent.click(screen.getByText("Hero"));
 
@@ -203,7 +206,7 @@ describe("VisualTree — Click-Dispatch", () => {
     ]);
   });
 
-  test('Skeleton-Affordance: state="empty" + createAction rendert + Button und dispatcht createAction.target', () => {
+  test('Skeleton-Affordance: state="empty" + createAction rendert + Button und dispatcht createAction.target', async () => {
     // D3-Validation aus visual-tree.md V.1.1-Decisions: Provider-explizit
     // createAction-Field auf TreeNode mit state="empty" → Tree-Component
     // zeigt automatisch ein "+"-Icon und dispatcht createAction.target
@@ -229,7 +232,7 @@ describe("VisualTree — Click-Dispatch", () => {
         ]),
       ],
     ]);
-    renderTree(providers);
+    await renderTree(providers);
 
     // + Button greifbar via aria-label aus createAction.label
     const addButton = screen.getByLabelText("Add section");
@@ -238,7 +241,7 @@ describe("VisualTree — Click-Dispatch", () => {
     expect(dispatched).toEqual([{ featureId: "sections", action: "create" }]);
   });
 
-  test("Click auf Container-Knoten (mit children) toggled expand statt Dispatch", () => {
+  test("Click auf Container-Knoten (mit children) toggled expand statt Dispatch", async () => {
     const dispatched: unknown[] = [];
     cleanup = setDispatchListener((target) => {
       dispatched.push(target);
@@ -255,7 +258,7 @@ describe("VisualTree — Click-Dispatch", () => {
         ]),
       ],
     ]);
-    renderTree(providers);
+    await renderTree(providers);
 
     // Initial collapsed: Hero nicht sichtbar
     expect(screen.queryByText("Hero")).toBeNull();
@@ -267,11 +270,11 @@ describe("VisualTree — Click-Dispatch", () => {
 });
 
 describe("VisualTree — localStorage-Persistenz", () => {
-  test("Toggle persistiert expanded-Set ins localStorage pro Workspace", () => {
+  test("Toggle persistiert expanded-Set ins localStorage pro Workspace", async () => {
     const providers = new Map([
       ["text-content", makeStaticProvider([{ label: "Marketing", children: [{ label: "Hero" }] }])],
     ]);
-    renderTree(providers);
+    await renderTree(providers);
 
     fireEvent.click(screen.getByText("Marketing"));
 
@@ -282,7 +285,7 @@ describe("VisualTree — localStorage-Persistenz", () => {
     expect(parsed[0]).toContain("Marketing");
   });
 
-  test("Re-mount restored expanded-Set aus localStorage", () => {
+  test("Re-mount restored expanded-Set aus localStorage", async () => {
     // Setup: persistierter expanded-Set für test-ws-Workspace
     window.localStorage.setItem(
       "kumiko:visual-tree:expanded:test-ws",
@@ -292,7 +295,7 @@ describe("VisualTree — localStorage-Persistenz", () => {
     const providers = new Map([
       ["text-content", makeStaticProvider([{ label: "Marketing", children: [{ label: "Hero" }] }])],
     ]);
-    renderTree(providers);
+    await renderTree(providers);
 
     // Marketing ist expandiert → Hero sichtbar ohne Click
     expect(screen.getByText("Hero")).toBeTruthy();