WRNexusJS/packages/dev-server/test/structured-component-props.test.ts

import { expect, test } from "bun:test";
import { createProductionHandlers } from "../src/prod.ts";

test("component resolution preserves JSON user/permission props and drops unresolved bindings", async () => {
  let received: Record<string, string> = {};
  const handlers = createProductionHandlers(
    {
      pages: [
        {
          raw: "/",
          mod: {
            default: () =>
              '<div data-component="account-shell" identity="{&quot;displayName&quot;:&quot;Alice&quot;}" permissions="{&quot;read&quot;:true,&quot;update&quot;:false}" preferences="{&quot;theme&quot;:&quot;dark&quot;}" pending="{account.pending}"><p>Account content</p></div>',
          },
        },
      ],
      api: [],
      realtime: [],
      middleware: [],
      layouts: [],
      components: [
        {
          name: "AccountShell",
          mod: {
            render: (props: Record<string, string>) => {
              received = props;
              const identity = JSON.parse(props.identity ?? "{}");
              const permissions = JSON.parse(props.permissions ?? "{}");
              return permissions.read
                ? "<main>" + identity.displayName + "<slot /></main>"
                : "<main>Denied</main>";
            },
          },
        },
      ],
    },
    {},
  );
  const response = await handlers.fetch(new Request("http://localhost/"), { upgrade: () => false });
  expect(response?.status).toBe(200);
  const html = await response!.text();
  expect(html).toContain("Alice");
  expect(html).toContain("Account content");
  expect(JSON.parse(received.permissions!)).toEqual({ read: true, update: false });
  expect(JSON.parse(received.preferences!)).toEqual({ theme: "dark" });
  expect(received.pending).toBeUndefined();
});