529 lines
37 KiB
TypeScript
529 lines
37 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
||
import { investigationFixture, mockInvestigationPresentation, selectInvestigation } from "./support/mock-investigation-presentation";
|
||
|
||
test("live investigation charts remain visible while Dev is open", async ({ page }) => {
|
||
const task = investigationFixture(1, "合成爆管展示核查");
|
||
const mock = await mockInvestigationPresentation(page, [task]);
|
||
await selectInvestigation(page, task.title);
|
||
await expect(page.getByLabel("调查实时展示", { exact: true })).toContainText("跟随所选调查");
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
await mock.emit(task, { action: "open_chart", chart_id: "live-pressure", evidence_refs: ["dev:synthetic"],
|
||
chart: { title: "实时合成压力核查", chart_type: "line", x_data: ["08:00", "08:15"], series: [{ name: "压力水头（m）", data: [32, 28] }] } });
|
||
await expect(page.locator('[data-investigation-chart="live-pressure"]')).toBeVisible();
|
||
await expect(page.getByLabel("调查实时展示", { exact: true })).not.toContainText("图表当前不可见");
|
||
await page.getByRole("button", { name: "收起展示", exact: true }).click();
|
||
await mock.emit(task, { action: "open_chart", chart_id: "while-collapsed", evidence_refs: ["dev:synthetic"],
|
||
chart: { title: "收起期间的合成图表", chart_type: "line", x_data: ["08:00"], series: [{ name: "压力水头（m）", data: [32] }] } });
|
||
const activity = page.getByRole("list", { name: "动作识别记录" });
|
||
await expect(activity.locator("li")).toHaveCount(2);
|
||
await expect(activity.locator("li").last()).toContainText("已应用");
|
||
await page.getByRole("button", { name: "展开展示", exact: true }).click();
|
||
await expect(page.locator('[data-investigation-chart="while-collapsed"]')).toBeVisible();
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
|
||
test("Dev validates and previews JSONL locally, rejects invalid actions and clears on task switches", async ({ page }, testInfo) => {
|
||
test.setTimeout(60_000);
|
||
const task = investigationFixture(1, "合成爆管展示核查");
|
||
const other = investigationFixture(2, "另一项合成调查");
|
||
task.latest_report = { revision: 1, execution_generation: 1, source_session_id: "investigation-dev-test", published_at: task.created_at,
|
||
published_by: "fixture", report: { title: "合成调查报告", current_conclusion: "仅供展示核对", conclusion_boundary: "合成样例",
|
||
stage: "interim", outcome: "concluded", stop_reason: null, data_gaps: [], evidence_refs: ["dev:report"], recommendations: [], pending_items: [],
|
||
ui_blocks: [{ evidence_refs: ["dev:report"], block: {
|
||
version: "answer-ui@1", block_id: "saved-table", phase: "final", fallback_text: "报告候选列表", spec: {
|
||
root: "table", elements: { table: { type: "Table", props: {
|
||
title: "已保存的候选列表", columns: ["候选", "依据"], rows: [["DEMO-PIPE-03", "合成资料"]]
|
||
}, children: [] } }
|
||
}
|
||
} }] } };
|
||
const mock = await mockInvestigationPresentation(page, [task, other]);
|
||
await selectInvestigation(page, task.title);
|
||
await expect(page.getByLabel("调查实时展示", { exact: true })).toContainText("跟随所选调查");
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
const dev = page.getByTestId("map-dev-panel");
|
||
const tools = dev.getByTestId("investigation-dev-tools");
|
||
await expect(tools).toContainText("报告图表 0 · 表格 1");
|
||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||
await expect(page.getByRole("button", { name: "关闭通知", exact: true })).toHaveCount(0);
|
||
await testInfo.attach("investigation-dev-default", { body: await page.screenshot({ path: testInfo.outputPath("dev-default.png") }), contentType: "image/png" });
|
||
await tools.getByRole("button", { name: "载入当前报告", exact: true }).click();
|
||
const input = tools.getByLabel("调查展示 JSONL", { exact: true });
|
||
await expect(input).toHaveValue(/ui_block/);
|
||
const reportInput = await input.inputValue();
|
||
await dev.getByRole("tab", { name: "地图调试", exact: true }).click();
|
||
await expect(dev.getByRole("button", { name: "定位并高亮", exact: true })).toBeVisible();
|
||
await expect(input).toBeHidden();
|
||
await dev.getByRole("tab", { name: "调查测试", exact: true }).click();
|
||
await expect(input).toHaveValue(reportInput);
|
||
await expect(dev.getByRole("button", { name: "重置地图调试效果", exact: true })).toBeHidden();
|
||
await expect(tools.getByRole("button", { name: "执行本地预览", exact: true })).toBeEnabled();
|
||
await tools.getByRole("button", { name: "校验 JSONL", exact: true }).click();
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(page.getByLabel("本地预览展示", { exact: true }).getByRole("region", { name: "展示结果" })).toContainText("已保存的候选列表");
|
||
|
||
await tools.getByRole("button", { name: "载入合成样例", exact: true }).click();
|
||
await tools.getByRole("button", { name: "校验 JSONL", exact: true }).click();
|
||
await expect(tools).toContainText("已识别 3 条展示指令、1 个界面块、1 条调查数据");
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(tools).toContainText("本地预览完成");
|
||
await expect(page.locator('[data-investigation-chart="dev-synthetic-pressure"]')).toBeVisible();
|
||
await expect(page.getByLabel("本地预览展示", { exact: true }).getByRole("region", { name: "展示结果" })).toContainText("合成候选对比");
|
||
await expect(tools.getByRole("list", { name: "动作识别记录" })).toContainText("本地测试");
|
||
const sourceSize = (source: string) => page.evaluate(async (source) => {
|
||
const map = window.__waterNetworkMap;
|
||
const data = await (map?.getSource(source) as { getData: () => Promise<{ features: unknown[] }> } | undefined)?.getData();
|
||
return data?.features.length ?? 0;
|
||
}, source);
|
||
await expect.poll(() => sourceSize("preview-presentation-highlights")).toBe(1);
|
||
await expect.poll(() => sourceSize("preview-presentation-overlay")).toBe(1);
|
||
const download = page.waitForEvent("download");
|
||
await tools.getByRole("button", { name: "下载测试 JSONL" }).click();
|
||
expect((await download).suggestedFilename()).toBe("investigation-preview-1.jsonl");
|
||
await testInfo.attach("investigation-dev-desktop", { body: await page.screenshot({ path: testInfo.outputPath("dev-desktop.png") }), contentType: "image/png" });
|
||
|
||
await page.setViewportSize({ width: 1024, height: 640 });
|
||
expect(await dev.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(tools.getByRole("button", { name: "执行本地预览", exact: true })).toBeEnabled();
|
||
await page.locator('[data-investigation-chart="dev-synthetic-pressure"]').getByRole("img").scrollIntoViewIfNeeded();
|
||
const chartViewport = (await page.getByLabel("本地预览展示", { exact: true }).locator("[data-investigation-content]").boundingBox())!;
|
||
const plot = (await page.locator('[data-investigation-chart="dev-synthetic-pressure"]').getByRole("img", { name: "本地合成压力趋势", exact: true }).boundingBox())!;
|
||
expect(plot.y).toBeGreaterThanOrEqual(chartViewport.y - 1);
|
||
expect(plot.y + plot.height).toBeLessThanOrEqual(chartViewport.y + chartViewport.height + 1);
|
||
await testInfo.attach("investigation-dev-compact", { body: await page.screenshot({ path: testInfo.outputPath("dev-compact.png") }), contentType: "image/png" });
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
|
||
await input.fill('{"record_type":"presentation","command":{"action":"execute","command":"arbitrary-command"}}');
|
||
await tools.getByRole("button", { name: "校验 JSONL", exact: true }).click();
|
||
await expect(tools.getByRole("alert")).toContainText("第 1 行展示指令不合法");
|
||
await expect(tools.getByRole("button", { name: "执行本地预览", exact: true })).toBeEnabled();
|
||
await tools.getByRole("button", { name: "清除临时展示", exact: true }).click();
|
||
await expect.poll(() => sourceSize("preview-presentation-highlights")).toBe(0);
|
||
await expect.poll(() => sourceSize("preview-presentation-overlay")).toBe(0);
|
||
await expect(page.locator('[data-investigation-chart]')).toHaveCount(0);
|
||
|
||
await tools.getByRole("button", { name: "载入合成样例", exact: true }).click();
|
||
await tools.getByRole("button", { name: "校验 JSONL", exact: true }).click();
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(tools).toContainText("本地预览完成");
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
await page.getByRole("region", { name: "工况任务", exact: true }).getByText(other.title, { exact: true }).first().click();
|
||
await expect.poll(() => sourceSize("preview-presentation-highlights")).toBe(0);
|
||
await expect.poll(() => sourceSize("preview-presentation-overlay")).toBe(0);
|
||
await expect(page.locator('[data-investigation-chart]')).toHaveCount(0);
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
await expect(tools).toContainText(other.title);
|
||
await expect(tools.getByRole("button", { name: "收起动作测试" })).toBeVisible();
|
||
await expect(tools.getByRole("textbox", { name: "调查展示 JSONL" })).toHaveValue("");
|
||
await page.setViewportSize({ width: 375, height: 720 });
|
||
await expect(page.getByRole("button", { name: "切换地图 Dev Panel" })).toBeHidden();
|
||
await expect(dev).toBeHidden();
|
||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375);
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
|
||
test("JSONL cases switch directly, reset validation and remove the previous local preview", async ({ page }, testInfo) => {
|
||
test.setTimeout(90_000);
|
||
const task = investigationFixture(1, "切换 JSONL 案例的合成调查");
|
||
const mock = await mockInvestigationPresentation(page, [task]);
|
||
await selectInvestigation(page, task.title);
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
const tools = page.getByTestId("investigation-dev-tools");
|
||
const input = tools.getByLabel("调查展示 JSONL", { exact: true });
|
||
const cases = tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true });
|
||
const execute = tools.getByRole("button", { name: "执行本地预览", exact: true });
|
||
const preview = page.getByLabel("本地预览展示", { exact: true }).getByRole("region", { name: "展示结果" });
|
||
async function choose(label: string) {
|
||
await cases.click();
|
||
await page.getByRole("option", { name: label, exact: true }).click();
|
||
await expect(execute).toBeEnabled();
|
||
await expect(input).not.toHaveValue("");
|
||
await expect(tools.getByRole("alert")).toHaveCount(0);
|
||
}
|
||
async function run() {
|
||
await tools.getByRole("button", { name: "校验 JSONL", exact: true }).click();
|
||
await execute.click();
|
||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||
}
|
||
const scene = (source: string) => page.evaluate(async (source) => {
|
||
const data = await (window.__waterNetworkMap?.getSource(source) as {
|
||
getData: () => Promise<{ features: Array<{ geometry: { type: string }; properties: Record<string, unknown> | null }> }>
|
||
} | undefined)?.getData();
|
||
return (data?.features ?? []).map((feature) => ({ type: feature.geometry.type, weight: feature.properties?.weight ?? null }));
|
||
}, source);
|
||
|
||
await choose("压力趋势对比");
|
||
await expect(tools.getByLabel("案例预期结果")).toContainText("两条合成压力曲线");
|
||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||
await testInfo.attach("jsonl-case-picker", { body: await page.screenshot({ path: testInfo.outputPath("jsonl-cases.png") }), contentType: "image/png" });
|
||
await run();
|
||
await expect(page.locator('[data-investigation-chart="dev-case-pressure-line"]')).toBeVisible();
|
||
|
||
// Editing resets validation, but the rendered scene is still removed on the next case switch.
|
||
await input.fill(`${await input.inputValue()}\n`);
|
||
await choose("候选管段对比");
|
||
await expect(page.locator("[data-investigation-chart]")).toHaveCount(0);
|
||
await expect(preview).toHaveCount(0);
|
||
await run();
|
||
await expect(preview).toContainText("合成候选管段对比");
|
||
await expect(tools.getByRole("region", { name: "JSONL 检查结果" })).not.toContainText("合成候选管段对比");
|
||
await tools.getByText("原始数据检查", { exact: true }).click();
|
||
await expect(tools.getByRole("button", { name: "查看第 2 条调查数据" })).toBeVisible();
|
||
|
||
await choose("隔离阀门清单");
|
||
await run();
|
||
await expect(preview).toContainText("合成隔离阀门清单");
|
||
await expect(preview).not.toContainText("合成候选管段对比");
|
||
|
||
await choose("地图定位与高亮");
|
||
await run();
|
||
await expect.poll(() => scene("preview-presentation-highlights")).toHaveLength(1);
|
||
await choose("合成影响范围");
|
||
await expect.poll(() => scene("preview-presentation-highlights")).toEqual([]);
|
||
await expect.poll(() => scene("preview-presentation-overlay")).toEqual([]);
|
||
await run();
|
||
await expect.poll(() => scene("preview-presentation-overlay")).toEqual([{ type: "Polygon", weight: null }]);
|
||
|
||
await choose("投诉热力分布");
|
||
await run();
|
||
await expect.poll(() => scene("preview-presentation-overlay")).toEqual([
|
||
{ type: "Point", weight: 1 }, { type: "Point", weight: 3 }, { type: "Point", weight: 2 }
|
||
]);
|
||
await choose("影响用户统计");
|
||
await run();
|
||
await expect(page.locator('[data-investigation-chart="dev-case-impact-bar"]')).toBeVisible();
|
||
await expect.poll(() => scene("preview-presentation-overlay")).toEqual([]);
|
||
|
||
await choose("纯 JSONL 数据");
|
||
await run();
|
||
await expect(preview).toContainText("DEMO-PIPE-03");
|
||
await expect(page.locator("[data-investigation-chart]")).toHaveCount(0);
|
||
await expect(tools.getByRole("list", { name: "动作识别记录" })).toHaveCount(1);
|
||
|
||
for (const [label, error] of [
|
||
["错误：JSON 语法", "第 2 行不是合法 JSON"],
|
||
["错误：不支持的动作", "第 1 行展示指令不合法"],
|
||
["错误：图表数据不齐", "第 1 行展示指令不合法"]
|
||
]) {
|
||
await choose(label);
|
||
await tools.getByRole("button", { name: "校验 JSONL", exact: true }).click();
|
||
await expect(tools.getByRole("alert")).toContainText(error);
|
||
await expect(execute).toBeEnabled();
|
||
await execute.click();
|
||
await expect(tools.getByRole("alert")).toContainText(error);
|
||
await expect(preview).toHaveCount(0);
|
||
await expect(tools.getByRole("list", { name: "动作识别记录" })).toHaveCount(1);
|
||
}
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
|
||
test("JSONL cases preview tables, charts and map overlays without an investigation or live following", async ({ page }, testInfo) => {
|
||
const mock = await mockInvestigationPresentation(page, []);
|
||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
const tools = page.getByTestId("investigation-dev-tools");
|
||
await expect(tools.getByText("尚未选择调查", { exact: true })).toBeVisible();
|
||
await page.getByRole("checkbox", { name: "跟随所选调查", exact: true }).uncheck();
|
||
const cases = tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true });
|
||
await expect(cases).toBeEnabled();
|
||
await cases.click();
|
||
await expect(page.getByRole("listbox")).toBeVisible();
|
||
await expect(page.getByRole("option")).toHaveCount(12);
|
||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||
await testInfo.attach("case-dropdown-without-task", {
|
||
body: await page.screenshot({ path: testInfo.outputPath("dropdown-without-task.png") }), contentType: "image/png"
|
||
});
|
||
await page.getByRole("option", { name: "候选管段对比", exact: true }).click();
|
||
await expect(cases).toContainText("候选管段对比");
|
||
await expect(tools.getByLabel("调查展示 JSONL", { exact: true })).toHaveValue(/DEMO-PIPE-01/);
|
||
const execute = tools.getByRole("button", { name: "执行本地预览", exact: true });
|
||
await expect(execute).toBeEnabled();
|
||
await execute.click();
|
||
await expect(page.getByLabel("本地预览展示", { exact: true }).getByRole("region", { name: "展示结果" })).toContainText("合成候选管段对比");
|
||
await cases.click();
|
||
await page.getByRole("option", { name: "影响用户统计", exact: true }).click();
|
||
await execute.click();
|
||
const display = page.getByLabel("本地预览展示", { exact: true });
|
||
await expect(display.locator('[data-investigation-chart="dev-case-impact-bar"]')).toBeVisible();
|
||
await expect(display).toContainText("仅当前浏览器");
|
||
await expect(execute).toBeEnabled();
|
||
await page.getByRole("checkbox", { name: "跟随所选调查", exact: true }).check();
|
||
await expect(display.locator('[data-investigation-chart="dev-case-impact-bar"]')).toBeVisible();
|
||
await page.getByRole("checkbox", { name: "跟随所选调查", exact: true }).uncheck();
|
||
await expect(display.locator('[data-investigation-chart="dev-case-impact-bar"]')).toBeVisible();
|
||
await testInfo.attach("preview-without-task", {
|
||
body: await page.screenshot({ path: testInfo.outputPath("preview-without-task.png") }), contentType: "image/png"
|
||
});
|
||
await cases.click();
|
||
await page.getByRole("option", { name: "合成影响范围", exact: true }).click();
|
||
await execute.click();
|
||
await expect(display.getByText("本地合成影响范围", { exact: true })).toBeVisible();
|
||
await expect.poll(() => page.evaluate(async () => {
|
||
const source = window.__waterNetworkMap?.getSource("preview-presentation-overlay") as
|
||
{ getData: () => Promise<{ features: Array<{ geometry: { type: string } }> }> } | undefined;
|
||
return (await source?.getData())?.features[0]?.geometry.type;
|
||
})).toBe("Polygon");
|
||
// A data-only edit does not strand the map preview without its controls.
|
||
await tools.getByLabel("调查展示 JSONL", { exact: true }).fill(JSON.stringify({
|
||
record_type: "candidate", origin: "synthetic", source_evidence_refs: [], element_id: "DEMO-DATA"
|
||
}));
|
||
await execute.click();
|
||
await expect(page.getByLabel("本地预览展示", { exact: true }).getByRole("region", { name: "展示结果" })).toContainText("DEMO-DATA");
|
||
await expect(display.getByText("本地合成影响范围", { exact: true })).toBeVisible();
|
||
await tools.getByRole("button", { name: "清除临时展示", exact: true }).click();
|
||
await expect(display).toContainText("当前没有展示结果");
|
||
await expect(display.getByRole("combobox", { name: "切换展示动作" })).toBeVisible();
|
||
await cases.click();
|
||
await page.getByRole("option", { name: "错误：图表数据不齐", exact: true }).click();
|
||
await execute.click();
|
||
await expect(tools.getByRole("alert")).toContainText("第 1 行展示指令不合法");
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
|
||
test("presentation panel keeps its header fixed while map controls, chart sources and compact layouts remain usable", async ({ page }, testInfo) => {
|
||
test.setTimeout(60_000);
|
||
const mock = await mockInvestigationPresentation(page, []);
|
||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
const tools = page.getByTestId("investigation-dev-tools");
|
||
await tools.getByRole("button", { name: "载入合成样例", exact: true }).click();
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||
const panel = page.getByLabel("本地预览展示", { exact: true });
|
||
const header = panel.locator(":scope > header");
|
||
const content = panel.locator("[data-investigation-content]");
|
||
const chart = panel.locator('[data-investigation-chart="dev-synthetic-pressure"]');
|
||
const overlay = panel.getByRole("region", { name: "调查覆盖层" });
|
||
const headerY = (await header.boundingBox())!.y;
|
||
await overlay.getByRole("button", { name: "隐藏覆盖层", exact: true }).click();
|
||
await overlay.getByRole("button", { name: "显示覆盖层", exact: true }).click();
|
||
await overlay.getByRole("button", { name: "定位覆盖层", exact: true }).click();
|
||
await expect(panel.getByText("镜头跟随已暂停", { exact: true })).toBeVisible();
|
||
await panel.getByRole("button", { name: "恢复自动定位", exact: true }).click();
|
||
await chart.getByRole("button", { name: /查看依据/ }).click();
|
||
await expect(chart.getByText("合成测试数据，未保存为调查证据。", { exact: true })).toBeVisible();
|
||
expect(Math.abs((await header.boundingBox())!.y - headerY)).toBeLessThanOrEqual(1);
|
||
await expect(panel).toHaveCSS("background-color", "rgb(255, 255, 255)");
|
||
await expect(chart).toHaveCSS("background-color", "rgb(255, 255, 255)");
|
||
await expect(chart.locator(".agent-panel-nested")).toHaveCount(0);
|
||
|
||
for (const [name, width, height] of [["desktop", 1440, 900], ["compact", 1024, 640], ["mobile", 375, 812]] as const) {
|
||
await page.setViewportSize({ width, height });
|
||
await chart.getByRole("img", { name: "本地合成压力趋势", exact: true }).scrollIntoViewIfNeeded();
|
||
expect(await panel.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
|
||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
|
||
const plot = (await chart.getByRole("img", { name: "本地合成压力趋势", exact: true }).boundingBox())!;
|
||
const viewport = (await content.boundingBox())!;
|
||
expect(plot.y).toBeGreaterThanOrEqual(viewport.y - 1);
|
||
expect(plot.y + plot.height).toBeLessThanOrEqual(viewport.y + viewport.height + 1);
|
||
await testInfo.attach(`presentation-${name}`, {
|
||
body: await panel.screenshot({ path: testInfo.outputPath(`presentation-${name}.png`) }), contentType: "image/png"
|
||
});
|
||
}
|
||
await page.setViewportSize({ width: 1440, height: 900 });
|
||
await panel.getByRole("button", { name: "收起展示", exact: true }).click();
|
||
await expect(panel).toHaveAttribute("data-investigation-collapsed", "true");
|
||
await expect(chart).toHaveCount(0);
|
||
await panel.getByRole("button", { name: "展开展示", exact: true }).click();
|
||
await expect(chart).toBeVisible();
|
||
await chart.getByRole("button", { name: "关闭图表 本地合成压力趋势", exact: true }).click();
|
||
await expect(chart).toHaveCount(0);
|
||
await expect(overlay).toBeVisible();
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
|
||
for (const reducedMotion of ["no-preference", "reduce"] as const) {
|
||
test(`presentation actions remain interruptible with ${reducedMotion} motion`, async ({ page }) => {
|
||
test.setTimeout(60_000);
|
||
await page.emulateMedia({ reducedMotion });
|
||
const mock = await mockInvestigationPresentation(page, []);
|
||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
const tools = page.getByTestId("investigation-dev-tools");
|
||
await tools.getByRole("button", { name: "载入合成样例", exact: true }).click();
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||
const panel = page.getByLabel("本地预览展示", { exact: true });
|
||
const chart = panel.locator('[data-investigation-chart="dev-synthetic-pressure"]');
|
||
const source = chart.getByRole("button", { name: /查看依据/ });
|
||
await source.click();
|
||
await expect(source).toHaveAttribute("aria-expanded", "true");
|
||
await source.click();
|
||
await expect(source).toHaveAttribute("aria-expanded", "false");
|
||
await source.focus();
|
||
await page.keyboard.press("Enter");
|
||
await expect(source).toHaveAttribute("aria-expanded", "true");
|
||
const overlay = panel.getByRole("region", { name: "调查覆盖层" });
|
||
await overlay.getByRole("button", { name: "隐藏覆盖层", exact: true }).click();
|
||
await overlay.getByRole("button", { name: "显示覆盖层", exact: true }).click();
|
||
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap?.getLayoutProperty("preview-presentation-overlay-point", "visibility"))).toBe("visible");
|
||
await page.evaluate(() => {
|
||
const map = window.__waterNetworkMap!;
|
||
const center = map.getCenter();
|
||
map.jumpTo({ center: [center.lng + 0.002, center.lat + 0.001], zoom: 16 });
|
||
});
|
||
await overlay.getByRole("button", { name: "定位覆盖层", exact: true }).click();
|
||
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap?.isMoving())).toBe(false);
|
||
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap?.getZoom())).toBeCloseTo(18, 2);
|
||
await panel.getByRole("button", { name: "收起展示", exact: true }).click();
|
||
await expect(panel).toHaveAttribute("data-investigation-collapsed", "true");
|
||
await expect(chart).toHaveCount(0);
|
||
await panel.getByRole("button", { name: "展开展示", exact: true }).click();
|
||
await expect(chart).toBeVisible();
|
||
await chart.getByRole("button", { name: "关闭图表 本地合成压力趋势", exact: true }).click();
|
||
await expect(chart).toHaveCount(0);
|
||
await expect(overlay).toBeVisible();
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
}
|
||
|
||
test("presentation history keeps JSONL results and map snapshots after switching cases or clearing", async ({ page }, testInfo) => {
|
||
test.setTimeout(60_000);
|
||
const mock = await mockInvestigationPresentation(page, []);
|
||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
const tools = page.getByTestId("investigation-dev-tools");
|
||
await tools.getByRole("button", { name: "载入合成样例", exact: true }).click();
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||
const panel = page.getByLabel("本地预览展示", { exact: true });
|
||
const history = panel.getByRole("combobox", { name: "切换展示动作" });
|
||
const overlayData = () => page.evaluate(async () => {
|
||
const source = window.__waterNetworkMap?.getSource("preview-presentation-overlay") as { getData: () => Promise<unknown> };
|
||
return source.getData();
|
||
});
|
||
const captured = await overlayData();
|
||
await tools.getByLabel("调查展示 JSONL", { exact: true }).fill([
|
||
"clear_highlights", "clear_overlay", "clear_scada_analysis"
|
||
].map((action) => JSON.stringify({ record_type: "presentation", command: { action, ...(action === "clear_overlay" ? { overlay_id: "dev-synthetic-area" } : {}) } })).join("\n"));
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(tools.getByRole("status")).toContainText("本地预览完成：3 条展示指令");
|
||
await expect(history).toContainText("3 个动作");
|
||
await expect.poll(overlayData).toEqual({ type: "FeatureCollection", features: [] });
|
||
await tools.getByRole("combobox", { name: "JSONL 测试案例" }).click();
|
||
await page.getByRole("option", { name: "隔离阀门清单", exact: true }).click();
|
||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||
await expect(panel.getByRole("region", { name: "展示结果" })).toContainText("合成隔离阀门清单");
|
||
await expect(tools.locator("[data-answer-ui]")).toHaveCount(0);
|
||
await expect(history).toContainText("4 个动作");
|
||
await history.click();
|
||
await page.getByRole("option", { name: /^\d+\. 打开图表 · 本地合成压力趋势 · 完成$/ }).click();
|
||
await expect(panel).toContainText("历史回看");
|
||
await expect(panel.getByRole("region", { name: "展示结果" })).toContainText("合成候选对比");
|
||
await expect(panel.locator('[data-investigation-chart="dev-synthetic-pressure"]')).toBeVisible();
|
||
await expect.poll(overlayData).toEqual(captured);
|
||
await expect(panel.getByRole("button", { name: "隐藏覆盖层" })).toBeDisabled();
|
||
await expect(panel.getByRole("button", { name: "关闭图表 本地合成压力趋势" })).toBeDisabled();
|
||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||
await testInfo.attach("history-map-and-chart", { body: await panel.screenshot({ path: testInfo.outputPath("history-map-and-chart.png") }), contentType: "image/png" });
|
||
await panel.getByRole("button", { name: "回到当前", exact: true }).click();
|
||
await expect(panel.getByRole("region", { name: "展示结果" })).toContainText("合成隔离阀门清单");
|
||
await expect(panel.locator("[data-investigation-chart]")).toHaveCount(0);
|
||
await expect.poll(overlayData).toEqual({ type: "FeatureCollection", features: [] });
|
||
await tools.getByRole("button", { name: "清除临时展示", exact: true }).click();
|
||
await expect(panel).toContainText("当前没有展示结果");
|
||
await expect(history).toContainText("4 个动作");
|
||
await panel.getByRole("button", { name: "上一个动作" }).click();
|
||
await expect(panel.getByRole("region", { name: "展示结果" })).toContainText("合成隔离阀门清单");
|
||
await panel.getByRole("button", { name: "下一个动作" }).click();
|
||
await expect(panel).toContainText("当前没有展示结果");
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
|
||
test("live actions continue recording without interrupting a historical view and can return to latest", async ({ page }) => {
|
||
test.setTimeout(60_000);
|
||
const task = investigationFixture(1, "历史回看中的实时调查");
|
||
const mock = await mockInvestigationPresentation(page, [task]);
|
||
await selectInvestigation(page, task.title);
|
||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||
await expect(panel.getByText("实时跟随", { exact: true })).toBeVisible();
|
||
const chart = (id: number) => ({ action: "open_chart", chart_id: "live-history", evidence_refs: ["dev:synthetic"], chart: { title: `压力快照 ${id}`, chart_type: "line", x_data: ["08:00"], series: [{ name: "压力", data: [id] }] } });
|
||
await mock.emit(task, chart(1));
|
||
await expect(panel.getByRole("group", { name: "压力快照 1", exact: true })).toBeVisible();
|
||
const switcher = panel.getByRole("combobox", { name: "切换展示动作" });
|
||
await expect(switcher).toContainText("压力快照 1");
|
||
await switcher.click();
|
||
await expect(page.getByRole("option")).toHaveCount(1);
|
||
await expect(page.getByRole("option", { name: /当前（最新）.*压力快照 1/ })).toBeVisible();
|
||
await page.keyboard.press("Escape");
|
||
await expect(panel.getByRole("button", { name: "上一个动作" })).toBeDisabled();
|
||
await mock.emit(task, chart(2));
|
||
await expect(switcher).toContainText("压力快照 2");
|
||
await switcher.click();
|
||
await expect(page.getByRole("option")).toHaveCount(2);
|
||
await page.getByRole("option", { name: "1. 打开图表 · 压力快照 1 · 完成", exact: true }).click();
|
||
await expect(panel).toContainText("历史回看");
|
||
for (let id = 3; id <= 12; id++) await mock.emit(task, chart(id));
|
||
await expect(switcher).toContainText("1. 打开图表");
|
||
await switcher.click();
|
||
await expect(page.getByRole("option")).toHaveText([
|
||
/当前（最新）.*压力快照 12/,
|
||
...Array.from({ length: 11 }, (_, index) => `${11 - index}. 打开图表 · 压力快照 ${11 - index} · 完成`)
|
||
]);
|
||
await expect(page.getByRole("option", { name: /当前（最新）.*压力快照 12/ })).toBeVisible();
|
||
await expect(page.getByRole("option", { name: /^12\. 打开图表/ })).toHaveCount(0);
|
||
await page.keyboard.press("Escape");
|
||
await expect(panel.getByRole("group", { name: "压力快照 1", exact: true })).toBeVisible();
|
||
await expect(panel.getByRole("group", { name: "压力快照 12", exact: true })).toHaveCount(0);
|
||
await panel.getByRole("button", { name: "回到当前", exact: true }).click();
|
||
await expect(panel.getByRole("group", { name: "压力快照 12", exact: true })).toBeVisible();
|
||
await panel.getByRole("button", { name: "上一个动作" }).focus();
|
||
await page.keyboard.press("Enter");
|
||
await expect(switcher).toContainText("11. 打开图表");
|
||
await expect(panel.getByRole("group", { name: "压力快照 11", exact: true })).toBeVisible();
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|
||
|
||
test("selecting an investigation restores saved actions, keeps live continuity and deduplicates task reselection", async ({ page }, testInfo) => {
|
||
test.setTimeout(60_000);
|
||
const task = investigationFixture(1, "已保存展示的调查");
|
||
const completed = investigationFixture(2, "已完成的历史调查");
|
||
completed.status = "completed";
|
||
completed.lifecycle_status = "completed";
|
||
const runId = completed.active_run!.run_id;
|
||
completed.active_run = null;
|
||
const command = (title: string) => ({ action: "open_chart", chart_id: "saved-pressure", evidence_refs: ["saved:reading"], chart: { title, chart_type: "line", x_data: ["08:00"], series: [{ name: "压力", data: [20] }] } });
|
||
const overlay = { action: "set_overlay", overlay_id: "saved-area", title: "保存的影响范围", mode: "geometry", evidence_id: "saved:area", data: { type: "FeatureCollection", features: [{ type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [[[121.48,31.1],[121.49,31.1],[121.49,31.11],[121.48,31.1]]] } }] } };
|
||
const saved = [command("初次压力对比"), { action: "close_chart", chart_id: "saved-pressure" }, overlay, command("复核压力对比")].map((command, index) => ({ task_id: task.task_id, run_id: task.active_run!.run_id, event_seq: index + 1, execution_generation: 1, occurred_at: task.created_at, command }));
|
||
saved.push({ task_id: completed.task_id, run_id: runId, event_seq: 5, execution_generation: 1, occurred_at: completed.created_at, command: command("已完成调查的压力曲线") });
|
||
const mock = await mockInvestigationPresentation(page, [task, completed], saved);
|
||
await selectInvestigation(page, task.title);
|
||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||
const switcher = panel.getByRole("combobox", { name: "切换展示动作" });
|
||
await expect(switcher).toContainText("4 个动作");
|
||
await expect(panel.getByRole("group", { name: "复核压力对比", exact: true })).toBeVisible();
|
||
await expect(panel.getByRole("region", { name: "调查覆盖层" })).toContainText("保存的影响范围");
|
||
await switcher.click();
|
||
await expect(page.getByRole("option")).toHaveCount(4);
|
||
await page.getByRole("option", { name: "1. 打开图表 · 初次压力对比 · 完成", exact: true }).click();
|
||
await expect(panel.getByRole("group", { name: "初次压力对比", exact: true })).toBeVisible();
|
||
await expect(panel.getByRole("region", { name: "调查覆盖层" })).toHaveCount(0);
|
||
await mock.emit(task, command("当前实时压力"));
|
||
await expect(panel.getByRole("status")).toContainText("后续 4 个动作");
|
||
await panel.getByRole("button", { name: "回到当前", exact: true }).click();
|
||
await expect(switcher).toContainText("5 个动作");
|
||
await expect(panel.getByRole("group", { name: "当前实时压力", exact: true })).toBeVisible();
|
||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||
await testInfo.attach("saved-investigation-history", { body: await panel.screenshot({ path: testInfo.outputPath("saved-investigation-history.png") }), contentType: "image/png" });
|
||
// Turn off live following, then an already completed task still loads its saved presentation.
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
await page.getByRole("checkbox", { name: "跟随所选调查", exact: true }).uncheck();
|
||
await expect(panel.getByText("已载入历史", { exact: true })).toBeVisible();
|
||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||
const tasks = page.getByRole("region", { name: "工况任务", exact: true });
|
||
// Completed tasks can be selected through the all-status filter.
|
||
const completedTitle = tasks.getByText(completed.title, { exact: true }).first();
|
||
if (!await completedTitle.isVisible()) {
|
||
const all = tasks.getByRole("button", { name: /全部/ }).first();
|
||
if (await all.isVisible()) await all.click();
|
||
}
|
||
await completedTitle.click();
|
||
await expect(panel.getByRole("group", { name: "已完成调查的压力曲线", exact: true })).toBeVisible();
|
||
await expect(switcher).toContainText("1 个动作");
|
||
await tasks.getByText(task.title, { exact: true }).first().click();
|
||
await expect(switcher).toContainText("5 个动作");
|
||
await expect(panel.getByRole("group", { name: "当前实时压力", exact: true })).toBeVisible();
|
||
expect(mock.mutations).toEqual([]);
|
||
});
|