73 lines
5.3 KiB
TypeScript
73 lines
5.3 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
import { mockAgentApi } from "./support/mock-agent-api";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
import { responsesFixture } from "./support/responses-fixture";
|
|
|
|
const title = "空间候选管段（距离近，非故障定位）";
|
|
const ids = ["19025", "19026", "19022", "19027"];
|
|
const distances = [283.85, 283.86, 291.45, 292.44];
|
|
|
|
for (const width of [1440, 375]) for (const kind of ["Table", "Chart"] as const) {
|
|
test(`${kind} data stays display-only inline and expanded at ${width}px`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width, height: 1000 });
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await mockWorkbenchContext(page, undefined, undefined, {}, [], { runtimeMode: "backend" });
|
|
await mockAgentApi(page);
|
|
const block = { version: "answer-ui@1", block_id: "selection-style", fallback_text: "演练候选管段", spec: {
|
|
root: "data", elements: { data: { type: kind, children: [], props: kind === "Table"
|
|
? { title, columns: ["管段", "距离（米）"], rows: ids.map((id, index) => [id, String(distances[index])]) }
|
|
: { title, chart_type: "line", x_data: ids, series: [{ name: "距离（米）", data: distances }], source: "浏览器演练" } } }
|
|
} };
|
|
await page.route("**/api/v1/responses", async (route) => {
|
|
if (route.request().method() === "OPTIONS") return route.fallback();
|
|
await route.fulfill({ headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/event-stream" }, body: responsesFixture([
|
|
{ type: "start", messageId: "selection-answer" },
|
|
{ type: "data-answer_ui", id: block.block_id, data: block },
|
|
{ type: "data-final_answer", data: { content: "以下为浏览器演练资料。", ui_block_ids: [block.block_id] } },
|
|
{ type: "finish", finishReason: "stop" },
|
|
]) });
|
|
});
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: width < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
await panel.locator(".agent-panel-prompt-textarea").fill("查看演练候选管段");
|
|
await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
|
|
let ui = panel.locator('[data-answer-ui="selection-style"]');
|
|
await expect(ui).toBeVisible();
|
|
if (kind === "Chart") await ui.getByRole("tab", { name: "数据", exact: true }).click();
|
|
await expect(ui.getByRole("table")).toContainText("19025");
|
|
await expect(ui.getByRole("table")).toContainText("283.85");
|
|
await expect(ui.getByRole("columnheader")).toHaveCount(2);
|
|
await expect(ui.getByRole("checkbox")).toHaveCount(0);
|
|
await expect(ui.getByRole("button", { name: /加入分析|针对.*提问|取消选行/ })).toHaveCount(0);
|
|
await expect(ui.getByRole("region", { name: "分析内容篮" })).toHaveCount(0);
|
|
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
|
await page.evaluate(() => document.fonts.ready);
|
|
await ui.locator("table").screenshot({ path: testInfo.outputPath("inline-display.png") });
|
|
const sort = ui.getByRole("button", { name: "按距离（米）排序", exact: true });
|
|
await sort.click();
|
|
await sort.click();
|
|
await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "descending");
|
|
await expect(ui.locator("tbody tr").first()).toContainText("19027");
|
|
await ui.getByRole("textbox", { name: `搜索${title}` }).fill("19025");
|
|
await expect(ui.locator("tbody tr")).toHaveCount(1);
|
|
await panel.getByRole("button", { name: "展开查看", exact: true }).click();
|
|
const workspace = page.getByRole("region", { name: "展开报告工作区", exact: true });
|
|
ui = workspace.locator('[data-answer-ui="selection-style"]');
|
|
await expect(ui.getByRole("textbox", { name: `搜索${title}` })).toHaveValue("19025");
|
|
await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "descending");
|
|
await expect(ui.getByRole("checkbox")).toHaveCount(0);
|
|
await expect(ui.locator('tbody tr[data-state="selected"]')).toHaveCount(0);
|
|
await expect(ui.getByRole("button", { name: /加入分析|针对.*提问|取消选行/ })).toHaveCount(0);
|
|
await ui.getByRole("textbox", { name: `搜索${title}` }).fill("");
|
|
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
|
await ui.locator("[data-interactive-table]").screenshot({ path: testInfo.outputPath("expanded-display.png") });
|
|
await ui.getByRole("button", { name: "按距离（米）排序", exact: true }).focus();
|
|
await page.keyboard.press("Enter");
|
|
await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "none");
|
|
await ui.getByRole("textbox", { name: `搜索${title}` }).fill("没有匹配的管段");
|
|
await expect(ui.getByRole("cell", { name: "当前筛选没有匹配的数据。" })).toHaveAttribute("colspan", "2");
|
|
await expect(ui.getByRole("checkbox")).toHaveCount(0);
|
|
});
|
|
}
|