Initial Watermaps import

2026-07-24 11:29:24 +02:00
commit 57f7b4dedb
129 changed files with 43136 additions and 0 deletions
@@ -0,0 +1,123 @@
+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();
+});