fix(charts): fit analysis windows across viewport sizes

2026-11-07 20:13:43 +08:00
parent e0436217a8
commit 4a7781d5e5
3 changed files with 69 additions and 12 deletions
@@ -116,3 +116,60 @@ test("structured analysis charts open responsive windows in local preview and hi
  await expect(popup).toBeVisible();
  expect(mock.mutations).toEqual([]);
 });
+
+test("live charts fit desktop and narrow windows without outer scrollbars", async ({ page }, testInfo) => {
+  const task = investigationFixture(1, "实时图表紧凑布局核查");
+  const mock = await mockInvestigationPresentation(page, [task]);
+  await selectInvestigation(page, task.title);
+  await mock.emit(task, chart(1));
+  const popup = page.getByRole("dialog", { name: "合成压力分析 1", exact: true });
+  const content = popup.locator("[data-floating-window-content]");
+  await expect(popup.getByRole("img", { name: "合成压力分析 1", exact: true })).toBeVisible();
+  for (const [width, height] of [[1440, 900], [1280, 720], [800, 600], [375, 540], [320, 540]]) {
+    await page.setViewportSize({ width, height });
+    await expect.poll(() => content.evaluate((node) => ({
+      x: node.scrollWidth - node.clientWidth,
+      y: node.scrollHeight - node.clientHeight
+    }))).toEqual({ x: 0, y: 0 });
+    const plot = popup.getByRole("img", { name: "合成压力分析 1", exact: true });
+    expect((await plot.boundingBox())!.height).toBeGreaterThanOrEqual(120);
+    await testInfo.attach(`live-chart-fit-${width}`, {
+      body: await popup.screenshot({ path: testInfo.outputPath(`live-chart-fit-${width}.png`) }), contentType: "image/png"
+    });
+  }
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await popup.getByRole("button", { name: "筛选数据范围", exact: true }).click();
+  await expect(popup.getByRole("combobox", { name: "区间起点" })).toBeVisible();
+  await expect.poll(() => content.evaluate((node) => node.scrollHeight - node.clientHeight)).toBe(0);
+  await popup.getByRole("tab", { name: "数据", exact: true }).click();
+  await expect(popup.getByRole("table")).toBeVisible();
+  expect(mock.mutations).toEqual([]);
+});
+
+test("SCADA chart axes and legends fit every nested container", async ({ page }, testInfo) => {
+  const task = investigationFixture(1, "SCADA 压力布局核查");
+  const mock = await mockInvestigationPresentation(page, [task]);
+  await selectInvestigation(page, task.title);
+  await mock.emit(task, { action: "open_chart", chart_id: "scada-pressure", evidence_refs: ["synthetic:pressure"], chart: {
+    title: "SCADA 回放压力：异常前后（2026-07-16，UTC+8）", chart_type: "line",
+    x_axis_name: "时间（UTC+8）", y_axis_name: "压力（m）", x_data: ["07:30", "07:45", "08:00"],
+    series: [{ name: "测点 123748（实测回放）", data: [26.2, 25.7, 23.5] },
+      { name: "测点 159673（实测回放）", data: [24.9, 24.87, 21.6] }]
+  } });
+  const popup = page.getByRole("dialog", { name: "SCADA 回放压力：异常前后（2026-07-16，UTC+8）", exact: true });
+  await expect(popup).toBeVisible();
+  await expect.poll(() => popup.evaluate((node) => Array.from(node.querySelectorAll<HTMLElement>("*"))
+    .filter((element) => {
+      const style = getComputedStyle(element);
+      return (style.overflowX === "auto" || style.overflowX === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll") &&
+        (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight);
+    }).map((element) => ({ class: element.className, x: element.scrollWidth - element.clientWidth, y: element.scrollHeight - element.clientHeight }))
+  )).toEqual([]);
+  const plot = popup.getByRole("group", { name: /按回车查看数据点/ });
+  await expect.poll(() => plot.evaluate((element) => ({
+    x: element.scrollWidth - element.clientWidth, y: element.scrollHeight - element.clientHeight
+  }))).toEqual({ x: 0, y: 0 });
+  await testInfo.attach("scada-chart-layout", {
+    body: await popup.screenshot({ path: testInfo.outputPath("scada-chart-layout.png") }), contentType: "image/png"
+  });
+});