@norskvideo/ctl-dev-kit 0.2.78 → 0.2.79

package/create-product/features/dashboard.ts

@@ -13,6 +13,7 @@
 // directory below is not a free choice.
 import type { GeneratedFile, ShapeContext } from "../create-product.ts";
 import { EXAMPLE_ID } from "./components.ts";
+import { TEST_SETUP_TS, UI_TEST_DEV_DEPENDENCIES, VITEST_CONFIG_TS } from "./ui-tests.ts";
 
 /** The tar ships workflow.yml at its root, so Studio knows the workflow by this name. */
 export const WORKFLOW_NAME = "workflow";
@@ -39,6 +40,7 @@ function packageJson(ctx: ShapeContext): string {
         dev: "bunx vite build --watch",
         clean: `rm -rf ../dashboards/${WORKFLOW_NAME}`,
         typecheck: "bunx tsc --noEmit",
+        test: "vitest run",
       },
       dependencies: {
         react: "^19.0.0",
@@ -51,6 +53,7 @@ function packageJson(ctx: ShapeContext): string {
         "@vitejs/plugin-react": "^6.0.1",
         typescript: "^5.7.2",
         vite: "^8.0.0",
+        ...UI_TEST_DEV_DEPENDENCIES,
       },
     },
     null,
@@ -209,6 +212,38 @@ export default function App({ env }: { env: Env }) {
 }
 `;
 
+// A stand-in for the component's state socket: what a dashboard test drives
+// instead of a running Studio.
+const APP_TEST_TSX = `import { act, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import App from "./App.tsx";
+
+class FakeSocket {
+  static last: FakeSocket | undefined;
+  onmessage: ((event: { data: string }) => void) | null = null;
+  constructor(readonly url: string) {
+    FakeSocket.last = this;
+  }
+  close() {}
+  deliver(message: unknown) {
+    this.onmessage?.({ data: JSON.stringify(message) });
+  }
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+test("shows the component's state as it arrives", () => {
+  vi.stubGlobal("WebSocket", FakeSocket);
+  render(<App env={{ apiBasePath: "/api", wsBasePath: "/ws" }} />);
+  expect(screen.getByText(/waiting for the component's first state/)).toBeInTheDocument();
+
+  act(() => FakeSocket.last?.deliver({ type: "state-update", state: { ticks: 3 } }));
+  expect(screen.getByText("3 ticks")).toBeInTheDocument();
+});
+`;
+
 const MAIN_TSX = `import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
@@ -263,9 +298,12 @@ export function dashboardFiles(ctx: ShapeContext): GeneratedFile[] {
     { path: "dashboard/package.json", content: packageJson(ctx) },
     { path: "dashboard/tsconfig.json", content: TSCONFIG },
     { path: "dashboard/vite.config.ts", content: VITE_CONFIG_TS },
+    { path: "dashboard/vitest.config.ts", content: VITEST_CONFIG_TS },
     { path: "dashboard/index.html", content: indexHtml(ctx) },
     { path: "dashboard/src/main.tsx", content: MAIN_TSX },
     { path: "dashboard/src/App.tsx", content: APP_TSX },
+    { path: "dashboard/src/App.test.tsx", content: APP_TEST_TSX },
+    { path: "dashboard/src/test/setup.ts", content: TEST_SETUP_TS },
     { path: "dashboard/src/api.ts", content: API_TS },
     { path: "dashboard/src/index.css", content: INDEX_CSS },
     { path: "backend/src/lib/dashboards.ts", content: BACKEND_LIB_DASHBOARDS_TS },

package/create-product/features/frontend.ts

@@ -13,6 +13,7 @@
 // three independent edits, and why the dev script builds dist before starting
 // the backend that serves it.
 import type { GeneratedFile, ShapeContext } from "../create-product.ts";
+import { TEST_SETUP_TS, UI_TEST_DEV_DEPENDENCIES, VITEST_CONFIG_TS } from "./ui-tests.ts";
 
 export const CONFIG_SCREEN_URL = "/configure";
 
@@ -31,6 +32,7 @@ function packageJson(ctx: ShapeContext): string {
         build: "bunx vite build",
         clean: "rm -rf dist",
         typecheck: "bunx tsc --noEmit",
+        test: "vitest run",
       },
       dependencies: {
         [`${ctx.scope}/shared`]: "workspace:*",
@@ -44,6 +46,7 @@ function packageJson(ctx: ShapeContext): string {
         "@vitejs/plugin-react": "^6.0.1",
         typescript: "^5.7.2",
         vite: "^8.0.0",
+        ...UI_TEST_DEV_DEPENDENCIES,
       },
     },
     null,
@@ -141,6 +144,18 @@ export default function App() {
 `;
 }
 
+function appTestTsx(ctx: ShapeContext): string {
+  return `import { render, screen } from "@testing-library/react";
+import { expect, test } from "vitest";
+import App from "./App.tsx";
+
+test("names the product", () => {
+  render(<App />);
+  expect(screen.getByRole("heading", { name: "${ctx.name}" })).toBeInTheDocument();
+});
+`;
+}
+
 const INDEX_CSS = `:root {
   color-scheme: light dark;
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
@@ -157,9 +172,12 @@ export function frontendFiles(ctx: ShapeContext): GeneratedFile[] {
     { path: "frontend/package.json", content: packageJson(ctx) },
     { path: "frontend/tsconfig.json", content: TSCONFIG },
     { path: "frontend/vite.config.ts", content: VITE_CONFIG_TS },
+    { path: "frontend/vitest.config.ts", content: VITEST_CONFIG_TS },
     { path: "frontend/index.html", content: indexHtml(ctx) },
     { path: "frontend/src/main.tsx", content: MAIN_TSX },
     { path: "frontend/src/App.tsx", content: appTsx(ctx) },
+    { path: "frontend/src/App.test.tsx", content: appTestTsx(ctx) },
+    { path: "frontend/src/test/setup.ts", content: TEST_SETUP_TS },
     { path: "frontend/src/index.css", content: INDEX_CSS },
   ];
 }

package/create-product/features/ui-tests.ts

@@ -0,0 +1,44 @@
+// The test runner the two screen workspaces (frontend/, dashboard/) share:
+// vitest under jsdom with testing-library, run by the root `test:unit`, so the
+// product's one test command covers the screens too.
+
+export const UI_TEST_DEV_DEPENDENCIES = {
+  "@testing-library/jest-dom": "^6.9.1",
+  "@testing-library/react": "^16.3.2",
+  jsdom: "^29.0.1",
+  vitest: "^4.1.3",
+};
+
+// Like vite.config.ts, kept out of the tsconfig `include`: it imports the
+// bundler.
+export const VITEST_CONFIG_TS = `import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitest/config";
+
+// One React instance: alias to the pair react-dom loads, so testing-library
+// cannot pull in a second copy (every hook then throws).
+const require = createRequire(import.meta.url);
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: { react: dirname(require.resolve("react")), "react-dom": dirname(require.resolve("react-dom")) },
+    dedupe: ["react", "react-dom"],
+  },
+  test: {
+    include: ["src/**/*.test.{ts,tsx}"],
+    environment: "jsdom",
+    setupFiles: ["./src/test/setup.ts"],
+  },
+});
+`;
+
+// Without vitest globals, testing-library cannot register its own cleanup, so
+// renders would pile up across tests in one document.
+export const TEST_SETUP_TS = `import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(cleanup);
+`;

package/create-product/turnkey.ts

@@ -158,6 +158,9 @@ shared core.
 
 function claudeTail(ctx: ShapeContext): string {
   const workspaceNotes = featureNotes(ctx);
+  const screens = (["dashboard", "frontend"] as const).filter((f) => ctx.features.has(f));
+  const screenTests =
+    screens.length === 0 ? "" : `, then the vitest suites of ${screens.map((s) => `\`${s}/\``).join(" and ")} (jsdom)`;
   return `${workspaceNotes}## Getting norsk-ctl + the dev loop
 
 \`norsk-ctl\` (the daemon/CLI) is **not** an npm dep — it's the released binary,
@@ -285,7 +288,7 @@ refreshed \`~/.norsk-ctl/product-templates/<name>/compose.yml\` carries the pins
 Byte-snapshots (\`tests/unit/workflow-snapshot.test.ts\`) pin the emitted wire
 bytes; \`UPDATE_SNAPSHOTS=1\` refreshes deliberately.
 
-- \`bun run test\` / \`test:unit\` — shared/backend units + tests/unit scaffolds.
+- \`bun run test\` / \`test:unit\` — shared/backend units + tests/unit scaffolds${screenTests}.
 - \`bun run test:image\` — image smoke test (needs Docker + \`bun run build:image\`):
   runs the built container and asserts the surface \`product add\` probes.
 - \`bun run check:drift\` — the shared-conventions gate; CI runs it plus
@@ -322,7 +325,11 @@ function rootPackageJson(ctx: ShapeContext): string {
         lint: "biome check .",
         "lint:fix": "biome check --write .",
         test: "bun run test:unit",
-        "test:unit": `bun test shared/src/ backend/src/ ${hasComponents ? "components/src/ " : ""}tests/unit/`,
+        "test:unit": [
+          `bun test shared/src/ backend/src/ ${hasComponents ? "components/src/ " : ""}tests/unit/`,
+          ...(hasDashboard ? ["bun run --cwd dashboard test"] : []),
+          ...(hasFrontend ? ["bun run --cwd frontend test"] : []),
+        ].join(" && "),
         "test:image": "bun test tests/image/",
         "test:smoke": "NORSK_CTL_ENV=test bun test tests/smoke.spec.ts",
         "check:drift": "bun run node_modules/@norskvideo/ctl-dev-kit/conventions/check-drift.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norskvideo/ctl-dev-kit",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "exports": {
     "./create-product": "./create-product/create-product.ts",
@@ -44,16 +44,22 @@
     "@norskvideo/norsk-studio-builder": "1.30.0-2026-10-12-34c09bda",
     "@norskvideo/norsk-studio-built-ins": "1.30.0-2026-10-12-34c09bda",
     "@playwright/test": "^1.59.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/bun": "latest",
     "@types/cors": "^2.8.17",
     "@types/express": "5",
     "@types/node": "^22.10.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^6.0.1",
     "cors": "^2.8.5",
     "express": "5",
+    "jsdom": "^29.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.3",
     "yaml": "^2.8.0",
     "zod": "4.4.3"
   },