nodeMap/playwright/tests/mapcomponent.spec.js

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

// Helper: robust selection for native <select> or custom ARIA comboboxes
async function selectStation(page, value) {
  // Try to find by accessible name first
  let combo = page.getByRole("combobox", { name: /Station wählen/i });
  if (!(await combo.count())) {
    // Fallback: find a container with the label text and locate a select inside
    const container = page.locator("div").filter({ hasText: "Station wählen" }).last();
    const selectInContainer = container.locator("select");
    if (await selectInContainer.count()) {
      combo = selectInContainer.first();
    } else {
      // Final fallback: first visible native select (overlay has only one)
      combo = page.locator("select:visible").first();
    }
  }
  await expect(combo).toBeVisible();

  const isNative = await combo.evaluate(el => el.tagName === "SELECT");
  if (isNative) {
    await expect(combo).toBeEnabled();
    await expect(combo.locator(`option[value="${value}"]`)).toBeAttached();
    await combo.selectOption({ value });
  } else {
    await combo.click();
    await page.getByRole("option", { name: new RegExp(value) }).click();
  }
}

test("MapComponent", async ({ page }) => {
  //  Set initial localStorage BEFORE navigation so the app reads them on load
  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");
    localStorage.setItem("showBaseMapPanel", "false");
    localStorage.setItem(
      "mapLayersVisibility_m12_u484",
      JSON.stringify({
        "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", JSON.stringify([53.23938294961826, 8.21434020996094]));
    localStorage.setItem("markerLink", "undefined");
    localStorage.setItem("lastElementType", "marker");
    localStorage.setItem("polylineVisible", "false");
    localStorage.setItem("showAppInfoCard", "false");
    localStorage.setItem("showCoordinateInput", "false");
    localStorage.setItem("showLayersPanel", "false");
  });

  // 1) Navigate and wait for the map
  await page.goto("http://localhost:3000/?m=12&u=484");
  await page.locator("#map").waitFor({ state: "visible", timeout: 20_000 });

  // 2) Optional: verify a key from localStorage at runtime
  await expect(page.evaluate(() => localStorage.getItem("showLayersPanel"))).resolves.toBe("false");

  // 3) Layer-Panel toggle: expect "einblenden" first (since showLayersPanel=false), then toggle
  await expect(page.getByRole("button", { name: "Layer-Panel einblenden" })).toBeVisible();
  await page.getByRole("button", { name: "Layer-Panel einblenden" }).click();
  await expect(page.getByRole("button", { name: "Layer-Panel ausblenden" })).toBeVisible();
  // 4) Collapse again to restore state
  await page.getByRole("button", { name: "Layer-Panel ausblenden" }).click();

  // 5) Info-Card toggle: start hidden -> show -> hide -> show again
  await expect(page.getByRole("button", { name: "Info einblenden" })).toBeVisible();
  await page.getByRole("button", { name: "Info einblenden" }).click();
  await expect(page.getByRole("button", { name: "Info ausblenden" })).toBeVisible();
  await page.getByRole("button", { name: "Info ausblenden" }).click();
  await expect(page.getByRole("button", { name: "Info einblenden" })).toBeVisible();
  await page.getByRole("button", { name: "Info einblenden" }).click();
  await expect(page.locator("div").filter({ hasText: "TALAS.Map Version" }).nth(3)).toBeVisible();

  // 6) Koordinatensuche toggle
  await page.getByRole("button", { name: "Koordinatensuche einblenden" }).click();
  await expect(page.locator("form")).toBeVisible();
  await page.getByRole("button", { name: "Koordinatensuche ausblenden" }).click();

  // 7) Marker setzen und Stationen wählen
  await page.getByLabel("Marker").click();
  // ...existing code...
  // ...existing code...
  await expect(page.getByText("Station wählen")).toBeVisible();
  const select = page.locator("select");
  await expect(select).toBeVisible();
  await expect(select).toBeEnabled();
  // Prüfe, ob die gewünschten Optionen existieren (attached)
  await expect(select.locator('option[value="50977"]')).toBeAttached();
  await expect(select.locator('option[value="50986"]')).toBeAttached();

  // ----------------------------------------------
  await selectStation(page, "50977");
  await page.getByLabel("Marker").click();
  await selectStation(page, "50986");
  await page.getByLabel("Marker").click();
  await page.getByLabel("Marker").click();
  await page.getByLabel("Marker").click();
  await selectStation(page, "50977");
  await page.getByRole("button", { name: "Karte auf Standardansicht" }).click();
  //minusIcon
  await page.getByTestId("zoom-out").click();
  //wait 3 seconds
  // plusIcon
  await page.getByTestId("zoom-in").click(); //plus
});

/* Powershell Befehl ->das führt langsam aus mit 1 Sekunde Pause zwischen den Aktionen
$env:PW_HEADED=1; $env:PW_SLOWMO=1000; npx playwright test
*/