WIP: Jest und Cypress Test

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);
+  });
+});