import { test, expect, renderComponent, mountHtml, callRoute } from "../src/index.ts";

const COUNTER = `component Counter {
  props {
    start = 0
    label = "Count"
  }
  state count = start
  view { <button @click="count++">{label}: {count}</button> }
}`;

test("renderComponent compiles + renders a component with props", async () => {
  const html = await renderComponent(COUNTER, { start: 7, label: "Hits" });
  expect(html).toContain("Hits");
  expect(html).toContain('data-text="count"'); // reactive state span
  expect(html).toContain("7"); // baked initial value
});

test("mountHtml hydrates the reactive runtime for DOM assertions", () => {
  const dom = mountHtml(
    `<div data-scope="items: [{t:'a'},{t:'b'}]"><ul><li data-for="i in items" data-text="i.t"></li></ul></div>`,
  );
  expect(dom.querySelectorAll("li").map((li) => li.textContent)).toEqual(["a", "b"]);
});

test("callRoute invokes an API handler with a Context", async () => {
  const handler = (ctx: import("@wrnexus/core").Context) =>
    Response.json({ ok: true, path: ctx.url.pathname, method: ctx.req.method });
  const res = await callRoute(handler, new Request("http://x/api/ping", { method: "POST" }));
  expect(res.status).toBe(200);
  expect(await res.json()).toEqual({ ok: true, path: "/api/ping", method: "POST" });
});
