OrgTJWater/next-tjwater-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workbench): expand SCADA monitoring and investigation presentation

Browse Source
This commit is contained in:
jiang
2026-11-07 19:50:14 +08:00
parent 0801e161ec
commit ba71e2d529
133 changed files with 6754 additions and 1438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/browser/investigation-dev-tools.e2e.ts
+322 -19
View File
@@ -1,3 +1,4 @@
import { INVESTIGATION_DEV_NETWORK } from "../../src/features/workbench/utils/investigation-dev-network";
import { expect, test } from "@playwright/test";
import { investigationFixture, mockInvestigationPresentation, selectInvestigation } from "./support/mock-investigation-presentation";
@@ -14,9 +15,7 @@ test("live investigation charts remain visible while Dev is open", async ({ page
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 expect(page.getByRole("region", { name: "最近展示动作" })).toHaveCount(0);
await page.getByRole("button", { name: "展开展示", exact: true }).click();
await expect(page.locator('[data-investigation-chart="while-collapsed"]')).toBeVisible();
expect(mock.mutations).toEqual([]);
@@ -32,7 +31,7 @@ test("Dev validates and previews JSONL locally, rejects invalid actions and clea
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", "合成资料"]]
title: "已保存的候选列表", columns: ["候选", "依据"], rows: [[INVESTIGATION_DEV_NETWORK.pipeIds[2], "合成资料"]]
}, children: [] } }
}
} }] } };
@@ -63,18 +62,19 @@ test("Dev validates and previews JSONL locally, rejects invalid actions and clea
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 expect(tools).toContainText("已识别 2 条展示指令、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("本地测试");
await expect(tools.getByText("原始数据检查", { exact: true })).toHaveCount(0);
await expect(tools.getByRole("region", { name: "最近展示动作" })).toHaveCount(0);
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-highlights")).toBe(0);
await expect.poll(() => sourceSize("preview-presentation-overlay")).toBe(1);
const download = page.waitForEvent("download");
await tools.getByRole("button", { name: "下载测试 JSONL" }).click();
@@ -85,7 +85,7 @@ test("Dev validates and previews JSONL locally, rejects invalid actions and clea
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();
await page.locator('[data-investigation-chart="dev-synthetic-pressure"]').getByRole("img", { name: "本地合成压力趋势", exact: true }).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);
@@ -166,18 +166,13 @@ test("JSONL cases switch directly, reset validation and remove the previous loca
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 expect(tools.getByText("原始数据检查", { exact: true })).toHaveCount(0);
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([]);
@@ -196,9 +191,9 @@ test("JSONL cases switch directly, reset validation and remove the previous loca
await choose("纯 JSONL 数据");
await run();
await expect(preview).toContainText("DEMO-PIPE-03");
await expect(preview).toContainText(INVESTIGATION_DEV_NETWORK.pipeIds[2]);
await expect(page.locator("[data-investigation-chart]")).toHaveCount(0);
await expect(tools.getByRole("list", { name: "动作识别记录" })).toHaveCount(1);
await expect(tools.getByRole("list", { name: "动作识别记录" })).toHaveCount(0);
for (const [label, error] of [
["错误：JSON 语法", "第 2 行不是合法 JSON"],
@@ -212,7 +207,7 @@ test("JSONL cases switch directly, reset validation and remove the previous loca
await execute.click();
await expect(tools.getByRole("alert")).toContainText(error);
await expect(preview).toHaveCount(0);
await expect(tools.getByRole("list", { name: "动作识别记录" })).toHaveCount(1);
await expect(tools.getByRole("list", { name: "动作识别记录" })).toHaveCount(0);
}
expect(mock.mutations).toEqual([]);
});
@@ -228,14 +223,14 @@ test("JSONL cases preview tables, charts and map overlays without an investigati
await expect(cases).toBeEnabled();
await cases.click();
await expect(page.getByRole("listbox")).toBeVisible();
await expect(page.getByRole("option")).toHaveCount(12);
await expect(page.getByRole("option")).toHaveCount(14);
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/);
await expect(tools.getByLabel("调查展示 JSONL", { exact: true })).toHaveValue(new RegExp(INVESTIGATION_DEV_NETWORK.pipeIds[0]));
const execute = tools.getByRole("button", { name: "执行本地预览", exact: true });
await expect(execute).toBeEnabled();
await execute.click();
@@ -310,6 +305,7 @@ test("presentation panel keeps its header fixed while map controls, chart source
for (const [name, width, height] of [["desktop", 1440, 900], ["compact", 1024, 640], ["mobile", 375, 812]] as const) {
await page.setViewportSize({ width, height });
await expect.poll(async () => Math.abs((await panel.boundingBox())!.height - Math.min(480, height * 0.55))).toBeLessThan(1);
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);
@@ -320,6 +316,17 @@ test("presentation panel keeps its header fixed while map controls, chart source
await testInfo.attach(`presentation-${name}`, {
body: await panel.screenshot({ path: testInfo.outputPath(`presentation-${name}.png`) }), contentType: "image/png"
});
await panel.getByRole("button", { name: "收起展示", exact: true }).click();
await expect(panel).toHaveAttribute("data-investigation-collapsed", "true");
await expect(chart).toHaveCount(0);
expect((await panel.boundingBox())!.height).toBe(112);
await expect(panel.getByRole("combobox", { name: "切换展示动作" })).toBeVisible();
expect(await header.evaluate((element) => element.scrollHeight - element.clientHeight)).toBeLessThanOrEqual(1);
await testInfo.attach(`presentation-${name}-collapsed`, {
body: await panel.screenshot({ path: testInfo.outputPath(`presentation-${name}-collapsed.png`) }), contentType: "image/png"
});
await panel.getByRole("button", { name: "展开展示", exact: true }).click();
await expect(chart).toBeVisible();
}
await page.setViewportSize({ width: 1440, height: 900 });
await panel.getByRole("button", { name: "收起展示", exact: true }).click();
@@ -330,9 +337,305 @@ test("presentation panel keeps its header fixed while map controls, chart source
await chart.getByRole("button", { name: "关闭图表 本地合成压力趋势", exact: true }).click();
await expect(chart).toHaveCount(0);
await expect(overlay).toBeVisible();
expect((await panel.boundingBox())!.height).toBe(480);
await tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true }).click();
await page.getByRole("option", { name: "纯 JSONL 数据", exact: true }).click();
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
await expect(tools.getByRole("status")).toContainText("本地预览完成");
expect((await panel.boundingBox())!.height).toBe(480);
await tools.getByRole("button", { name: "清除临时展示", exact: true }).click();
expect((await panel.boundingBox())!.height).toBe(480);
expect(mock.mutations).toEqual([]);
});
test("individual charts float, move and resize while the preview stays in place", async ({ page }, testInfo) => {
test.setTimeout(90_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();
const input = tools.getByLabel("调查展示 JSONL", { exact: true });
await input.fill(`${await input.inputValue()}\n${JSON.stringify({ record_type: "presentation", command: {
action: "open_chart", chart_id: "second-chart", evidence_refs: ["dev:synthetic"],
chart: { title: "合成流量趋势", chart_type: "line", x_data: ["08:00", "08:15"], series: [{ name: "流量", data: [10, 12] }] }
} })}`);
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 original = (await panel.boundingBox())!;
const chart = panel.locator('[data-investigation-chart="dev-synthetic-pressure"]');
const plot = chart.getByRole("img", { name: "本地合成压力趋势", exact: true });
await plot.evaluate((element) => element.setAttribute("data-preview-state", "preserved"));
const trigger = chart.getByRole("button", { name: "放大查看 本地合成压力趋势", exact: true });
await trigger.click();
const first = page.getByRole("dialog", { name: "本地合成压力趋势", exact: true });
await expect(first).toBeVisible();
await expect(plot).toHaveAttribute("data-preview-state", "preserved");
expect(await panel.boundingBox()).toEqual(original);
const firstPlot = first.getByRole("img", { name: "本地合成压力趋势", exact: true });
expect((await firstPlot.boundingBox())!.width).toBeGreaterThan((await plot.boundingBox())!.width);
const before = (await first.boundingBox())!;
const heading = first.locator(".floating-window-heading");
const bar = (await heading.boundingBox())!;
await page.mouse.move(bar.x + 90, bar.y + 20);
await page.mouse.down();
await page.mouse.move(bar.x + 190, bar.y + 90, { steps: 8 });
await page.mouse.up();
await expect.poll(async () => (await first.boundingBox())!.x - before.x).toBeGreaterThan(90);
await expect.poll(async () => (await first.boundingBox())!.y - before.y).toBeGreaterThan(60);
const beforeResize = (await first.boundingBox())!;
const handle = (await first.locator(".floating-window-resize").boundingBox())!;
await page.mouse.move(handle.x + 8, handle.y + 8);
await page.mouse.down();
await page.mouse.move(handle.x + 88, handle.y + 58, { steps: 8 });
const resizedPlot = firstPlot.locator("svg");
await expect.poll(async () => Math.abs(Number(await resizedPlot.getAttribute("width")) - (await firstPlot.boundingBox())!.width)).toBeLessThan(1);
await expect.poll(async () => Math.abs(Number(await resizedPlot.getAttribute("height")) - (await firstPlot.boundingBox())!.height)).toBeLessThan(1);
await page.mouse.up();
await expect.poll(async () => (await first.boundingBox())!.width - beforeResize.width).toBeGreaterThan(70);
await expect.poll(async () => (await first.boundingBox())!.height - beforeResize.height).toBeGreaterThan(40);
expect(await panel.boundingBox()).toEqual(original);
await testInfo.attach("chart-floating", { body: await page.screenshot({ path: testInfo.outputPath("chart-floating.png") }), contentType: "image/png" });
await panel.locator('[data-investigation-chart="second-chart"]').getByRole("button", { name: "放大查看 合成流量趋势", exact: true }).click();
const second = page.getByRole("dialog", { name: "合成流量趋势", exact: true });
await expect(second).toBeVisible();
await expect(first).toBeVisible();
await heading.focus();
expect(Number(await first.evaluate((element) => getComputedStyle(element).zIndex))).toBeGreaterThan(Number(await second.evaluate((element) => getComputedStyle(element).zIndex)));
const moved = (await first.boundingBox())!;
await page.keyboard.press("ArrowLeft");
expect((await first.boundingBox())!.x).toBe(moved.x - 16);
await page.keyboard.press("Shift+ArrowRight");
expect((await first.boundingBox())!.width).toBe(moved.width + 16);
await first.getByRole("button", { name: "最大化窗口", exact: true }).click();
await expect.poll(async () => (await first.boundingBox())!.width).toBe(1424);
await first.getByRole("button", { name: "还原窗口", exact: true }).click();
expect((await first.boundingBox())!.width).toBe(moved.width + 16);
await page.keyboard.press("Escape");
await expect(first).toHaveCount(0);
await expect(trigger).toBeFocused();
await expect(second).toBeVisible();
await second.getByRole("button", { name: "关闭窗口", exact: true }).click();
await expect(second).toHaveCount(0);
await trigger.click();
for (const [name, width, height] of [["compact", 1024, 640], ["mobile", 375, 812], ["small", 320, 640]] as const) {
await page.setViewportSize({ width, height });
await expect.poll(async () => (await first.boundingBox())!.x + (await first.boundingBox())!.width).toBeLessThanOrEqual(width);
const box = (await first.boundingBox())!;
expect(box.y + box.height).toBeLessThanOrEqual(height);
expect(box.x).toBeGreaterThanOrEqual(0);
expect(await first.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
await testInfo.attach(`chart-floating-${name}`, { body: await first.screenshot({ path: testInfo.outputPath(`chart-floating-${name}.png`) }), contentType: "image/png" });
}
await heading.focus();
await page.keyboard.press("Escape");
await expect(first).toHaveCount(0);
expect(mock.mutations).toEqual([]);
});
test("report chart blocks enlarge independently and keep range controls usable", async ({ page }) => {
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.getByLabel("调查展示 JSONL", { exact: true }).fill(JSON.stringify({ record_type: "ui_block", evidence_refs: [], block: {
version: "answer-ui@1", block_id: "floating-pressure", phase: "final", fallback_text: "合成压力数据", spec: {
root: "chart", elements: { chart: { type: "Chart", props: { title: "交互压力图", chart_type: "line", source: "合成样例", x_data: ["08:00", "08:15"], series: [{ name: "压力", data: [31, 29] }] }, children: [] } }
}
} }));
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
await expect(tools.getByRole("status")).toContainText("本地预览完成");
const panel = page.getByLabel("本地预览展示", { exact: true });
await expect(panel).toHaveCSS("transform", "none");
const bounds = (await panel.boundingBox())!;
const trigger = panel.getByRole("button", { name: "放大查看 交互压力图", exact: true });
await trigger.click();
const floating = page.getByRole("dialog", { name: "交互压力图", exact: true });
await expect(floating).toBeVisible();
await floating.getByRole("button", { name: "筛选数据范围", exact: true }).click();
await floating.getByRole("combobox", { name: "区间起点", exact: true }).click();
await expect(page.getByRole("option", { name: "08:15", exact: true })).toBeVisible();
await page.keyboard.press("Escape");
await expect(page.getByRole("listbox")).toHaveCount(0);
await expect(floating).toBeVisible();
await floating.getByRole("combobox", { name: "区间起点", exact: true }).click();
await page.getByRole("option", { name: "08:15", exact: true }).click();
await floating.getByRole("tab", { name: "数据", exact: true }).click();
await expect(floating.getByRole("table")).toContainText("29");
await floating.getByRole("button", { name: "放大查看表格 交互压力图", exact: true }).click();
const dataWindow = page.getByRole("dialog", { name: "交互压力图 · 表格", exact: true });
await expect(dataWindow.getByRole("table")).toContainText("29");
await page.keyboard.press("Escape");
await expect(dataWindow).toHaveCount(0);
await expect(floating).toBeVisible();
const after = (await panel.boundingBox())!;
for (const key of ["x", "y", "width", "height"] as const) expect(Math.abs(after[key] - bounds[key])).toBeLessThan(1);
await floating.getByRole("button", { name: "关闭窗口", exact: true }).click();
await expect(trigger).toBeFocused();
expect(mock.mutations).toEqual([]);
});
test("complex tables retain search and sort in floating windows, including empty and raw results", 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");
const cases = tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true });
async function choose(label: string) {
await cases.click();
await page.getByRole("option", { name: label, exact: true }).click();
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
await expect(tools.getByRole("status")).toContainText("本地预览完成");
}
await choose("复杂表格：宽表、长文本与边界数据");
const panel = page.getByLabel("本地预览展示", { exact: true });
await expect(panel).toHaveCSS("transform", "none");
const before = (await panel.boundingBox())!;
const trigger = panel.getByRole("button", { name: "放大查看表格 合成候选核查宽表", exact: true });
await panel.getByRole("textbox", { name: "搜索合成候选核查宽表", exact: true }).fill("样例记录 042");
await trigger.click();
const wide = page.getByRole("dialog", { name: "合成候选核查宽表 · 表格", exact: true });
const search = wide.getByRole("textbox", { name: "搜索合成候选核查宽表", exact: true });
await expect(search).toHaveValue("样例记录 042");
await expect(wide.getByText("1 / 50 行", { exact: true })).toBeVisible();
await search.fill("");
await wide.getByRole("button", { name: "按序号排序", exact: true }).click();
await wide.getByRole("button", { name: "按序号排序", exact: true }).click();
await expect(wide.locator("tbody tr").first()).toContainText(INVESTIGATION_DEV_NETWORK.pipeIds[49]);
await search.fill("不存在的合成对象");
await expect(wide).toContainText("当前筛选没有匹配的数据");
await search.fill(INVESTIGATION_DEV_NETWORK.pipeIds[0]);
const after = (await panel.boundingBox())!;
for (const key of ["x", "y", "width", "height"] as const) expect(Math.abs(after[key] - before[key])).toBeLessThan(1);
await page.setViewportSize({ width: 375, height: 812 });
await expect.poll(async () => (await wide.boundingBox())!.width).toBeLessThanOrEqual(359);
expect(await wide.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
const region = wide.getByRole("region", { name: "合成候选核查宽表", exact: true });
expect(await region.evaluate((element) => element.scrollWidth)).toBeGreaterThan(await region.evaluate((element) => element.clientWidth));
await testInfo.attach("wide-table-mobile", { body: await wide.screenshot({ path: testInfo.outputPath("wide-table-mobile.png") }), contentType: "image/png" });
await wide.getByRole("button", { name: "关闭窗口", exact: true }).click();
await expect(trigger).toBeFocused();
await page.setViewportSize({ width: 1440, height: 900 });
await panel.getByRole("button", { name: "放大查看表格 合成空结果表", exact: true }).click();
const empty = page.getByRole("dialog", { name: "合成空结果表 · 表格", exact: true });
await expect(empty).toContainText("没有已加载的数据");
await empty.getByRole("button", { name: "关闭窗口", exact: true }).click();
await choose("纯 JSONL 数据");
await panel.getByRole("button", { name: "放大查看表格 调查数据摘要", exact: true }).click();
const raw = page.getByRole("dialog", { name: "调查数据摘要", exact: true });
await expect(raw.getByRole("table")).toContainText(INVESTIGATION_DEV_NETWORK.pipeIds[2]);
await expect(raw.locator("tbody tr")).toHaveCount(2);
await raw.getByRole("button", { name: "关闭窗口", exact: true }).click();
expect(mock.mutations).toEqual([]);
});
test("complex investigation cases show multi-chart and multi-table results without feature lookup actions", async ({ page }) => {
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("combobox", { name: "JSONL 测试案例", exact: true }).click();
await expect(page.getByRole("option", { name: "地图定位与高亮", exact: true })).toHaveCount(0);
await page.getByRole("option", { name: "复杂调查：多图多表联动", exact: true }).click();
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
await expect(tools.getByRole("status")).toContainText("本地预览完成：2 条展示指令、4 个界面块");
const panel = page.getByLabel("本地预览展示", { exact: true });
await expect(panel.getByRole("button", { name: "放大查看 合成全天压力对比", exact: true })).toBeVisible();
await expect(panel.getByRole("button", { name: "放大查看 合成分区流量趋势", exact: true })).toHaveCount(1);
await expect(panel.getByRole("button", { name: "放大查看表格 合成候选方案核查", exact: true })).toHaveCount(1);
await expect(panel.getByRole("button", { name: "放大查看表格 合成阀门核查清单", exact: true })).toHaveCount(1);
await page.getByTestId("map-dev-panel").getByRole("tab", { name: "地图调试", exact: true }).click();
await expect(page.getByRole("button", { name: "仅高亮", exact: true })).toBeVisible();
await expect(page.getByRole("button", { name: "缩放到要素", exact: true })).toBeVisible();
await expect(page.getByRole("button", { name: "定位并高亮", exact: true })).toBeVisible();
expect(mock.mutations).toEqual([]);
});
test("expanded bars fill the window while preserving legends, type size and the chart instance", async ({ page }, testInfo) => {
test.setTimeout(60_000);
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("combobox", { name: "JSONL 测试案例", exact: true }).click();
await page.getByRole("option", { name: "复杂调查：多图多表联动", exact: true }).click();
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
await expect(tools.getByRole("status")).toContainText("本地预览完成");
await page.getByLabel("本地预览展示", { exact: true }).getByRole("button", { name: "放大查看 合成候选方案影响对比", exact: true }).click();
const floating = page.getByRole("dialog", { name: "合成候选方案影响对比", exact: true });
const legend = floating.getByLabel("类别图例", { exact: true });
for (const label of ["合成方案 A：局部隔离", "合成方案 B：扩大核查", "合成方案 C：保持供水", "合成方案 D：分段验证", "合成方案 E：待补充资料"]) {
await expect(legend.getByText(label, { exact: true })).toBeVisible();
}
await expect(legend).toContainText("610");
const plot = floating.getByRole("img", { name: "合成候选方案影响对比", exact: true });
await plot.scrollIntoViewIfNeeded();
const svg = plot.locator("svg");
await expect.poll(async () => Number(await svg.getAttribute("width"))).toBe((await plot.boundingBox())!.width);
const drawing = (await plot.boundingBox())!;
const sidebar = (await floating.locator("aside").boundingBox())!;
const instance = await plot.locator(".echarts-for-react").getAttribute("_echarts_instance_");
const fontSize = await svg.locator("text").first().evaluate((element) => getComputedStyle(element).fontSize);
await floating.locator(".floating-window-heading").focus();
await page.keyboard.press("Shift+ArrowRight");
await page.keyboard.press("Shift+ArrowDown");
await expect.poll(async () => (await plot.boundingBox())!.width).toBe(drawing.width + 16);
await expect.poll(async () => (await plot.boundingBox())!.height).toBe(drawing.height + 16);
await floating.getByRole("button", { name: "最大化窗口", exact: true }).click();
await expect.poll(async () => (await plot.boundingBox())!.width).toBeGreaterThan(drawing.width + 400);
await expect.poll(async () => (await plot.boundingBox())!.height).toBeGreaterThan(drawing.height + 100);
await expect.poll(async () => Number(await svg.getAttribute("width"))).toBe((await plot.boundingBox())!.width);
await expect.poll(async () => Number(await svg.getAttribute("height"))).toBe((await plot.boundingBox())!.height);
expect((await floating.locator("aside").boundingBox())!.width).toBe(sidebar.width);
expect(await svg.locator("text").first().evaluate((element) => getComputedStyle(element).fontSize)).toBe(fontSize);
await expect(plot.locator(".echarts-for-react")).toHaveAttribute("_echarts_instance_", instance!);
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
await testInfo.attach("responsive-bar-maximized", { body: await floating.screenshot({ path: testInfo.outputPath("responsive-bar-maximized.png") }), contentType: "image/png" });
await floating.getByRole("button", { name: "还原窗口", exact: true }).click();
await expect.poll(async () => (await plot.boundingBox())!.width).toBe(drawing.width + 16);
await page.setViewportSize({ width: 375, height: 812 });
const viewport = floating.locator("[data-floating-window-content]");
await expect.poll(async () => (await floating.boundingBox())!.width).toBeLessThanOrEqual(359);
expect((await plot.boundingBox())!.width).toBeLessThan(drawing.width);
await viewport.evaluate((element) => { element.scrollLeft = element.scrollWidth; });
expect(await viewport.evaluate((element) => element.scrollLeft)).toBe(0);
await floating.getByRole("tab", { name: "数据", exact: true }).click();
await expect(floating.getByRole("table")).toContainText("合成方案 E：待补充资料");
});
test("full-day charts expose all eight series and retain legend selection while resizing", async ({ page }) => {
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("combobox", { name: "JSONL 测试案例", exact: true }).click();
await page.getByRole("option", { name: "复杂图表：多测点与长时序", exact: true }).click();
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
await expect(tools.getByRole("status")).toContainText("本地预览完成");
await page.getByLabel("本地预览展示", { exact: true }).getByRole("button", { name: "放大查看 合成全天压力对比", exact: true }).click();
const floating = page.getByRole("dialog", { name: "合成全天压力对比", exact: true });
const series = floating.getByLabel("显示的数据序列").getByRole("button");
await expect(series).toHaveCount(8);
await series.last().click();
await expect(series.last()).toHaveAttribute("aria-pressed", "false");
const plot = floating.getByRole("img", { name: "合成全天压力对比", exact: true });
const drawing = (await plot.boundingBox())!;
await floating.locator(".floating-window-heading").focus();
await page.keyboard.press("Shift+ArrowDown");
await expect.poll(async () => (await plot.boundingBox())!.height).toBe(drawing.height + 16);
await expect(series.last()).toHaveAttribute("aria-pressed", "false");
await floating.getByRole("button", { name: "显示全部序列", exact: true }).click();
await expect(series.last()).toHaveAttribute("aria-pressed", "true");
await floating.getByRole("tab", { name: "数据", exact: true }).click();
await expect(floating.locator("tbody tr")).toHaveCount(96);
});
for (const reducedMotion of ["no-preference", "reduce"] as const) {
test(`presentation actions remain interruptible with ${reducedMotion} motion`, async ({ page }) => {
test.setTimeout(60_000);