112 lines
4.8 KiB
TypeScript
112 lines
4.8 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
|
|
test("combined compass switches 2D and 3D with north reset first", async ({ page }) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.route("**/city-model/manifest.json", (route) => route.fulfill({ status: 404 }));
|
|
|
|
for (const viewport of [
|
|
{ width: 1280, height: 800 },
|
|
{ width: 375, height: 812 }
|
|
]) {
|
|
await page.setViewportSize(viewport);
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
|
|
const zoomControls = page.getByRole("group", { name: "地图缩放", exact: true });
|
|
const modeButton = zoomControls.locator("button[aria-pressed]");
|
|
const compass = modeButton.locator("[data-map-compass]");
|
|
await expect(zoomControls).toBeVisible();
|
|
await expect(zoomControls.getByRole("button", { name: "放大", exact: true })).toBeVisible();
|
|
await expect(zoomControls.getByRole("button", { name: "缩小", exact: true })).toBeVisible();
|
|
await expect(
|
|
zoomControls.getByRole("button", { name: "切换到三维", exact: true })
|
|
).toBeVisible();
|
|
await expect(modeButton).toHaveAttribute("aria-pressed", "false");
|
|
await expect(compass).toHaveAttribute("data-map-mode", "2d");
|
|
await expect
|
|
.poll(() =>
|
|
page.evaluate(() => ({
|
|
dragRotate: window.__waterNetworkMap!.dragRotate.isEnabled(),
|
|
touchPitch: window.__waterNetworkMap!.touchPitch.isEnabled()
|
|
}))
|
|
)
|
|
.toEqual({ dragRotate: false, touchPitch: false });
|
|
|
|
await modeButton.click();
|
|
await expect
|
|
.poll(() => page.evaluate(() => window.__waterNetworkMap!.getPitch()))
|
|
.toBe(viewport.width < 640 ? 45 : 50);
|
|
await expect(modeButton).toHaveAttribute("aria-pressed", "true");
|
|
await expect(modeButton).toHaveAttribute("aria-label", "切换到二维");
|
|
await expect(compass).toHaveAttribute("data-map-mode", "3d");
|
|
await expect
|
|
.poll(() =>
|
|
page.evaluate(() => ({
|
|
dragRotate: window.__waterNetworkMap!.dragRotate.isEnabled(),
|
|
touchPitch: window.__waterNetworkMap!.touchPitch.isEnabled()
|
|
}))
|
|
)
|
|
.toEqual({ dragRotate: true, touchPitch: true });
|
|
|
|
await page.evaluate(() => window.__waterNetworkMap!.jumpTo({ bearing: 60 }));
|
|
await expect(modeButton).toHaveAttribute("aria-label", "恢复北向");
|
|
await expect(compass).toHaveAttribute("data-bearing", "60.0");
|
|
await expect(compass.locator("svg")).toHaveAttribute(
|
|
"style",
|
|
/rotateX\([^)]*\) rotateZ\(-60deg\)/
|
|
);
|
|
|
|
await modeButton.click();
|
|
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getBearing())).toBe(0);
|
|
await expect(modeButton).toHaveAttribute("aria-label", "切换到二维");
|
|
expect(await page.evaluate(() => window.__waterNetworkMap!.getPitch())).toBeGreaterThan(0);
|
|
|
|
await modeButton.click();
|
|
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getPitch())).toBe(0);
|
|
await expect(modeButton).toHaveAttribute("aria-pressed", "false");
|
|
await expect(modeButton).toHaveAttribute("aria-label", "切换到三维");
|
|
await expect(compass).toHaveAttribute("data-map-mode", "2d");
|
|
await expect(
|
|
zoomControls.getByRole("button", { name: "缩放到全局", exact: true })
|
|
).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "调整视角", exact: true })).toHaveCount(0);
|
|
await expect(page.getByRole("region", { name: "地图视角" })).toHaveCount(0);
|
|
}
|
|
});
|
|
|
|
test("3D navigation overrides the browser context menu for right-drag rotation", async ({
|
|
page
|
|
}) => {
|
|
await mockWorkbenchContext(page);
|
|
await page.route("**/city-model/manifest.json", (route) => route.fulfill({ status: 404 }));
|
|
await page.setViewportSize({ width: 1280, height: 800 });
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
|
|
const modeButton = page
|
|
.getByRole("group", { name: "地图缩放", exact: true })
|
|
.locator("button[aria-pressed]");
|
|
await modeButton.click();
|
|
await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getPitch())).toBe(50);
|
|
|
|
const canvas = page.locator(".maplibregl-canvas");
|
|
const bounds = await canvas.boundingBox();
|
|
expect(bounds).not.toBeNull();
|
|
const startX = bounds!.x + bounds!.width / 2;
|
|
const startY = bounds!.y + bounds!.height / 2;
|
|
await page.mouse.move(startX, startY);
|
|
await page.mouse.down({ button: "right" });
|
|
await page.mouse.move(startX + 80, startY, { steps: 4 });
|
|
await page.mouse.up({ button: "right" });
|
|
|
|
await expect
|
|
.poll(() => page.evaluate(() => Math.abs(window.__waterNetworkMap!.getBearing())))
|
|
.toBeGreaterThan(10);
|
|
expect(
|
|
await canvas.evaluate((element) =>
|
|
element.dispatchEvent(
|
|
new MouseEvent("contextmenu", { bubbles: true, cancelable: true, button: 2 })
|
|
)
|
|
)
|
|
).toBe(false);
|
|
});
|