test: cover client-created component branches

packages/dev-server/test/component-composition-runtime.test.ts

@@ -48,6 +48,48 @@ test("a component nested in another component's slot keeps its boundary", async
   expect(html).not.toContain('data-component="Badge"');
 });
 
+test("a component in an initially hidden client branch is server-prepared for instantiation", async () => {
+  const root = mkdtempSync(join(tmpdir(), "wrnexus-component-branch-"));
+  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/Input.wrn"), "component Input { view { <input /> } }\n");
+  const definition = Buffer.from(
+    JSON.stringify([{ cond: "open", body: '<div data-component="Input" value="ready"></div>' }]),
+    "utf8",
+  ).toString("base64");
+
+  const handlers = createHandlers({
+    mode: "development",
+    hmr: false,
+    router: buildRouter(app),
+    loadModule: async (file) =>
+      basename(file) === "Input.wrn"
+        ? {
+            render: (props: Record<string, string>) =>
+              `<label><input value="${props.value}"></label>`,
+          }
+        : {
+            default: () =>
+              `<template data-wrn-if="${definition}"></template><template data-wrn-control-end></template>`,
+          },
+    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();
+  const encoded = /data-wrn-if="([A-Za-z0-9+/=]+)"/.exec(html)?.[1];
+  expect(encoded).toBeTruthy();
+  const branches = JSON.parse(Buffer.from(encoded!, "base64").toString("utf8"));
+  expect(branches[0].body).toContain('<input value="ready">');
+  expect(branches[0].body).not.toContain("data-component=");
+});
+
 test("translated text is present in the raw server response", async () => {
   const root = mkdtempSync(join(tmpdir(), "wrnexus-ssr-i18n-"));
   roots.push(root);