72 lines
4.4 KiB
TypeScript
72 lines
4.4 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
import { mockAgentApi } from "./support/mock-agent-api";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
|
|
for (const width of [1440, 375, 320]) {
|
|
test(`short structured replies stay inline at ${width}px`, async ({ page }) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await mockWorkbenchContext(page, undefined, undefined, {}, [], { runtimeMode: "backend" });
|
|
const title = "管道定位结果";
|
|
await mockAgentApi(page, { sessions: [{ session_id: "short-answer", title, created_at: Date.now(), updated_at: Date.now() }] });
|
|
const content = "已将管道 **533793、486121、523616** 定位到地图视图。但当前可用操作未提供独立的管道高亮功能，所以不能确认它们已高亮。";
|
|
const warning = "已将三根管道定位到地图视图。当前可用工具未提供独立的管道高亮操作，因此不能确认已高亮。";
|
|
const block = {
|
|
version: "answer-ui@1", block_id: "location-note", fallback_text: warning,
|
|
spec: { root: "note", elements: { note: { type: "Text", props: { tone: "warning", text: warning }, children: [] } } },
|
|
};
|
|
await page.route("**/api/v1/session/short-answer?**", (route) => route.fulfill({
|
|
headers: { "Access-Control-Allow-Origin": "*" },
|
|
json: {
|
|
session_id: "short-answer", title, purpose: "ordinary_chat", status: "active", is_streaming: false,
|
|
messages: [{ id: "short-reply", role: "assistant", parts: [
|
|
{ type: "text", text: content }, { type: "data-answer_ui", data: block },
|
|
{ type: "data-final_answer", data: { content, ui_block_ids: ["location-note"] } },
|
|
] }],
|
|
},
|
|
}));
|
|
await page.route("**/api/v1/session/short-answer/ui-state**", (route) => route.fulfill({
|
|
headers: { "Access-Control-Allow-Origin": "*" },
|
|
json: {
|
|
version: "answer-view-state@1", message_id: "short-reply", block_id: "location-note",
|
|
revision: 0, schema_digest: "short-note-fixture", nodes: {},
|
|
block: { evidenceFilter: "all" }, updated_at: null,
|
|
},
|
|
}));
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: width < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
await panel.getByRole("button", { name: /历史/ }).click();
|
|
await page.locator("button.agent-history-session-trigger").filter({ hasText: title }).click();
|
|
const message = panel.locator('[data-agent-message-id="short-reply"]');
|
|
const note = message.getByRole("note");
|
|
await expect(note).toHaveText(`注意事项${warning}`);
|
|
await expect(message.locator('[data-answer-state="saved"]')).toBeVisible();
|
|
await page.evaluate(() => document.fonts.ready);
|
|
const geometry = await message.evaluate((element) => {
|
|
const paragraph = element.querySelector(".agent-streaming-response")!;
|
|
const header = element.querySelector(".agent-chat-message-header")!;
|
|
const note = element.querySelector('[role="note"]')!;
|
|
const description = note.querySelector('[data-slot="alert-description"]')!;
|
|
return {
|
|
headerToBody: header ? paragraph.getBoundingClientRect().top - header.getBoundingClientRect().bottom : 0,
|
|
bodyToNote: note.getBoundingClientRect().top - paragraph.getBoundingClientRect().bottom,
|
|
noteHeight: note.getBoundingClientRect().height,
|
|
noteBackground: getComputedStyle(note).backgroundColor,
|
|
bodyFont: getComputedStyle(paragraph).fontSize,
|
|
descriptionFont: getComputedStyle(description).fontSize,
|
|
overflows: element.scrollWidth > element.clientWidth,
|
|
};
|
|
});
|
|
console.log(JSON.stringify({ width, ...geometry }));
|
|
await message.screenshot({ path: `/tmp/agent-short-answer-${width}.png` });
|
|
await expect(message.getByRole("button", { name: "展开查看", exact: true })).toHaveCount(0);
|
|
expect(geometry.headerToBody).toBeLessThanOrEqual(16);
|
|
expect(geometry.bodyToNote).toBeGreaterThanOrEqual(19);
|
|
expect(geometry.bodyToNote).toBeLessThanOrEqual(21);
|
|
expect(geometry.noteBackground).toBe("rgb(255, 255, 255)");
|
|
expect(geometry.overflows).toBe(false);
|
|
await expect(message.getByText("533793、486121、523616", { exact: true })).toBeVisible();
|
|
});
|
|
}
|