nodeMap/playwright/tests/mapcomponent.spec.js

import { test, expect } from "@playwright/test";

/**
 * Helper: Pan the Leaflet map by simulating a mouse drag and wait until
 * mapCenter in localStorage changes (MapComponent persists center on move/zoom).
 *
 * Note for codegen: The recorder oft erfasst Klicks statt Drag. Ersetze
 * die aufgenommenen Klicks nachträglich durch diesen Helper für verlässliches Panning.
 */
async function panMap(page, deltaY = -200) {
  const map = page.locator("#map");
  await map.waitFor({ state: "visible" });
  // Wait until Leaflet initializes the container class
  await page.locator("#map.leaflet-container").waitFor({ state: "visible", timeout: 20_000 });

  const centerBefore = await page.evaluate(() => {
    try {
      const v = localStorage.getItem("mapCenter");
      return v ? JSON.parse(v) : null;
    } catch {
      return null;
    }
  });

  const box = await map.boundingBox();
  if (!box) throw new Error("Map bounding box not found");
  const startX = box.x + box.width / 2;
  const startY = box.y + box.height / 2;

  await page.mouse.move(startX, startY);
  await page.mouse.down();
  await page.mouse.move(startX, startY + deltaY, { steps: 12 });
  await page.mouse.up();

  await page.waitForFunction(
    prev => {
      try {
        const v = localStorage.getItem("mapCenter");
        if (!v) return false;
        if (!prev) return true; // previously null -> now set
        const c = JSON.parse(v);
        const dLat = Math.abs(c[0] - prev[0]);
        const dLng = Math.abs(c[1] - prev[1]);
        return dLat > 0.0005 || dLng > 0.0005;
      } catch {
        return false;
      }
    },
    centerBefore,
    { timeout: 15_000 }
  );
}

test("MapComponent", async ({ page }) => {
  await page.goto("http://localhost:3000/?m=12&u=484");
  // 10 Sekunden warten, bis die Karte sichtbar ist
  await page.locator("#map").waitFor({ state: "visible", timeout: 10_000 });
  // Set your keys before the page loads (from your screenshot)
  await page.addInitScript(() => {
    localStorage.setItem("editMode", "false");
    localStorage.setItem("polylineVisible_m12_u484", "true");
    localStorage.setItem("currentMapId", "12");
    localStorage.setItem("currentUserId", "484");
    localStorage.setItem("mapZoom", "13");
    localStorage.setItem("kabelstreckenVisible", "false"); // legacy, not used for init
    localStorage.setItem("showBaseMapPanel", "false");
    localStorage.setItem("mapLayersVisibility_m12_u484", {
      "system-1": true,
      "system-2": false,
      "system-3": false,
      "system-5": false,
      "system-6": false,
      "system-7": false,
      "system-8": false,
      "system-9": false,
      "system-10": false,
      "system-11": false,
      "system-13": false,
      "system-30": false,
      "system-100": false,
      "system-110": false,
      "system-111": false,
      "system-200": false,
    });
    localStorage.setItem("mapCenter", [53.23938294961826, 8.21434020996094]);
    localStorage.setItem("markerLink", "undefined");
    localStorage.setItem("lastElementType", "marker");
    localStorage.setItem("polylineVisible", "false"); // global legacy
    localStorage.setItem("showAppInfoCard", "false");
    localStorage.setItem("showCoordinateInput", "false");
    localStorage.setItem("showLayersPanel", "false");
  });

  // test steps
  await expect(
    page.locator("div").filter({ hasText: "TALASKabelstreckenULAFGSM" }).nth(3)
  ).toBeVisible();
  await page.getByRole("button", { name: "Layer-Panel ausblenden" }).click();
  await page.getByRole("button", { name: "Layer-Panel einblenden" }).click();
  await expect(
    page.locator("div").filter({ hasText: "TALASKabelstreckenULAFGSM" }).nth(3)
  ).toBeVisible();
  await page.getByRole("button", { name: "Layer-Panel ausblenden" }).click();
  await expect(page.getByRole("button", { name: "Info ausblenden" })).toBeVisible();
  await page.getByRole("button", { name: "Info ausblenden" }).click();
  await page.getByRole("button", { name: "Info einblenden" }).click();
  await expect(page.locator("div").filter({ hasText: "TALAS.Map Version" }).nth(3)).toBeVisible();
  await page.getByRole("button", { name: "Info ausblenden" }).click();
  // Warten, bis der Button-Text wechselt, bevor erneut geklickt wird
  await expect(page.getByRole("button", { name: "Info einblenden" })).toBeVisible({
    timeout: 10000,
  });
  await page.getByRole("button", { name: "Info einblenden" }).click();
  await expect(page.locator("div").filter({ hasText: "TALAS.Map Version" }).nth(3)).toBeVisible();
  await page.getByRole("button", { name: "Koordinatensuche einblenden" }).click();
  await expect(page.locator("form")).toBeVisible();
  await page.getByRole("button", { name: "Koordinatensuche ausblenden" }).click();
  await page.getByRole("button", { name: "Info ausblenden" }).click();
  await page.getByLabel("Marker").click();
  await expect(page.getByText("Station wählenBitte wählen…")).toBeVisible();
  await page.getByRole("combobox").selectOption("50977");
  await page.getByLabel("Marker").click();
  await page.getByRole("combobox").selectOption("50986");
  await page.getByLabel("Marker").click();
  await page.getByLabel("Marker").click();
  await page.getByLabel("Marker").click();
  await page.getByRole("combobox").selectOption("50977");
  await page.getByRole("button", { name: "Karte auf Standardansicht" }).click();
});