chore: test

playwright/tests/mapcomponent.spec.js

@@ -51,6 +51,114 @@ async function panMap(page, deltaY = -200) {
   );
 }
 
+/**
+ * Helper: Move mouse to the visual center of the #map element.
+ */
+async function moveMouseToMapCenter(page) {
+  const map = page.locator("#map");
+  await map.waitFor({ state: "visible" });
+  await page.locator("#map.leaflet-container").waitFor({ state: "visible", timeout: 20_000 });
+  const box = await map.boundingBox();
+  if (!box) throw new Error("Map bounding box not found");
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  await page.mouse.move(cx, cy);
+  return { cx, cy };
+}
+
+/**
+ * Helper: Read map zoom from localStorage as a number. Returns NaN if not set.
+ */
+async function getZoomFromLocalStorage(page) {
+  return await page.evaluate(() => {
+    const v = localStorage.getItem("mapZoom");
+    return v ? Number(v) : NaN;
+  });
+}
+
+/**
+ * Helper: Wait until mapZoom in localStorage changes compared to a previous value.
+ * Optionally enforce a direction via compareFn(newZoom, oldZoom) => boolean.
+ */
+async function waitForZoomChange(page, previousZoom, compareFn) {
+  await page.waitForFunction(
+    (prev, cmp) => {
+      const v = localStorage.getItem("mapZoom");
+      if (!v) return false;
+      const z = Number(v);
+      if (Number.isNaN(z)) return false;
+      if (typeof cmp === "string" && cmp === "gt") return z > prev;
+      if (typeof cmp === "string" && cmp === "lt") return z < prev;
+      if (typeof cmp === "string" && cmp === "ne") return z !== prev;
+      return z !== prev;
+    },
+    previousZoom,
+    { timeout: 10_000 }
+  );
+}
+
+/**
+ * Helper: Zoom the map using wheel input at map center.
+ * Uses page.mouse.wheel when available; otherwise dispatches a WheelEvent in the page context.
+ * Negative deltaY zooms in; positive deltaY zooms out.
+ */
+async function wheelZoom(page, deltaY = -400) {
+  const { cx, cy } = await moveMouseToMapCenter(page);
+  // Try native Playwright wheel first
+  try {
+    await page.mouse.wheel(0, deltaY);
+    return;
+  } catch {
+    // Fallback: dispatch a real WheelEvent at the map element
+    await page.evaluate(
+      ({ selector, deltaY, cx, cy }) => {
+        const el = document.querySelector(selector);
+        if (!el) return false;
+        const evt = new WheelEvent("wheel", {
+          deltaY,
+          clientX: cx,
+          clientY: cy,
+          bubbles: true,
+          cancelable: true,
+          view: window,
+        });
+        el.dispatchEvent(evt);
+        return true;
+      },
+      { selector: "#map", deltaY, cx, cy }
+    );
+  }
+}
+
+// Attach localStorage snapshot on failure to aid debugging
+test.afterEach(async ({ page }, testInfo) => {
+  // Only capture on unexpected failure
+  if (testInfo.status !== testInfo.expectedStatus) {
+    const snapshot = await page.evaluate(() => {
+      const keys = [
+        "mapZoom",
+        "mapCenter",
+        "showAppInfoCard",
+        "showCoordinateInput",
+        "showLayersPanel",
+        "showAreaDropdown",
+        "currentMapId",
+        "currentUserId",
+      ];
+      const out = {};
+      for (const k of keys) out[k] = localStorage.getItem(k);
+      return out;
+    });
+    // Attach as artifact and also log for convenience
+    await testInfo.attach("localStorage.json", {
+      contentType: "application/json",
+      body: JSON.stringify(snapshot, null, 2),
+    });
+    // eslint-disable-next-line no-console
+    console.log("[localStorage snapshot]", snapshot);
+  }
+});
+
 test("MapComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/?m=12&u=484");
   // 10 Sekunden warten, bis die Karte sichtbar ist
@@ -127,3 +235,36 @@ test("MapComponent", async ({ page }) => {
   await page.getByRole("combobox").selectOption("50977");
   await page.getByRole("button", { name: "Karte auf Standardansicht" }).click();
 });
+
+test("mouse wheel zoom updates mapZoom", async ({ page }) => {
+  // Set initial state before navigation so the app can read them on load
+  await page.addInitScript(() => {
+    localStorage.setItem("currentMapId", "12");
+    localStorage.setItem("currentUserId", "484");
+    localStorage.setItem("mapCenter", JSON.stringify([53.23938294961826, 8.21434020996094]));
+    localStorage.setItem("mapZoom", "10");
+    localStorage.setItem("showAppInfoCard", "false");
+    localStorage.setItem("showCoordinateInput", "false");
+    localStorage.setItem("showLayersPanel", "false");
+    localStorage.setItem("showAreaDropdown", "false");
+  });
+
+  await page.goto("http://localhost:3000/?m=12&u=484");
+
+  await page.locator("#map.leaflet-container").waitFor({ state: "visible", timeout: 20_000 });
+
+  const before = await getZoomFromLocalStorage(page);
+  expect(Number.isNaN(before)).toBeFalsy();
+
+  // Zoom in via wheel and expect zoom to increase
+  await wheelZoom(page, -600);
+  await waitForZoomChange(page, before, "gt");
+  const afterIn = await getZoomFromLocalStorage(page);
+  expect(afterIn).toBeGreaterThan(before);
+
+  // Zoom out via wheel and expect zoom to decrease
+  await wheelZoom(page, 800);
+  await waitForZoomChange(page, afterIn, "lt");
+  const afterOut = await getZoomFromLocalStorage(page);
+  expect(afterOut).toBeLessThan(afterIn);
+});