fix(charts): preserve comparison types and draggable window headings
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:
@@ -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, "另一项调查");
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user