43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import { test, expect } from "bun:test";
|
|
import { readFileSync } from "node:fs";
|
|
import { renderComponent, mountHtml } from "../../test/src/index.ts";
|
|
const source = readFileSync(new URL("../components/FlowCanvas.wrn", import.meta.url), "utf8");
|
|
test("canvas renders branch edges, saved positions and escaped node labels", async () => {
|
|
const nodes = [
|
|
{
|
|
id: "branch",
|
|
label: "<script>Condition</script>",
|
|
x: 40,
|
|
y: 60,
|
|
ports: [{ key: "yes", label: "Match", target: "end" }],
|
|
},
|
|
{ id: "end", label: "Finish", x: 340, y: 100, ports: [] },
|
|
];
|
|
const html = await renderComponent(source, { nodes });
|
|
const dom = mountHtml(html);
|
|
const root = dom.querySelector('[data-ui-component="FlowCanvas"]') as HTMLElement;
|
|
expect(root.querySelectorAll("path")).toHaveLength(1);
|
|
expect(root.querySelector("path")?.getAttribute("d")).toBe("M 270 122 C 340 122 270 125 340 125");
|
|
expect(root.querySelector(".wrn-flow-node")?.getAttribute("style")).toContain("left: 40px");
|
|
expect(root.querySelector(".wrn-flow-node-title")?.textContent).toContain(
|
|
"<script>Condition</script>",
|
|
);
|
|
expect(root.querySelector("script")).toBeNull();
|
|
expect(nodes[0].x).toBe(40);
|
|
const seen: any[] = [];
|
|
for (const name of ["connect", "select", "move"])
|
|
root.addEventListener(name, (e: any) => seen.push({ name, detail: e.detail }));
|
|
(root.querySelector(".wrn-flow-port") as HTMLButtonElement).click();
|
|
(root.querySelectorAll(".wrn-flow-node-title")[1] as HTMLButtonElement).click();
|
|
expect(seen.map((e) => e.name)).toEqual(["connect", "select"]);
|
|
const title = root.querySelectorAll(".wrn-flow-node-title")[1] as HTMLButtonElement;
|
|
title.dispatchEvent(
|
|
new (dom.window as { KeyboardEvent: typeof KeyboardEvent }).KeyboardEvent("keydown", {
|
|
key: "ArrowRight",
|
|
bubbles: true,
|
|
}),
|
|
);
|
|
expect(seen.at(-1).name).toBe("move");
|
|
expect(seen.at(-1).detail.nodes).toHaveLength(2);
|
|
});
|