polylines tooltip content

__tests__/unit/components/DataSheet.test.js

@@ -0,0 +1,82 @@
+// __tests__/components/DataSheet.test.js
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+import DataSheet from "../../components/DataSheet";
+import { RecoilRoot } from "recoil";
+import * as Recoil from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { gisStationsStaticDistrictState } from "../../store/atoms/gisStationState";
+import { gisSystemStaticState } from "../../store/atoms/gisSystemState";
+import { mapLayersState } from "../../store/atoms/mapLayersState";
+import { selectedAreaState } from "../../store/atoms/selectedAreaState";
+import { zoomTriggerState } from "../../store/atoms/zoomTriggerState";
+import { poiLayerVisibleState } from "../../store/atoms/poiLayerVisibleState";
+
+// Stelle sicher, dass alle notwendigen Atome korrekt gemockt sind
+jest.mock("../../store/atoms/gisStationState", () => ({
+  gisStationState: {
+    subscribe: jest.fn(),
+    getSnapshot: jest.fn(() => []), // Mocked return value
+  },
+}));
+
+jest.mock("../../store/atoms/gisSystemState", () => ({
+  gisSystemStaticState: {
+    subscribe: jest.fn(),
+    getSnapshot: jest.fn(() => []), // Mocked return value
+  },
+}));
+
+describe("DataSheet Component", () => {
+  //--------------------------------------------------------------------------------
+  it("renders the basic fields and initial station/system listings", async () => {
+    render(
+      <RecoilRoot>
+        <DataSheet />
+      </RecoilRoot>
+    );
+
+    // Waiting for asynchronous tasks to complete
+    await waitFor(() => {
+      // Check if the specific elements are present after data processing
+      expect(screen.getByRole("combobox")).toBeInTheDocument();
+      expect(screen.getByLabelText("POIs")).toBeInTheDocument();
+      expect(screen.getByRole("option", { name: "Station wählen" })).toBeInTheDocument();
+    });
+
+    // Optionally print out the full DOM for debugging
+    screen.debug();
+  });
+  //--------------------------------------------------------------------------------
+  test("should open dropdown on click", async () => {
+    render(
+      <RecoilRoot>
+        <DataSheet />
+      </RecoilRoot>
+    );
+    const combobox = screen.getByRole("combobox");
+    userEvent.click(combobox);
+    // Überprüfe, ob die Dropdown-Optionen angezeigt werden
+    expect(screen.getByRole("option", { name: "Station wählen" })).toBeInTheDocument();
+  });
+
+  //--------------------------------------------------------------------------------
+  test("should toggle checkbox", async () => {
+    render(
+      <RecoilRoot>
+        <DataSheet />
+      </RecoilRoot>
+    );
+    const checkbox = screen.getByLabelText("POIs");
+    // Stelle sicher, dass die Checkbox nicht angekreuzt ist
+    expect(checkbox).not.toBeChecked();
+    // Klicke auf die Checkbox
+    userEvent.click(checkbox);
+    // Jetzt sollte sie angekreuzt sein
+    expect(checkbox).toBeChecked();
+  });
+
+  //--------------------------------------------------------------------------------
+});

__tests__/unit/components/MapComponent.test.js

@@ -0,0 +1,89 @@
+// __tests__/MapComponent.test.js
+
+// Ein einfacher Testfall, der sicherstellt, dass die Addition korrekt ist
+test("simple addition", () => {
+  const a = 1;
+  const b = 2;
+  const c = a + b;
+  expect(c).toBe(3); // Überprüft, ob c gleich 3 ist
+});
+
+//import L from "leaflet";
+//import { checkOverlappingMarkers } from "../utils/mapUtils"; // Passe den Pfad entsprechend an
+
+/* describe("checkOverlappingMarkers", () => {
+  let map;
+
+  beforeEach(() => {
+    // Erstelle eine neue Leaflet-Karte für jeden Test
+    map = L.map(document.createElement("div"));
+  });
+
+  it("should group markers by coordinates and add plus icons for overlapping markers", () => {
+    // Erstelle einige Beispielmarker
+    const markers = [
+      L.marker([51.505, -0.09]),
+      L.marker([51.505, -0.09]),
+      L.marker([51.51, -0.1]),
+    ];
+
+    const plusIcon = L.divIcon({ className: "plus-icon" });
+
+    // Rufe die Funktion auf
+    checkOverlappingMarkers(map, markers, plusIcon);
+
+    // Überprüfe, dass die Marker zu Gruppen hinzugefügt wurden
+    const overlappingGroups = map._layers;
+    expect(Object.keys(overlappingGroups).length).toBeGreaterThan(0);
+
+    // Überprüfe, dass die Plus-Marker hinzugefügt wurden
+    const plusMarkers = Object.values(overlappingGroups).filter(
+      (layer) =>
+        layer.options.icon &&
+        layer.options.icon.options.className === "plus-icon"
+    );
+    expect(plusMarkers.length).toBeGreaterThan(0);
+  });
+
+  it("should handle non-array markers argument gracefully", () => {
+    const plusIcon = L.divIcon({ className: "plus-icon" });
+
+    // Rufe die Funktion mit einem ungültigen Argument auf
+    checkOverlappingMarkers(map, null, plusIcon);
+
+    // Stelle sicher, dass keine Marker hinzugefügt wurden
+    const layers = map._layers;
+    expect(Object.keys(layers).length).toBe(0);
+  });
+
+  it("should not add plus markers if there are no overlaps", () => {
+    // Erstelle einige Beispielmarker
+    const markers = [
+      L.marker([51.505, -0.09]),
+      L.marker([51.51, -0.1]),
+      L.marker([51.52, -0.12]),
+    ];
+
+    const plusIcon = L.divIcon({ className: "plus-icon" });
+
+    // Rufe die Funktion auf
+    checkOverlappingMarkers(map, markers, plusIcon);
+
+    // Überprüfe, dass keine Plus-Marker hinzugefügt wurden
+    const plusMarkers = Object.values(map._layers).filter(
+      (layer) =>
+        layer.options.icon &&
+        layer.options.icon.options.className === "plus-icon"
+    );
+    expect(plusMarkers.length).toBe(0);
+  });
+}); */
+/*
+In diesem Test:
+
+Wird eine neue Leaflet-Karte vor jedem Test erstellt.
+checkOverlappingMarkers wird aufgerufen, um zu überprüfen, ob die Funktion die Marker richtig gruppiert und Plus-Icons für überlappende Marker hinzufügt.
+Der Test überprüft auch, ob die Funktion ungültige Argumente (wie null für Marker) korrekt behandelt.
+Es wird sichergestellt, dass keine Plus-Marker hinzugefügt werden, wenn keine Überlappungen vorliegen.
+Stelle sicher, dass du die Pfade und Importe entsprechend deiner Projektstruktur anpasst.
+*/

__tests__/unit/components/gisPolylines/icons/CircleIcon.test.js

@@ -0,0 +1,40 @@
+// __tests__/components/gisPolylines/icons/CircleIcon.test.js
+jest.mock("leaflet", () => {
+  const actualLeaflet = jest.requireActual("leaflet");
+  return {
+    ...actualLeaflet,
+    DivIcon: jest.fn().mockImplementation((options) => ({
+      ...options,
+      options,
+      _leaflet_id: Math.random(),
+    })),
+  };
+});
+
+import L from "leaflet";
+import CircleIcon from "../../../components/gisPolylines/icons/CircleIcon";
+
+describe("CircleIcon", () => {
+  test("should be a Leaflet divIcon with correct properties", () => {
+    // console.log("CircleIcon options:", CircleIcon.options);
+    expect(CircleIcon).toEqual(
+      expect.objectContaining({
+        options: expect.objectContaining({
+          className: "custom-circle-icon leaflet-marker-icon",
+          html: '<div style="background-color:gray; width:10px; height:10px; border-radius:50%; border: solid black 1px;"></div>',
+          iconSize: [25, 25],
+          iconAnchor: [5, 5],
+        }),
+      })
+    );
+    expect(CircleIcon.options.className).toContain("custom-circle-icon");
+    expect(CircleIcon.options.html).toContain("<div");
+    expect(CircleIcon.options.html).toContain("background-color:gray");
+    expect(CircleIcon.options.html).toContain("border-radius:50%");
+    expect(CircleIcon.options.html).toContain("width:10px");
+    expect(CircleIcon.options.html).toContain("height:10px");
+    expect(CircleIcon.options.html).toContain("border: solid black 1px");
+    expect(CircleIcon.options.iconSize).toEqual([25, 25]);
+    expect(CircleIcon.options.iconAnchor).toEqual([5, 5]);
+  });
+});

__tests__/unit/components/gisPolylines/icons/EndIcon.test.js

@@ -0,0 +1,24 @@
+// __tests__/components/gisPolylines/icons/EndIcon.test.js
+jest.mock("leaflet", () => {
+  const actualLeaflet = jest.requireActual("leaflet");
+  return {
+    ...actualLeaflet,
+    DivIcon: jest.fn().mockImplementation((options) => ({
+      ...options,
+      options,
+      _leaflet_id: Math.random(),
+    })),
+  };
+});
+
+import L from "leaflet";
+import EndIcon from "../../../../components/gisPolylines/icons/EndIcon";
+//console.log("console log EndIcon: ", EndIcon);
+describe("endIcon", () => {
+  test("should be a custom-end-icon with correct HTML and styles", () => {
+    expect(EndIcon.options.className).toBe("custom-end-icon");
+    expect(EndIcon.options.html).toBe("<div style='background-color: gray; width: 14px; height: 14px; border: solid black 2px;'></div>");
+    expect(EndIcon.options.iconSize).toEqual([14, 14]);
+    expect(EndIcon.options.iconAnchor).toEqual([7, 7]);
+  });
+});

__tests__/unit/components/gisPolylines/icons/StartIcon.test.js

@@ -0,0 +1,41 @@
+// __tests__/components/gisPolylines/icons/StartIcon.test.js
+jest.mock("leaflet", () => {
+  const actualLeaflet = jest.requireActual("leaflet");
+  return {
+    ...actualLeaflet,
+    DivIcon: jest.fn().mockImplementation((options) => ({
+      ...options,
+      options,
+      _leaflet_id: Math.random(),
+      _createIcon: jest.fn(),
+      _createImg: jest.fn(),
+      _getIconUrl: jest.fn(),
+      _initHooks: [],
+      _initHooksCalled: true,
+      _setIconStyles: jest.fn(),
+      callInitHooks: jest.fn(),
+      createIcon: jest.fn(),
+      createShadow: jest.fn(),
+      initialize: jest.fn(),
+    })),
+  };
+});
+
+import L from "leaflet";
+import StartIcon from "../../../../../components/gisPolylines/icons/StartIcon";
+
+describe("StartIcon", () => {
+  test("should be a Leaflet divIcon with correct properties", () => {
+    //console.log("StartIcon options:", StartIcon.options);
+    expect(StartIcon).toEqual(
+      expect.objectContaining({
+        options: expect.objectContaining({
+          className: "custom-start-icon",
+          html: expect.stringContaining("<svg"),
+          iconSize: [18, 18],
+          iconAnchor: [9, 10],
+        }),
+      })
+    );
+  });
+});