test: Überprüfung der Kartenladung, Kontextmenü und Geräte-URL-Erreichbarkeit

- Stellt sicher, dass die Karte erfolgreich geladen wird und sichtbar ist.
- Simuliert Rechtsklick auf Marker und überprüft, ob das Kontextmenü erscheint.
- Validiert die Sichtbarkeit des Menüeintrags "Station öffnen (Tab)" im Kontextmenü.
- Testet, ob ein Klick auf den Menüeintrag "Station öffnen (Tab)" , dass das  Gerät in einem Tab öffnet.
- Überprüft, ob die URL des geöffneten Geräts den HTTP-Status 200 zurückgibt (erreichbar).
- Fügt Logs und Screenshots zur Fehlerbehebung hinzu.

components/useMapContextMenu.js

@@ -1,5 +1,6 @@
+// /components/useMapContextMenu.js
 import { toast } from "react-toastify";
-import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Utility-Funktionen
+import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Assuming these are imported correctly
 
 const zoomInCallback = (e, map) => {
   zoomIn(e, map);
@@ -12,84 +13,10 @@ const zoomOutCallback = (map) => {
 const centerHereCallback = (e, map) => {
   centerHere(e, map);
 };
-
+// Funktion zum Anzeigen der Koordinaten
-// Hilfsfunktion zur Umwandlung in das DMS-Format
-const toDMS = (decimal, isLat) => {
-  const direction = decimal >= 0 ? (isLat ? "N" : "E") : isLat ? "S" : "W";
-  const absDecimal = Math.abs(decimal);
-  const degrees = Math.floor(absDecimal);
-  const minutesDecimal = (absDecimal - degrees) * 60;
-  const minutes = Math.floor(minutesDecimal);
-  const seconds = ((minutesDecimal - minutes) * 60).toFixed(1);
-  return `${degrees}°${minutes}'${seconds}"${direction}`;
-};
-
-// Funktion zum Anzeigen und Kopieren der Koordinaten
 const showCoordinates = (e) => {
-  const latDMS = toDMS(e.latlng.lat, true);
+  alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
-  const lngDMS = toDMS(e.latlng.lng, false);
-  const coordinates = `${latDMS} ${lngDMS}`;
-
-  // Überprüfen, ob das Clipboard-API unterstützt wird
-  if (navigator.clipboard && navigator.clipboard.writeText) {
-    navigator.clipboard
-      .writeText(coordinates)
-      .then(() => {
-        toast.success("Koordinaten wurden kopiert: " + coordinates, {
-          position: "top-center",
-          autoClose: 3000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-        });
-      })
-      .catch((err) => {
-        toast.error("Fehler beim Kopieren der Koordinaten!", {
-          position: "top-center",
-          autoClose: 3000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-        });
-        console.error("Fehler beim Kopieren: ", err);
-      });
-  } else {
-    // Fallback für ältere Browser
-    const textArea = document.createElement("textarea");
-    textArea.value = coordinates;
-    document.body.appendChild(textArea);
-    textArea.select();
-    try {
-      document.execCommand("copy");
-      toast.success("Koordinaten wurden kopiert: " + coordinates, {
-        position: "top-center",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      });
-    } catch (err) {
-      toast.error("Fehler beim Kopieren der Koordinaten!", {
-        position: "top-center",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      });
-      console.error("Fehler beim Kopieren: ", err);
-    }
-    document.body.removeChild(textArea);
-  }
 };
-
 // Kontextmenü Callback für "POI hinzufügen"
 const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => {
   const editMode = localStorage.getItem("editMode") === "true";
@@ -116,57 +43,43 @@ export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, h
   hasRights = editMode ? hasRights : undefined;
 
   if (!menuItemAdded && map && map.contextmenu) {
-    // Event-Listener für Rechtsklick
+    map.contextmenu.addItem({
-    map.on("contextmenu", (e) => {
+      text: "Koordinaten anzeigen",
-      // Entferne alle vorherigen dynamischen Einträge
+      icon: "img/not_listed_location.png",
-      map.contextmenu.removeAllItems();
+      callback: showCoordinates,
-
-      // Koordinaten dynamisch anzeigen
-      const latDMS = toDMS(e.latlng.lat, true);
-      const lngDMS = toDMS(e.latlng.lng, false);
-      const coordinates = `${latDMS} ${lngDMS}`;
-
-      map.contextmenu.addItem({
-        text: coordinates,
-        icon: "img/not_listed_location.png",
-        callback: () => showCoordinates(e),
-      });
-
-      map.contextmenu.addItem({ separator: true });
-
-      // Zoom-In
-      map.contextmenu.addItem({
-        text: "Reinzoomen",
-        icon: "img/zoom_in.png",
-        callback: (e) => zoomInCallback(e, map),
-      });
-
-      // Zoom-Out
-      map.contextmenu.addItem({
-        text: "Rauszoomen",
-        icon: "img/zoom_out.png",
-        callback: () => zoomOutCallback(map),
-      });
-
-      // Hier zentrieren
-      map.contextmenu.addItem({
-        text: "Hier zentrieren",
-        icon: "img/center_focus.png",
-        callback: (e) => centerHereCallback(e, map),
-      });
-
-      // POI hinzufügen (wenn Bearbeitungsmodus aktiviert ist)
-      if (editMode) {
-        map.contextmenu.addItem({ separator: true });
-        map.contextmenu.addItem({
-          text: "POI hinzufügen",
-          icon: "img/add_station.png",
-          className: "background-red",
-          callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates),
-        });
-      }
     });
 
+    map.contextmenu.addItem({ separator: true });
+
+    map.contextmenu.addItem({
+      text: "Reinzoomen",
+      icon: "img/zoom_in.png",
+      callback: (e) => zoomInCallback(e, map),
+    });
+
+    map.contextmenu.addItem({
+      text: "Rauszoomen",
+      icon: "img/zoom_out.png",
+      callback: () => zoomOutCallback(map),
+    });
+
+    map.contextmenu.addItem({
+      text: "Hier zentrieren",
+      icon: "img/center_focus.png",
+      callback: (e) => centerHereCallback(e, map),
+    });
+
+    // wenn localStorage Variable editMode true ist, dann wird der Button "POI hinzufügen" angezeigt
+    if (editMode) {
+      map.contextmenu.addItem({ separator: true });
+      map.contextmenu.addItem({
+        text: "POI hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates),
+      });
+    }
+
     setMenuItemAdded(true);
   }
 };

cypress.config.js

@@ -3,8 +3,9 @@ const { defineConfig } = require("cypress");
 module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      // Node-Event-Listeners hier konfigurieren
     },
+    experimentalStudio: true, // Studio aktivieren
   },
 
   component: {

cypress/e2e/contextmenuDeviceInNewTab.cy.js

@@ -0,0 +1,62 @@
+describe("contextmenuTest", () => {
+  it("tests contextmenuTest", () => {
+    cy.log("Test startet jetzt");
+
+    // 1. Viewport einstellen
+    cy.viewport(1920, 1080);
+    cy.log("Viewport eingestellt auf 1920x1080");
+
+    // 2. Seite besuchen
+    cy.visit("http://10.10.0.70:3000/?m=12&u=484");
+    cy.log("Seite geöffnet");
+
+    // 3. Sicherstellen, dass die Karte geladen ist
+    cy.get("#map", { timeout: 15000 }).should("be.visible");
+    cy.log("Karte geladen");
+
+    // 4. Wartezeit zum Stabilisieren der Karte
+    cy.wait(2000);
+
+    // 5. Marker suchen und Rechtsklick simulieren
+    cy.get('img[src*="img/icons/marker-icon-20.svg"]') // Marker suchen
+      .filter(":visible") // Nur sichtbare Marker
+      .first() // Ersten Marker auswählen
+      .scrollIntoView() // Marker in den sichtbaren Bereich scrollen
+      .should("be.visible") // Sicherstellen, dass Marker sichtbar ist
+      .trigger("mouseover") // Mouseover simulieren
+      .wait(500) // Wartezeit nach Mouseover
+      .rightclick({ force: true }); // Rechtsklick auf den Marker
+    cy.log("Rechtsklick auf Marker ausgeführt");
+
+    // Screenshot nach Rechtsklick zum Debugging
+    cy.screenshot("nach-rechtsklick");
+
+    // 6. Kontextmenü prüfen mit explizitem Selektor
+    cy.get(".leaflet-contextmenu-item") // Suche alle Menüeinträge mit der Klasse
+      .contains("Station öffnen (Tab)", { timeout: 5000 }) // Prüfe Text innerhalb des Eintrags
+      .should("be.visible"); // Sichtbarkeit sicherstellen
+    cy.log("Menüeintrag gefunden");
+
+    // 7. URL abfangen und testen, bevor der Tab geöffnet wird
+    const targetUrl = "http://10.10.0.70/talas5/devices/cpl.aspx?ver=35&kue=24&id=50922";
+
+    // HTTP-Anfrage zur Überprüfung des Status
+    cy.request(targetUrl).then((response) => {
+      expect(response.status).to.eq(200); // Erwartet HTTP 200 OK
+      cy.log("URL ist erreichbar, Status 200");
+    });
+
+    // 8. Menüeintrag auswählen (öffnet den neuen Tab)
+    cy.get(".leaflet-contextmenu-item") // Explizit Menüeintrag mit Klasse auswählen
+      .contains("Station öffnen (Tab)")
+      .click(); // Menüeintrag anklicken
+    cy.log("Menüeintrag ausgewählt");
+
+    // 9. Klick auf die Karte, um Kontextmenü zu schließen
+    cy.get("#map").click(100, 100); // Klick auf eine leere Stelle
+    cy.log("Kontextmenü geschlossen");
+
+    // 10. Optionaler Screenshot nach Abschluss
+    cy.screenshot("test-abgeschlossen");
+  });
+});

cypress/support/e2e.js

@@ -14,7 +14,14 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')
+const app = window.top;
+if (!app.document.head.querySelector("[data-hide-command-log-request]")) {
+  const style = app.document.createElement("style");
+  style.innerHTML = ".command-name-request, .command-name-xhr { display: none }";
+  style.setAttribute("data-hide-command-log-request", "");
+  app.document.head.appendChild(style);
+}