import { afterEach, describe, expect, it } from "vitest"; import { buildHtmlSrcdoc } from "$lib/utils/previewSrcdoc"; type PreviewMessage = { type: string; channel: string; detail?: { href?: string; message?: string }; }; let iframes: HTMLIFrameElement[] = []; afterEach(() => { for (const iframe of iframes) iframe.remove(); iframes = []; }); /** Wait for the next postMessage on the given preview channel */ function nextMessage(channel: string, timeoutMs = 5000): Promise { return new Promise((resolve, reject) => { const timer = setTimeout(() => { window.removeEventListener("message", onMsg); reject(new Error("timed out waiting for preview message")); }, timeoutMs); function onMsg(ev: MessageEvent) { const data = ev.data as Partial | null; if (!data || typeof data !== "object" || data.channel !== channel) return; clearTimeout(timer); window.removeEventListener("message", onMsg); resolve(data as PreviewMessage); } window.addEventListener("message", onMsg); }); } /** * Render body content in a sandboxed preview iframe, exactly like the artifact * panel does. The sandbox has an opaque origin, so tests cannot reach into the * document; the body must drive itself (e.g. click its own links on load). */ function renderPreview(body: string, channel: string): HTMLIFrameElement { const iframe = document.createElement("iframe"); iframe.sandbox.add("allow-scripts"); iframe.srcdoc = buildHtmlSrcdoc( `${body}`, channel ); document.body.appendChild(iframe); iframes.push(iframe); return iframe; } describe("preview hook script", () => { it("forwards http(s) link clicks to the parent, including clicks on nested elements", async () => { const channel = "test_links"; const message = nextMessage(channel); renderPreview( `View model `, channel ); expect(await message).toEqual({ type: "chatui.preview.openLink", channel, detail: { href: "https://huggingface.co/models" }, }); }); it("does not forward javascript:, relative, or in-page fragment links", async () => { const channel = "test_blocked"; const message = nextMessage(channel); // None of the blocked clicks may produce a message, so the sentinel link // clicked last must be the first message observed. Relative hrefs would // resolve against the app's own origin (srcdoc inherits the parent base // URL) and must stay blocked. renderPreview( `js relative relative 2 protocol-relative frag

ok `, channel ); expect((await message).detail?.href).toBe("http://example.com/after"); }); it("still forwards uncaught errors", async () => { const channel = "test_errors"; const message = nextMessage(channel); renderPreview( ``, channel ); const received = await message; expect(received.type).toBe("chatui.preview.error"); expect(received.detail?.message).toContain("boom"); }); });