feat(charts): manage investigation charts in a scrolling workspace
Generic Container CI/CD / test-build-publish (push) Successful in 2m7s
Frontend CI/CD / build-test-publish-and-deploy (push) Successful in 2m8s

This commit is contained in:
2026-11-10 17:56:23 +08:00
parent 865491cb23
commit 0ae0a41e61
80 changed files with 4672 additions and 470 deletions
+12 -10
View File
@@ -53,11 +53,14 @@ for (const width of [1440, 375, 320]) {
await expect(ui.locator(`svg path[fill="${color}"]`)).toHaveCount(3);
}
const axisValues = () => ui.locator("svg text").allTextContents().then((labels) => labels.filter((label) => /^-?\d+(\.\d+)?$/.test(label)).map(Number));
expect((await axisValues()).every((value) => value > 0)).toBe(true);
const initialTicks = await axisValues();
expect(initialTicks.length).toBeGreaterThanOrEqual(2);
expect(initialTicks.every((value) => value > 0 && Number.isInteger(value))).toBe(true);
await page.evaluate(() => document.fonts.ready);
await testInfo.attach(`scada-week-${width}`, { body: await ui.screenshot({ path: testInfo.outputPath(`scada-week-${width}.png`) }), contentType: "image/png" });
await ui.locator('svg path[fill="#059669"]').last().hover({ position: { x: 4, y: 6 } });
await expect(ui).toContainText("采样时间 2026-06-13 12:00:00+08:00");
// Hover the topmost historical day so neighboring scatter symbols cannot intercept.
await ui.locator('svg path[fill="#a16207"]').last().hover({ position: { x: 4, y: 4 } });
await expect(ui).toContainText("采样时间 2026-06-07 12:00:00+08:00");
await page.evaluate(() => document.fonts.ready);
await testInfo.attach(`scada-week-tooltip-${width}`, { body: await ui.screenshot({ path: testInfo.outputPath(`scada-week-tooltip-${width}.png`) }), contentType: "image/png" });
const plot = ui.getByRole("group", { name: /按回车查看数据点/ });
@@ -91,22 +94,21 @@ for (const width of [1440, 375, 320]) {
const restored = (await floating.boundingBox())!;
await floating.getByRole("button", { name: "最大化窗口", exact: true }).click();
await expect.poll(async () => (await floating.boundingBox())!.width).toBe(width - 16);
await expect.poll(async () => (await floating.boundingBox())!.height).toBe((width < 640 ? 640 : 1000) - 16);
await expect.poll(async () => (await floating.boundingBox())!.height).toBe((width < 640 ? 640 : 1000) - 72);
await expect.poll(async () => Math.abs(Number(await drawing.locator("svg").getAttribute("width")) - (await drawing.boundingBox())!.width)).toBeLessThan(1);
await expect.poll(async () => Math.abs(Number(await drawing.locator("svg").getAttribute("height")) - (await drawing.boundingBox())!.height)).toBeLessThan(1);
await expect(drawing.locator(".echarts-for-react")).toHaveAttribute("_echarts_instance_", instance!);
const content = floating.locator("[data-floating-window-content]");
expect(await content.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
const plotBox = (await drawing.boundingBox())!;
const sidebar = (await floating.locator("aside").boundingBox())!;
if (width < 640) expect(sidebar.y).toBeGreaterThanOrEqual(plotBox.y + plotBox.height);
else expect(sidebar.x).toBeGreaterThanOrEqual(plotBox.x + plotBox.width);
expect(plotBox.height).toBeGreaterThanOrEqual(220);
const legend = (await floating.getByLabel("图表图例").boundingBox())!;
expect(legend.y).toBeGreaterThanOrEqual(plotBox.y + plotBox.height);
expect(plotBox.height).toBeGreaterThanOrEqual(180);
await floating.getByLabel("显示的数据序列").getByRole("button", { name: "6月12日", exact: true }).click();
await expect(ui.getByLabel("显示的数据序列").getByRole("button", { name: "6月12日", exact: true })).toHaveAttribute("aria-pressed", "false");
await floating.getByLabel("显示的数据序列").getByRole("button", { name: "6月12日", exact: true }).click();
await floating.locator('svg path[fill="#059669"]').last().hover({ position: { x: 4, y: 6 } });
await expect(floating).toContainText("采样时间 2026-06-13 12:00:00+08:00");
await floating.locator('svg path[fill="#a16207"]').last().hover({ position: { x: 4, y: 4 } });
await expect(floating).toContainText("采样时间 2026-06-07 12:00:00+08:00");
await floating.locator(".floating-window-heading").hover();
await page.evaluate(() => document.fonts.ready);
await testInfo.attach(`scada-week-fullscreen-${width}`, { body: await floating.screenshot({ path: testInfo.outputPath(`scada-week-fullscreen-${width}.png`) }), contentType: "image/png" });