69 lines
4.3 KiB
TypeScript
69 lines
4.3 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
import { mockAgentApi } from "./support/mock-agent-api";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
|
|
for (const kind of ["peripheral", "dev"] as const) {
|
|
test(`${kind} panel keeps outside clicks, dragging and wheel navigation available`, async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await mockAgentApi(page);
|
|
await page.route("**/runtime-config.js", (route) => route.fulfill({
|
|
contentType: "application/javascript",
|
|
body: `globalThis.__TJWATER_CONFIG__ = ${JSON.stringify({
|
|
TJWATER_AUTH_MODE: "disabled", TJWATER_ENABLE_DEV_PANEL: "true",
|
|
TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
|
|
TJWATER_AGENT_URL: "http://127.0.0.1:8787",
|
|
TJWATER_MAP_URL: "https://workbench-map.invalid/geoserver",
|
|
TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
|
|
TJWATER_MAPBOX_ACCESS_TOKEN: "", TJWATER_TIANDITU_TOKEN: "", TJWATER_ENABLE_MSW: "false"
|
|
})};`
|
|
}));
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.waitForFunction(() => Boolean(window.__waterNetworkMap));
|
|
const trigger = page.getByRole("button", { name: kind === "peripheral" ? "外围系统" : "切换地图 Dev Panel", exact: true });
|
|
await trigger.click();
|
|
const panel = page.getByRole("complementary", { name: kind === "peripheral" ? "外围系统" : "地图开发面板", exact: true });
|
|
await expect(panel).toBeVisible();
|
|
await page.locator(".maplibregl-canvas-container").evaluate((element) => {
|
|
element.setAttribute("data-pointer-probe", "0");
|
|
for (const type of ["pointerdown", "wheel"]) element.addEventListener(type, () => {
|
|
element.setAttribute("data-pointer-probe", String(Number(element.getAttribute("data-pointer-probe")) + 1));
|
|
}, true);
|
|
});
|
|
// Controls inside a floating panel consume their own pointer input.
|
|
const heading = panel.getByRole("heading", { level: 2 });
|
|
await heading.click();
|
|
await page.mouse.wheel(0, 100);
|
|
await expect(page.locator(".maplibregl-canvas-container")).toHaveAttribute("data-pointer-probe", "0");
|
|
|
|
const canvas = page.locator(".maplibregl-canvas");
|
|
const bounds = (await canvas.boundingBox())!;
|
|
const point = { x: bounds.x + 150, y: bounds.y + 340 };
|
|
await expect.poll(() => page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.classList.contains("maplibregl-canvas") ?? false, point)).toBe(true);
|
|
await page.mouse.click(point.x, point.y);
|
|
await expect(page.locator(".maplibregl-canvas-container")).toHaveAttribute("data-pointer-probe", "1");
|
|
const center = await page.evaluate(() => window.__waterNetworkMap!.getCenter().toArray());
|
|
await page.mouse.move(point.x, point.y);
|
|
await page.mouse.down();
|
|
await page.mouse.move(point.x + 100, point.y + 30, { steps: 8 });
|
|
await page.mouse.up();
|
|
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getCenter().toArray())).not.toEqual(center);
|
|
const zoom = await page.evaluate(() => window.__waterNetworkMap!.getZoom());
|
|
await page.mouse.wheel(0, -200);
|
|
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getZoom())).toBeGreaterThan(zoom);
|
|
await expect(panel).toBeVisible();
|
|
await expect(trigger).toHaveAttribute("aria-pressed", "true");
|
|
// Opening and closing the other panel must not leave an invisible input shield.
|
|
if (kind === "dev") {
|
|
await page.getByRole("button", { name: "外围系统", exact: true }).click();
|
|
await expect.poll(() => page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.classList.contains("maplibregl-canvas") ?? false, point)).toBe(true);
|
|
await page.getByRole("button", { name: "关闭外围系统", exact: true }).click();
|
|
await panel.getByRole("tab", { name: "地图调试", exact: true }).click();
|
|
await expect(panel.getByRole("button", { name: "定位并高亮", exact: true })).toBeEnabled();
|
|
}
|
|
await panel.getByRole("button", { name: kind === "peripheral" ? "关闭外围系统" : "关闭 Dev Panel", exact: true }).click();
|
|
await expect(panel).toBeHidden();
|
|
await expect.poll(() => page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.classList.contains("maplibregl-canvas") ?? false, point)).toBe(true);
|
|
});
|
|
}
|