@nanobpm/urban 0.55.0 → 0.57.0

package/src/runtime/browser/runtime.browser.test.ts

@@ -0,0 +1,118 @@
+// Direct unit tests for the browser page runtime (#291). Because the runtime is
+// now REAL importable source — not a `String.raw` blob — we can import its
+// renderer functions and its RENDERERS registry and drive them with a minimal
+// fake DOM, instead of string-scraping the served module. This replaces the #290
+// regex drift guard (which had to regex the RENDERERS keys out of a string) with
+// a real import, and adds the first true renderer-level unit coverage.
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { PAGE_NODE_TYPES } from "@nanobpm/nano-app-schema";
+import { RENDERERS, renderText } from "./runtime.browser.js";
+
+// ── Minimal fake DOM ────────────────────────────────────────────────────────
+// Just enough of the Element/Document surface that el()/renderText touch:
+// createElement, className, setAttribute, addEventListener, append (of child
+// nodes and text), and a readable textContent. Installed on globalThis so the
+// module's global `document` resolves to it when a renderer is invoked. The
+// module itself performs NO DOM access at import time (its boot() is gated), so
+// installing this only needs to happen before we CALL a renderer.
+class FakeElement {
+  tagName: string;
+  attributes: Record<string, string> = {};
+  className = "";
+  children: Array<FakeElement | { text: string }> = [];
+  textContent = "";
+  dataset: Record<string, string> = {};
+  hidden = false;
+  style = { setProperty() {} };
+
+  constructor(tag: string) {
+    this.tagName = String(tag).toUpperCase();
+  }
+  setAttribute(k: string, v: unknown): void {
+    this.attributes[k] = String(v);
+    if (k === "class") this.className = String(v);
+  }
+  getAttribute(k: string): string | null {
+    return k in this.attributes ? this.attributes[k] : null;
+  }
+  addEventListener(): void {}
+  append(...kids: Array<FakeElement | string>): void {
+    for (const kid of kids) {
+      if (typeof kid === "string") {
+        this.children.push({ text: kid });
+        this.textContent += kid;
+      } else {
+        this.children.push(kid);
+        this.textContent += kid.textContent || "";
+      }
+    }
+  }
+  querySelector(): null {
+    return null;
+  }
+}
+
+// Installs the fake DOM on globalThis and returns a restore function that undoes
+// the mutation, so a test can register `t.after(restore)` and never leak
+// `globalThis.document` into later tests (which would be racy if node:test ran
+// files/tests concurrently). Captures the prior descriptor so the original
+// value — including `undefined` — is faithfully restored.
+function installFakeDom(): () => void {
+  const doc = {
+    createElement: (tag: string) => new FakeElement(tag),
+    getElementById: () => null,
+  };
+  const prior = Reflect.getOwnPropertyDescriptor(globalThis, "document");
+  // Reflect.set writes through the untyped host boundary (globalThis.document is
+  // typed Document under the DOM lib; our fake only implements what the renderer
+  // touches) without an `as` cast (banned repo-wide).
+  Reflect.set(globalThis, "document", doc);
+  return () => {
+    if (prior) {
+      Reflect.defineProperty(globalThis, "document", prior);
+    } else {
+      Reflect.deleteProperty(globalThis, "document");
+    }
+  };
+}
+
+test("#291: RENDERERS is a real importable registry keyed exactly by PAGE_NODE_TYPES", () => {
+  // The drift lock is enforced at compile time by `RENDERERS satisfies
+  // Record<PageNodeType, Renderer>` in the source; this asserts the same at
+  // runtime via a real import (no string-scraping of the served module). If the
+  // schema gains a page-node type without a renderer here (or vice-versa) this
+  // fails loudly — the App would otherwise render an accepted node as a blank div.
+  assert.deepEqual(
+    Object.keys(RENDERERS).sort(),
+    [...PAGE_NODE_TYPES].sort(),
+    "RENDERERS keys must equal the shared PAGE_NODE_TYPES registry",
+  );
+  for (const [type, renderer] of Object.entries(RENDERERS)) {
+    assert.equal(typeof renderer, "function", `renderer for "${type}" must be a function`);
+  }
+});
+
+test("#291: renderText renders the heading/sub/body variant with the right tag + class", (t) => {
+  t.after(installFakeDom());
+  const heading = renderText({ type: "text", props: { variant: "heading", text: "Hello" } });
+  assert.equal(heading.tagName, "H1");
+  assert.equal(heading.className, "pc-heading");
+  assert.equal(heading.textContent, "Hello");
+
+  const sub = renderText({ type: "text", props: { variant: "sub", text: "Subtitle" } });
+  assert.equal(sub.tagName, "P");
+  assert.equal(sub.className, "pc-sub");
+
+  const body = renderText({ type: "text", props: { text: "Body copy" } });
+  assert.equal(body.tagName, "P");
+  assert.equal(body.className, "pc-body");
+  assert.equal(body.textContent, "Body copy");
+});
+
+test("#291: renderText degrades to empty text (never throws) on a missing text prop", (t) => {
+  t.after(installFakeDom());
+  const node = renderText({ type: "text", props: {} });
+  assert.equal(node.tagName, "P");
+  assert.equal(node.textContent, "");
+});

package/src/runtime/core/modules/pages.test.ts

@@ -1,5 +1,9 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
 import type { EngineClient, HttpRequest, HttpResponse } from "../host.ts";
 import { makeRouter } from "../router.ts";
 import { createPagesRoutes, type PagesDataSource, type PagesDeps } from "./pages.ts";
@@ -500,7 +504,7 @@ test("renderer binds a route param: parseRoute splits page/param, filters + text
   assert.match(js, /const slash = raw\.indexOf\("\/"\)/);
   assert.match(js, /const paramRaw = slash >= 0 \? raw\.slice\(slash \+ 1\) : ""/);
   assert.match(js, /param = paramRaw \? decodeURIComponent\(paramRaw\) : ""/);
-  assert.match(js, /let PARAM = parseRoute\(\)\.param/);
+  assert.match(js, /PARAM = parseRoute\(\)\.param/);
   // renderPage refreshes PARAM from the current route on every (re)render.
   assert.match(js, /const route = parseRoute\(\);\s*CURRENT = route\.page;\s*PARAM = route\.param;/s);
   // A datasource filter with { eqParam: true } binds its value to the live PARAM,
@@ -584,7 +588,7 @@ test("renderer exposes an embed-gated host-navigation bridge", async () => {
   // data can't smuggle a path. The same-origin gate reads parent.location.origin
   // in a try/catch (a cross-origin parent throws under the same-origin policy).
   assert.match(js, /window\.parent\.location\.origin === window\.location\.origin/);
-  assert.match(js, /const NANO_EMBEDDED =/);
+  assert.match(js, /NANO_EMBEDDED = computeEmbedded\(\)/);
   assert.match(js, /function hostNavigate\(target, params\)/);
   assert.match(js, /if \(!NANO_EMBEDDED\) return false;/);
   assert.match(
@@ -592,7 +596,7 @@ test("renderer exposes an embed-gated host-navigation bridge", async () => {
     /window\.parent\.postMessage\(\s*\{\s*type:\s*"nano-navigate",\s*target:\s*target,\s*params:\s*params\s*\}\s*,\s*window\.location\.origin\s*\)/,
   );
   // The theme bridge reuses the same embed flag (no second window.parent probe).
-  assert.match(js, /if \(NANO_EMBEDDED\) \{/);
+  assert.match(js, /function installThemeBridge\(\)\s*\{\s*if \(!NANO_EMBEDDED\) return;/);
 });
 
 test("the renderer honours numeric actionForm fields", async () => {
@@ -690,7 +694,7 @@ test("renderer makes collapsible nodes persist their state across sessions", asy
   assert.match(js, /localStorage\.setItem\(key, val \? "1" : "0"\)/);
   assert.match(js, /catch \(e\) \{\s*return dflt;/);
   // And the wrapper is actually applied at the dispatch layer.
-  assert.match(js, /makeCollapsible\(n, \(RENDERERS\[n\.type\]/);
+  assert.match(js, /makeCollapsible\(n, \(\/\*\* @type \{Record<string, Renderer>\} \*\/ \(RENDERERS\)\[n\.type\]/);
   // Non-card renderer output (e.g. text -> <p>) is nested whole inside a fresh
   // <section class="pc-card"> rather than having a <button>/<div> injected into
   // it — so the feature is valid markup across every node type, not just cards.
@@ -997,9 +1001,8 @@ test("the prose renderer ships a safe, dependency-free markdown → DOM converte
   // Underscore emphasis is word-boundary guarded so snake_case identifiers survive.
   assert.match(js, /function mdIsWordChar\(c\)/);
   assert.match(js, /!mdIsWordChar\(s\[i - 1\]\)/);
-  // The code backtick is built from a char code so this source stays inside the
-  // String.raw template literal.
-  assert.match(js, /const MD_BACKTICK = String\.fromCharCode\(96\)/);
+  // The markdown code backtick is a literal in the standalone runtime source.
+  assert.match(js, /const MD_BACKTICK = "`"/);
 });
 
 test("the shell styles the prose/markdown list at a comfortable reading measure (#274)", async () => {
@@ -1471,3 +1474,66 @@ test("shell CSS carries the .pc-pipe* track chrome reusing --nano-* tokens", asy
   assert.match(html, /\.pc-pipe-skip \{[^}]*border-style:dashed/);
   assert.match(html, /\.pc-pipe-upcoming \{[^}]*var\(--nano-text-faint\)/);
 });
+
+// NOTE (#291): the RENDERERS ↔ PAGE_NODE_TYPES drift guard no longer string-scrapes
+// the served module. RENDERERS is now compile-time locked (`satisfies
+// Record<PageNodeType, Renderer>`) in the real source, and verified at runtime by a
+// direct-import test in ../../browser/runtime.browser.test.ts — no regex needed.
+
+function hasStderr(err: unknown): err is { stderr: unknown } {
+  return typeof err === "object" && err !== null && "stderr" in err;
+}
+
+// Run `node --check` on a source string by writing it to a temp `.mjs` module and
+// invoking a child `node` process. Returns the check outcome: `ok` on exit 0, or the
+// captured stderr diagnostic when node rejects the module's syntax. This is the whole
+// CI guard — a stray brace / bad token in the served runtime becomes a failing test
+// here instead of a blank page in a browser that loads `/app/runtime.js`.
+function nodeCheck(source: string): { ok: boolean; stderr: string } {
+  const dir = mkdtempSync(join(tmpdir(), "urban-runtime-check-"));
+  const file = join(dir, "runtime.mjs");
+  try {
+    writeFileSync(file, source, "utf8");
+    // Spawn the real `node` binary explicitly. `process.execPath` points at the host
+    // runtime — which under `deno test` is the `deno` binary, whose `--check` runs the
+    // module instead of syntax-only parsing (blowing up on `document`). This guard is
+    // specifically `node --check`, so it must invoke `node` under every test runner.
+    execFileSync("node", ["--check", file], { stdio: "pipe" });
+    return { ok: true, stderr: "" };
+  } catch (err) {
+    const stderr = hasStderr(err) ? String(err.stderr ?? "") : String(err);
+    return { ok: false, stderr };
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+test("the served runtime module passes `node --check` (no syntax errors)", async () => {
+  // The browser runtime is authored as a ~99 KB `String.raw` blob (RENDERER_JS) that
+  // is never type-checked, linted, or otherwise parsed at build time — a stray brace or
+  // bad token surfaces only when a browser loads `/app/runtime.js` and the module fails
+  // to evaluate, silently breaking every page action. This guard serves the module
+  // exactly as production does and runs `node --check` on it, so a syntax error fails CI
+  // instead of the browser. Interim step toward #291 (the full architectural fix).
+  const res = await dispatch("GET", "/app/runtime.js");
+  const source = res.body ?? "";
+  assert.ok(source.length > 0, "the runtime module must be served with a body");
+  const result = nodeCheck(source);
+  assert.ok(
+    result.ok,
+    `served runtime module has a syntax error (node --check):\n${result.stderr}`,
+  );
+});
+
+test("the syntax guard is red/green: an injected syntax error fails `node --check`", async () => {
+  // Prove the guard actually bites — a guard that can't fail is worthless. We take the
+  // real served module and splice in a deliberate syntax error (an unterminated function
+  // declaration), then assert `node --check` rejects it. This pins the guard against a
+  // future refactor that accidentally makes nodeCheck always pass (e.g. swallowing the
+  // child's non-zero exit), which would let a broken RENDERER_JS sail through CI.
+  const res = await dispatch("GET", "/app/runtime.js");
+  const broken = `${res.body ?? ""}\nfunction pcInjectedSyntaxError( {\n`;
+  const result = nodeCheck(broken);
+  assert.equal(result.ok, false, "an injected syntax error must fail `node --check`");
+  assert.match(result.stderr, /SyntaxError/);
+});