86 lines
6.3 KiB
TypeScript
86 lines
6.3 KiB
TypeScript
import { expect, test, type Page } from "@playwright/test";
|
|
import type { GeoJSONSource } from "maplibre-gl";
|
|
import { investigationFixture, mockInvestigationPresentation, selectInvestigation } from "./support/mock-investigation-presentation";
|
|
|
|
const sourceCount = (page: Page, id: string) => page.evaluate(async (sourceId) => {
|
|
const source = window.__waterNetworkMap?.getSource(sourceId) as GeoJSONSource | undefined;
|
|
const data = await source?.getData();
|
|
return data && typeof data !== "string" && data.type === "FeatureCollection" ? data.features.length : 0;
|
|
}, id);
|
|
|
|
test("More clears controller and investigation overlays while keeping the investigation chart", async ({ page }) => {
|
|
const task = investigationFixture(78, "清理地图覆盖层验证");
|
|
const mock = await mockInvestigationPresentation(page, [task]);
|
|
await selectInvestigation(page, task.title);
|
|
await page.waitForFunction(() => Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")));
|
|
const presentation = page.getByTestId("investigation-presentation-panel");
|
|
await expect(presentation.getByText("跟随所选调查", { exact: true })).toBeVisible();
|
|
await mock.emit(task, { action: "highlight_features", layer: "scada", feature_ids: ["P1"], effect: "pulse" });
|
|
await expect.poll(() => sourceCount(page, "investigation-presentation-highlights")).toBe(1);
|
|
await mock.emit(task, { action: "set_overlay", overlay_id: "clear-test", title: "待清理范围", mode: "geometry", evidence_id: "synthetic",
|
|
data: { type: "FeatureCollection", features: [{ type: "Feature", properties: {}, geometry: { type: "Point", coordinates: [121.48, 31.1] } }] } });
|
|
await expect(presentation.getByRole("region", { name: "调查覆盖层" })).toBeVisible();
|
|
await mock.emit(task, { action: "open_chart", chart_id: "retain-chart", evidence_refs: ["synthetic"],
|
|
chart: { title: "保留的调查曲线", chart_type: "line", x_data: ["10:00", "10:15"], series: [{ name: "P1", data: [20, 21] }] } });
|
|
const chart = presentation.locator('[data-investigation-chart="retain-chart"]');
|
|
await expect(chart).toBeVisible();
|
|
|
|
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
|
const dev = page.getByTestId("map-dev-panel");
|
|
await dev.getByRole("tab", { name: "地图调试", exact: true }).click();
|
|
await dev.getByRole("combobox", { name: "业务源" }).click();
|
|
await page.getByRole("option", { name: "SCADA", exact: true }).click();
|
|
await dev.getByLabel("要素 ID（可多个）").fill("P1");
|
|
await dev.getByRole("button", { name: "仅高亮", exact: true }).click();
|
|
await dev.locator("summary").filter({ hasText: "水流调试" }).click();
|
|
await dev.getByRole("button", { name: "开启水流", exact: true }).click();
|
|
await dev.locator("summary").filter({ hasText: "数值标注" }).click();
|
|
await dev.getByRole("button", { name: "应用标注", exact: true }).click();
|
|
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap?.getFeatureState({ source: "scada", id: "P1" }).highlighted)).toBe(true);
|
|
await dev.getByRole("button", { name: "关闭 Dev Panel" }).click();
|
|
await page.getByRole("button", { name: "更多：更多地图操作", exact: true }).click();
|
|
const more = page.getByRole("region", { name: "更多", exact: true });
|
|
await more.getByRole("button", { name: /清空所有高亮和覆盖层/ }).click();
|
|
await expect.poll(() => sourceCount(page, "investigation-presentation-highlights")).toBe(0);
|
|
await expect.poll(() => sourceCount(page, "investigation-presentation-overlay")).toBe(0);
|
|
await expect.poll(() => page.evaluate(() => ({
|
|
highlighted: window.__waterNetworkMap?.getFeatureState({ source: "scada", id: "P1" }).highlighted ?? false,
|
|
flow: window.__waterNetworkMap?.getLayoutProperty("workbench-network-flow-forward", "visibility"),
|
|
labels: window.__waterNetworkMap?.getLayoutProperty("workbench-value-label-pipes", "visibility")
|
|
}))).toEqual({ highlighted: false, flow: "none", labels: "none" });
|
|
await expect(presentation.getByRole("region", { name: "调查覆盖层" })).toHaveCount(0);
|
|
await expect(chart).toBeVisible();
|
|
await page.screenshot({ path: "/tmp/map-clear-overlays-desktop.png" });
|
|
// A later explicit command still works; clearing is a one-time display operation.
|
|
await mock.emit(task, { action: "highlight_features", layer: "scada", feature_ids: ["P1"], effect: "steady" });
|
|
await expect.poll(() => sourceCount(page, "investigation-presentation-highlights")).toBe(1);
|
|
});
|
|
|
|
test("mobile More clears drawing and measurement data and remains usable when already empty", async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 812 });
|
|
await mockInvestigationPresentation(page, []);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.waitForFunction(() => Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")));
|
|
await page.getByRole("button", { name: "测量：距离与范围测量", exact: true }).click();
|
|
await page.getByRole("region", { name: "测量", exact: true }).getByRole("button", { name: /开始测量/ }).click();
|
|
await page.locator("canvas.maplibregl-canvas").click({ position: { x: 100, y: 175 } });
|
|
await expect.poll(() => sourceCount(page, "workbench-measurement")).toBeGreaterThan(0);
|
|
await page.getByRole("button", { name: "标注：管理地图标注", exact: true }).click();
|
|
await page.getByRole("region", { name: "标注", exact: true }).getByRole("button", { name: "点标注", exact: true }).click();
|
|
await page.locator("canvas.maplibregl-canvas").click({ position: { x: 100, y: 175 } });
|
|
await expect.poll(() => sourceCount(page, "workbench-drawing-features")).toBe(1);
|
|
await page.getByRole("button", { name: "更多：更多地图操作", exact: true }).click();
|
|
const more = page.getByRole("region", { name: "更多", exact: true });
|
|
const clear = more.getByRole("button", { name: /清空所有高亮和覆盖层/ });
|
|
await expect(clear).toBeVisible();
|
|
await clear.click();
|
|
await expect.poll(() => sourceCount(page, "workbench-measurement")).toBe(0);
|
|
await expect.poll(() => sourceCount(page, "workbench-drawing-features")).toBe(0);
|
|
await clear.click();
|
|
await expect(clear).toBeEnabled();
|
|
const box = await more.boundingBox();
|
|
expect(box!.x).toBeGreaterThanOrEqual(0);
|
|
expect(box!.x + box!.width).toBeLessThanOrEqual(375);
|
|
await page.screenshot({ path: "/tmp/map-clear-overlays-mobile.png" });
|
|
});
|