WIP: Jest und Cypress Test

__mocks__/leaflet.js

@@ -0,0 +1,30 @@
+// __mocks__/leaflet.js
+const L = {
+  map: jest.fn(() => ({
+    setView: jest.fn(),
+    on: jest.fn(),
+    remove: jest.fn(),
+    addLayer: jest.fn(),
+    removeLayer: jest.fn(),
+  })),
+  tileLayer: jest.fn(() => ({
+    addTo: jest.fn(),
+  })),
+  LayerGroup: jest.fn(() => ({
+    addTo: jest.fn(),
+    clearLayers: jest.fn(),
+    addLayer: jest.fn(),
+  })),
+  marker: jest.fn(() => ({
+    addTo: jest.fn(),
+    bindPopup: jest.fn(),
+    on: jest.fn(),
+  })),
+  DivIcon: jest.fn(() => ({
+    className: "",
+    html: "",
+    iconSize: [0, 0],
+  })),
+};
+
+export default L;

components/MapComponent.test.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { RecoilRoot } from "recoil";
+import MapComponent from "./MapComponent";
+import { mapLayersState } from "../store/atoms/mapLayersState";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
+import "@testing-library/jest-dom";
+
+describe("MapComponent - TK-Komponenten Tests", () => {
+  test("TK-Komponenten sind sichtbar, wenn Checkbox aktiviert ist", () => {
+    // Initialisiere die Recoil-Atoms
+    const mockState = {
+      TKKomponenten: true, // TK-Komponenten sichtbar
+    };
+
+    render(
+      <RecoilRoot initializeState={({ set }) => set(mapLayersState, mockState)}>
+        <MapComponent />
+      </RecoilRoot>
+    );
+
+    // Stelle sicher, dass die TK-Komponenten sichtbar sind
+    const tkLayer = screen.getByText(/TK-Komponenten/i);
+    expect(tkLayer).toBeInTheDocument();
+  });
+
+  test("TK-Komponenten werden ausgeblendet, wenn Checkbox deaktiviert wird", () => {
+    const mockState = {
+      TKKomponenten: true, // Initial sichtbar
+    };
+
+    render(
+      <RecoilRoot initializeState={({ set }) => set(mapLayersState, mockState)}>
+        <MapComponent />
+      </RecoilRoot>
+    );
+
+    // Simuliere die Checkbox-Interaktion
+    const checkbox = screen.getByRole("checkbox", { name: /TK-Komponenten/i });
+    fireEvent.click(checkbox); // Deaktiviert die Sichtbarkeit
+
+    // Erwartung: TK-Komponenten sind nicht sichtbar
+    expect(checkbox.checked).toBe(false);
+  });
+});

cypress/e2e/spec.cy.js

@@ -1,46 +0,0 @@
-describe("Map Initial Load Test", () => {
-  it("should load the map with the correct center and zoom", () => {
-    // Besuche die Seite, auf der die Karte angezeigt wird
-    cy.visit("http://192.168.10.167:3000/?m=12&u=485");
-
-    // Überprüfe, ob das Kartenelement existiert
-    cy.get("#map").should("be.visible");
-
-    // Überprüfe, ob die Karte das korrekte Zentrum und den korrekten Zoom hat
-    cy.window().then((win) => {
-      const map = win.L.map;
-      const center = map.getCenter();
-      const zoom = map.getZoom();
-
-      expect(center.lat).to.be.closeTo(53.111111, 0.0001);
-      expect(center.lng).to.be.closeTo(8.4625, 0.0001);
-      expect(zoom).to.eq(12);
-    });
-  });
-});
-describe("Map Context Menu Test", () => {
-  it("should show context menu on right click", () => {
-    cy.visit("http://192.168.10.167:3000/?m=12&u=485");
-
-    // Rechte Maustaste auf eine Koordinate in der Karte klicken
-    cy.get("#map").rightclick(400, 300); // Rechtsklick auf eine Position in der Karte
-
-    // Überprüfen, ob das Kontextmenü angezeigt wird
-    cy.contains("Station öffnen (Tab)").should("be.visible");
-  });
-
-  it("should open a new tab when context menu option is clicked", () => {
-    cy.visit("http://192.168.10.167:3000/?m=12&u=485");
-
-    cy.get("#map").rightclick(400, 300);
-
-    cy.contains("Station öffnen (Tab)").click();
-
-    // Testen, ob ein neuer Tab mit dem richtigen Link geöffnet wird
-    cy.window().then((win) => {
-      cy.stub(win, "open").as("windowOpen");
-    });
-
-    cy.get("@windowOpen").should("be.calledWith", "https://example.com"); // Ersetze dies durch die tatsächliche URL
-  });
-});

cypress/e2e/tk-components.cy.js

@@ -0,0 +1,26 @@
+describe("TK-Komponenten", () => {
+  beforeEach(() => {
+    cy.visit("http://10.10.0.70:3000/?m=12&u=484");
+  });
+
+  it("should toggle TK-Komponenten visibility", () => {
+    // Sicherstellen, dass die Checkbox vorhanden und sichtbar ist
+    cy.get("input[type='checkbox'][id='system-10']").should("exist").and("be.visible");
+
+    // Deaktivieren der Checkbox und sicherstellen, dass die Marker verschwinden
+    cy.get("input[type='checkbox'][id='system-10']")
+      .uncheck({ force: true })
+      .then(() => {
+        // Überprüfen, ob keine Marker mehr vorhanden sind
+        cy.get(".leaflet-marker-icon", { timeout: 10000 }).should("not.exist");
+      });
+
+    // Aktivieren der Checkbox und sicherstellen, dass die Marker wieder sichtbar werden
+    cy.get("input[type='checkbox'][id='system-10']")
+      .check({ force: true })
+      .then(() => {
+        // Überprüfen, ob die Marker sichtbar sind
+        cy.get(".leaflet-marker-icon", { timeout: 10000 }).should("be.visible");
+      });
+  });
+});

hooks/layers/useTkComponentsMarkersLayer.test.js

@@ -0,0 +1,17 @@
+import { renderHook } from "@testing-library/react-hooks";
+import useTkComponentsMarkersLayer from "./useTkComponentsMarkersLayer";
+
+jest.mock("leaflet");
+
+describe("useTkComponentsMarkersLayer", () => {
+  it("should initialize markers", () => {
+    const mapMock = { addLayer: jest.fn(), removeLayer: jest.fn() };
+    const omsMock = { addMarker: jest.fn() };
+    const gisSystemStatic = [{ IdSystem: 30, Latitude: 50.0, Longitude: 8.0 }];
+    const priorityConfig = {};
+
+    const { result } = renderHook(() => useTkComponentsMarkersLayer(mapMock, omsMock, gisSystemStatic, priorityConfig));
+
+    expect(result.current).toBeDefined();
+  });
+});

jest.config.js

@@ -1,11 +1,18 @@
 module.exports = {
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
-  testEnvironment: "jest-environment-jsdom",
+  testEnvironment: "jsdom",
+  reporters: ["default", ["jest-junit", { outputDirectory: "./test-results/junit", outputName: "results.xml" }]],
   testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
   transform: {
-    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest", // Unterstützt JS/TS/TSX
   },
+  transformIgnorePatterns: [
+    "node_modules/(?!(leaflet|leaflet.smooth_marker_bouncing)/)", // Leaflet ausgenommen
+  ],
+
   moduleNameMapper: {
-    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy", // Für CSS-Module-Mocking
+    "^leaflet$": "<rootDir>/__mocks__/leaflet.js", // Leaflet Mock hinzufügen
+    "^leaflet.smooth_marker_bouncing$": "<rootDir>/__mocks__/leaflet.smooth_marker_bouncing.js", // Smooth Marker Mock
   },
 };