test(dev-server): guard nested component slot rendering

2026-08-09 13:18:32 +05:30
parent a1f671ed5d
commit 3e77a621f5
1 changed files with 47 additions and 0 deletions
@@ -0,0 +1,47 @@
+import { afterEach, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { basename, join } from "node:path";
+import { tmpdir } from "node:os";
+import { buildRouter } from "@wrnexus/router";
+import { createHandlers, type RuntimeDeps } from "../src/runtime.ts";
+
+const roots: string[] = [];
+afterEach(() => roots.splice(0).forEach((root) => rmSync(root, { recursive: true, force: true })));
+
+test("a component nested in another component's slot keeps its boundary", async () => {
+  const root = mkdtempSync(join(tmpdir(), "wrnexus-component-slot-"));
+  roots.push(root);
+  const app = join(root, "app");
+  mkdirSync(join(app, "pages"), { recursive: true });
+  mkdirSync(join(app, "components"), { recursive: true });
+  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");
+  writeFileSync(join(app, "components/Card.wrn"), "component Card { view { <slot /> } }\n");
+  writeFileSync(join(app, "components/Badge.wrn"), "component Badge { view { <b></b> } }\n");
+
+  const handlers = createHandlers({
+    mode: "development",
+    hmr: false,
+    router: buildRouter(app),
+    loadModule: async (file) => {
+      if (basename(file) === "Card.wrn") {
+        return { render: () => '<article class="card"><slot /></article>' };
+      }
+      if (basename(file) === "Badge.wrn") {
+        return { render: (props: Record<string, string>) => `<b class="badge">${props.label}</b>` };
+      }
+      return {
+        default: () => '<div data-component="Card"><div data-component="Badge" label="x"></div></div>',
+      };
+    },
+    getMiddleware: async () => [],
+    assets: { serve: async () => null },
+  } satisfies RuntimeDeps);
+
+  const response = await handlers.fetch(new Request("https://example.test/"), {
+    upgrade: () => false,
+  });
+  const html = await response!.text();
+  expect(html).toContain('<article class="card">');
+  expect(html).toContain('<b class="badge">x</b>');
+  expect(html).not.toContain('data-component="Badge"');
+});