124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
test("docks the route planner beside the map and releases the full map when collapsed", async ({
|
|
page
|
|
}) => {
|
|
await page.goto("/");
|
|
|
|
const routePanel = page.getByRole("complementary", { name: "Routenplanung" });
|
|
const map = page.getByTestId("map-container");
|
|
const status = page.getByLabel("Navigationsstatus");
|
|
|
|
await expect(routePanel).toBeVisible();
|
|
await expect.poll(async () => (await map.boundingBox())?.x).toBe(400);
|
|
|
|
const dockedPanelBox = await routePanel.boundingBox();
|
|
const dockedMapBox = await map.boundingBox();
|
|
const statusBox = await status.boundingBox();
|
|
expect(dockedPanelBox).not.toBeNull();
|
|
expect(dockedMapBox).not.toBeNull();
|
|
expect(statusBox).not.toBeNull();
|
|
expect(dockedPanelBox!.x).toBe(0);
|
|
expect(dockedPanelBox!.width).toBe(400);
|
|
expect(dockedPanelBox!.x + dockedPanelBox!.width).toBeLessThanOrEqual(dockedMapBox!.x);
|
|
expect(dockedPanelBox!.y + dockedPanelBox!.height).toBeLessThanOrEqual(statusBox!.y + 1);
|
|
|
|
await routePanel.getByRole("button", { name: "Routenfenster ausblenden" }).click();
|
|
|
|
await expect(routePanel).toBeHidden();
|
|
await expect.poll(async () => (await map.boundingBox())?.x).toBe(0);
|
|
await expect.poll(async () => {
|
|
return page.locator(".maplibregl-canvas").evaluate((node) => {
|
|
const canvas = node as HTMLCanvasElement;
|
|
return Math.abs(canvas.width / window.devicePixelRatio - canvas.clientWidth);
|
|
});
|
|
}).toBeLessThan(2);
|
|
|
|
await page.getByRole("button", { name: "Routenfenster einblenden" }).click();
|
|
await expect.poll(async () => (await map.boundingBox())?.x).toBe(400);
|
|
});
|
|
|
|
test("switches from floating tablet panel to docked desktop sidebar at 1100 pixels", async ({
|
|
page
|
|
}) => {
|
|
await page.goto("/");
|
|
const routePanel = page.getByRole("complementary", { name: "Routenplanung" });
|
|
const map = page.getByTestId("map-container");
|
|
|
|
await page.setViewportSize({ width: 1099, height: 900 });
|
|
await expect.poll(async () => (await map.boundingBox())?.x).toBe(0);
|
|
const floatingPanelBox = await routePanel.boundingBox();
|
|
expect(floatingPanelBox?.x).toBe(10);
|
|
expect(floatingPanelBox?.width).toBe(360);
|
|
|
|
await page.setViewportSize({ width: 1100, height: 900 });
|
|
await expect.poll(async () => (await map.boundingBox())?.x).toBe(400);
|
|
const dockedPanelBox = await routePanel.boundingBox();
|
|
expect(dockedPanelBox?.x).toBe(0);
|
|
expect(dockedPanelBox?.width).toBe(400);
|
|
});
|
|
|
|
test("shows marine contact details as a right-hand desktop drawer", async ({ page, context }) => {
|
|
await context.grantPermissions(["geolocation"]);
|
|
await context.setGeolocation({ latitude: 54.18, longitude: 12.09 });
|
|
const requestedFeatureLayers: string[][] = [];
|
|
await page.route("**/api/features**", async (route) => {
|
|
const requestedLayers =
|
|
new URL(route.request().url()).searchParams.get("layers")?.split(",") ?? [];
|
|
requestedFeatureLayers.push(requestedLayers);
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
type: "FeatureCollection",
|
|
features: requestedLayers.includes("harbours")
|
|
? [
|
|
{
|
|
type: "Feature",
|
|
id: "e2e-test-harbour",
|
|
geometry: { type: "Point", coordinates: [12.09, 54.18] },
|
|
properties: {
|
|
layer: "harbours",
|
|
name: "Testhafen Rostock",
|
|
phone: "+49 381 123456",
|
|
website: "https://example.com",
|
|
vhf: "Kanal 12",
|
|
source: "E2E"
|
|
}
|
|
}
|
|
]
|
|
: []
|
|
})
|
|
});
|
|
});
|
|
await page.goto("/");
|
|
await expect(page.locator(".data-badge")).toHaveAttribute("data-ready", "true");
|
|
await page.getByRole("button", { name: "GPS starten" }).click();
|
|
await page.getByRole("button", { name: "Position zentrieren" }).click();
|
|
await expect.poll(() => requestedFeatureLayers.flat().sort().join(",")).toContain("harbours");
|
|
|
|
const featureButton = page.getByRole("button", {
|
|
name: "Informationen zu Hafen Testhafen Rostock",
|
|
includeHidden: true
|
|
});
|
|
await expect(featureButton).toBeAttached({ timeout: 10_000 });
|
|
await featureButton.focus();
|
|
await featureButton.press("Enter");
|
|
|
|
const drawer = page.getByRole("dialog", { name: "Testhafen Rostock" });
|
|
await expect(drawer).toBeVisible();
|
|
await expect(drawer.getByRole("link", { name: /Testhafen Rostock anrufen/ })).toBeVisible();
|
|
|
|
const drawerBox = await drawer.boundingBox();
|
|
const statusBox = await page.getByLabel("Navigationsstatus").boundingBox();
|
|
expect(drawerBox).not.toBeNull();
|
|
expect(statusBox).not.toBeNull();
|
|
expect(drawerBox!.x + drawerBox!.width).toBeGreaterThanOrEqual(1426);
|
|
expect(drawerBox!.y).toBeGreaterThanOrEqual(62);
|
|
expect(drawerBox!.y + drawerBox!.height).toBeLessThanOrEqual(statusBox!.y);
|
|
|
|
await page.keyboard.press("Escape");
|
|
await expect(drawer).toBeHidden();
|
|
await expect(featureButton).toBeFocused();
|
|
});
|