fix(charts): preserve comparison types and draggable window headings
Generic Container CI/CD / test-build-publish (push) Successful in 1m12s
Frontend CI/CD / build-test-publish-and-deploy (push) Successful in 1m11s

Keep current lines and historical scatter points in a dedicated comparison chart type. Expose floating headings and use idempotent placement so StrictMode no longer masks production overlap.
This commit is contained in:
2026-11-08 03:04:14 +08:00
parent 4e3ed5098e
commit e0fe4a5a10
7 changed files with 73 additions and 16 deletions
@@ -9,6 +9,50 @@ const chart = (index: number) => ({
test.setTimeout(60_000);
for (const height of [900, 720]) {
test(`multiple chart headings stay accessible and drag on first press at ${height}px height`, async ({ page }, testInfo) => {
await page.setViewportSize({ width: 1440, height });
const task = investigationFixture(1, "多图窗口拖动核查");
const mock = await mockInvestigationPresentation(page, [task]);
await selectInvestigation(page, task.title);
for (let index = 1; index <= 4; index++) {
await mock.emit(task, { ...chart(index), chart_id: `pressure-${index}` });
await expect(page.getByRole("dialog", { name: `合成压力分析 ${index}`, exact: true })).toBeVisible();
}
if (height === 900) await page.setViewportSize({ width: 1440, height: 720 });
for (let index = 1; index <= 4; index++) {
const popup = page.getByRole("dialog", { name: `合成压力分析 ${index}`, exact: true });
const heading = popup.locator(".floating-window-heading");
const box = (await heading.boundingBox())!;
expect((await popup.boundingBox())!.y).toBe(64 + (index - 1) * (box.height + 8));
const target = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
expect(await page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.closest("[data-floating-window]")?.getAttribute("aria-labelledby"), target))
.toBe(await popup.getAttribute("aria-labelledby"));
}
await testInfo.attach(`multiple-charts-before-drag-${height}`, {
body: await page.screenshot({ path: testInfo.outputPath(`multiple-charts-before-drag-${height}.png`) }), contentType: "image/png"
});
for (const index of [1, 4, 2]) {
const popup = page.getByRole("dialog", { name: `合成压力分析 ${index}`, exact: true });
const before = (await popup.boundingBox())!;
const heading = (await popup.locator(".floating-window-heading").boundingBox())!;
const start = { x: heading.x + heading.width - 110, y: heading.y + heading.height / 2 };
await page.mouse.move(start.x, start.y);
await page.mouse.down();
await page.mouse.move(start.x - 120, start.y - 32, { steps: 12 });
await page.mouse.up();
await expect.poll(async () => Math.round((await popup.boundingBox())!.x - before.x)).toBe(-120);
await expect.poll(async () => Math.round((await popup.boundingBox())!.y - before.y)).toBe(-32);
expect((await popup.boundingBox())!.width).toBe(before.width);
expect((await popup.boundingBox())!.height).toBe(before.height);
}
await testInfo.attach(`multiple-charts-after-drag-${height}`, {
body: await page.screenshot({ path: testInfo.outputPath(`multiple-charts-after-drag-${height}.png`) }), contentType: "image/png"
});
expect(mock.mutations).toEqual([]);
});
}
test("live analysis opens a window, preserves its position and respects closing and task switches", async ({ page }, testInfo) => {
const task = investigationFixture(1, "图表自动展示核查");
const other = investigationFixture(2, "另一项调查");
+3 -3
View File
@@ -9,8 +9,8 @@ const times = Array.from({ length: 13 }, (_, index) => `${String(9 + Math.floor(
const block = {
version: "answer-ui@1", block_id: "scada-week", phase: "final", fallback_text: "合成 SCADA 七日对照",
spec: { root: "chart", elements: { chart: { type: "Chart", children: [], props: {
title: "压力与前七天同时刻对照(m)", chart_type: "line", y_axis_name: "压力(m)", x_axis_name: "时间(UTC0)",
x_data: times.map((time) => new Date(`2026-06-14T${time}:00+08:00`).toISOString().slice(11, 16)),
title: "压力与前七天同时刻对照(m)", chart_type: "time_comparison", y_axis_name: "压力(m)", x_axis_name: "时间",
x_data: times,
series: [{ name: "当日三小时", type: "line", data: [34, 34.2, 33.8, 34, 33.5, 33, 32.5, 32, 31, 30, 29, 27, 25],
sample_times: times.map((time) => new Date(`2026-06-14T${time}:00+08:00`).toISOString().replace(".000Z", "Z")) },
...Array.from({ length: 7 }, (_, index) => ({ name: `6月${13 - index}日`, type: "scatter",
@@ -45,7 +45,7 @@ for (const width of [1440, 375, 320]) {
await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
const ui = panel.locator(".answer-ui-chart");
await expect(ui).toBeVisible();
await expect(ui).toContainText("时间(UTC+8)");
await expect(ui.locator("svg text").filter({ hasText: /^时间$/ })).toBeVisible();
await expect(ui.getByRole("tab", { name: "复合", exact: true })).toBeVisible();
await expect(ui.getByLabel("显示的数据序列").getByRole("button")).toHaveCount(8);
// Each historical day has exactly three unconnected SVG scatter symbols.