import { expect, test } from "@playwright/test"; import { mockLangGraphAPI } from "./utils/mock-api"; const ARTIFACT_PATH = "/artifact-fixtures/report.html"; const MARKDOWN_ARTIFACT_PATH = "/artifact-fixtures/report.md"; const JSON_ARTIFACT_PATH = "/artifact-fixtures/report.json"; const IN_PROGRESS_THREAD_ID = "00000000-0000-0000-0000-000000003119"; const COMPLETE_THREAD_ID = "00000000-0000-0000-0000-000000003120"; const MARKDOWN_THREAD_ID = "00000000-0000-0000-0000-000000003121"; const JSON_THREAD_ID = "00000000-0000-0000-0000-000000003122"; function writeFileMessages({ path = ARTIFACT_PATH, content = "

Report draft

测试内容

", toolResult, }: { path?: string; content?: string; toolResult?: string; } = {}) { const messages: unknown[] = [ { type: "human", id: "msg-human-artifact", content: [{ type: "text", text: "Create a report artifact" }], }, { type: "ai", id: "msg-ai-write-artifact", content: "", tool_calls: [ { id: "write-file-artifact", name: "write_file", args: { description: "Writing report artifact", path, content, }, }, ], }, ]; if (toolResult !== undefined) { messages.push({ type: "tool", id: "msg-tool-write-artifact", name: "write_file", tool_call_id: "write-file-artifact", content: toolResult, }); } return messages; } test.describe("Artifact preview stability", () => { test("renders preview iframe for an in-progress write artifact", async ({ page, }) => { mockLangGraphAPI(page, { threads: [ { thread_id: IN_PROGRESS_THREAD_ID, title: "Artifact preview in progress", messages: writeFileMessages(), }, ], }); await page.goto(`/workspace/chats/${IN_PROGRESS_THREAD_ID}`); await expect(page.getByText(ARTIFACT_PATH)).toBeVisible({ timeout: 15_000, }); await page.getByText(ARTIFACT_PATH).click(); const artifactsPanel = page.locator("#artifacts"); await expect(artifactsPanel.getByText("report.html")).toBeVisible(); await expect( artifactsPanel.locator('iframe[title="Artifact preview"]'), ).toBeVisible(); }); test("renders preview iframe after the write artifact succeeds", async ({ page, }) => { mockLangGraphAPI(page, { threads: [ { thread_id: COMPLETE_THREAD_ID, title: "Artifact preview complete", messages: writeFileMessages({ toolResult: "OK" }), }, ], }); await page.goto(`/workspace/chats/${COMPLETE_THREAD_ID}`); await expect(page.getByText(ARTIFACT_PATH)).toBeVisible({ timeout: 15_000, }); await page.getByText(ARTIFACT_PATH).click(); const artifactsPanel = page.locator("#artifacts"); await expect(artifactsPanel.getByText("report.html")).toBeVisible(); await expect( artifactsPanel.locator('iframe[title="Artifact preview"]'), ).toBeVisible(); }); test("renders markdown preview for an in-progress write artifact", async ({ page, }) => { mockLangGraphAPI(page, { threads: [ { thread_id: MARKDOWN_THREAD_ID, title: "Markdown artifact preview in progress", messages: writeFileMessages({ path: MARKDOWN_ARTIFACT_PATH, content: "# Markdown draft\n\n- 测试内容 1\n- English term", }), }, ], }); await page.goto(`/workspace/chats/${MARKDOWN_THREAD_ID}`); await expect(page.getByText(MARKDOWN_ARTIFACT_PATH)).toBeVisible({ timeout: 15_000, }); await page.getByText(MARKDOWN_ARTIFACT_PATH).click(); const artifactsPanel = page.locator("#artifacts"); await expect(artifactsPanel.getByText("report.md")).toBeVisible(); await expect(artifactsPanel.getByText("Markdown draft")).toBeVisible(); await expect(artifactsPanel.getByText("测试内容 1")).toBeVisible(); }); test("renders code view for an in-progress non-preview write artifact", async ({ page, }) => { mockLangGraphAPI(page, { threads: [ { thread_id: JSON_THREAD_ID, title: "JSON artifact code view in progress", messages: writeFileMessages({ path: JSON_ARTIFACT_PATH, content: '{\n "status": "draft",\n "中文字段": "测试内容",\n "count": 3\n}', }), }, ], }); await page.goto(`/workspace/chats/${JSON_THREAD_ID}`); await expect(page.getByText(JSON_ARTIFACT_PATH)).toBeVisible({ timeout: 15_000, }); await page.getByText(JSON_ARTIFACT_PATH).click(); const artifactsPanel = page.locator("#artifacts"); await expect(artifactsPanel.getByText("report.json")).toBeVisible(); await expect(artifactsPanel.getByText('"status": "draft"')).toBeVisible(); await expect( artifactsPanel.getByText('"中文字段": "测试内容"'), ).toBeVisible(); }); });