import { test, expect } from "bun:test";
import { readFileSync } from "node:fs";
import { renderComponent, mountHtml } from "../../test/src/index.ts";
test("Drawflow canvas preserves graph data and forwards editor outputs", async () => {
  const source = readFileSync(new URL("../components/DrawflowCanvas.wrn", import.meta.url), "utf8");
  const nodes = [{ id: "a", label: "<script>unsafe</script>", x: 40, y: 60, ports: [] }];
  const dom = mountHtml(await renderComponent(source, { nodes }));
  const root = dom.querySelector("[data-drawflow-editor]") as HTMLElement;
  expect(JSON.parse(root.dataset.flowNodes!)).toEqual(nodes);
  expect(root.querySelector("script")).toBeNull();
  let detail: any;
  root.addEventListener("select", (e: any) => (detail = e.detail));
  root.dispatchEvent(
    new (dom.window as { CustomEvent: typeof CustomEvent }).CustomEvent("flowselect", {
      detail: { id: "a" },
      bubbles: true,
    }),
  );
  expect(detail.id).toBe("a");
});