feat: Plus und Minus Zoom Icons

2025-09-16 12:12:31 +02:00
parent 051dd4c306
commit 31c770f778
14 changed files with 192 additions and 31 deletions
--- a/.env.development
+++ b/.env.development
@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.372
+NEXT_PUBLIC_APP_VERSION=1.1.373
--- a/.env.production
+++ b/.env.production
@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt

 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.372
+NEXT_PUBLIC_APP_VERSION=1.1.373
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "nodemap",
-  "version": "1.1.372",
+  "version": "1.1.373",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "nodemap",
-      "version": "1.1.372",
+      "version": "1.1.373",
      "dependencies": {
        "@emotion/react": "^11.13.3",
        "@emotion/styled": "^11.13.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "nodemap",
-  "version": "1.1.372",
+  "version": "1.1.373",
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
--- a/playwright/tests/mapcomponent.spec.js
+++ b/playwright/tests/mapcomponent.spec.js
@@ -268,3 +268,35 @@ test("mouse wheel zoom updates mapZoom", async ({ page }) => {
  const afterOut = await getZoomFromLocalStorage(page);
  expect(afterOut).toBeLessThan(afterIn);
 });
+
+test("zoom control buttons update mapZoom", async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("currentMapId", "12");
+    localStorage.setItem("currentUserId", "484");
+    localStorage.setItem("mapCenter", JSON.stringify([53.23938294961826, 8.21434020996094]));
+    localStorage.setItem("mapZoom", "10");
+    localStorage.setItem("showAppInfoCard", "false");
+    localStorage.setItem("showCoordinateInput", "false");
+    localStorage.setItem("showLayersPanel", "false");
+    localStorage.setItem("showAreaDropdown", "false");
+  });
+
+  await page.goto("http://localhost:3000/?m=12&u=484");
+  // Wait for Leaflet map and zoom controls
+  await page.locator("#map.leaflet-container").waitFor({ state: "visible", timeout: 20_000 });
+  const zoomInBtn = page.locator(".leaflet-control-zoom-in");
+  const zoomOutBtn = page.locator(".leaflet-control-zoom-out");
+  await expect(zoomInBtn).toBeVisible();
+  await expect(zoomOutBtn).toBeVisible();
+
+  const z0 = await getZoomFromLocalStorage(page);
+  await zoomInBtn.click();
+  await waitForZoomChange(page, z0, "gt");
+  const z1 = await getZoomFromLocalStorage(page);
+  expect(z1).toBeGreaterThan(z0);
+
+  await zoomOutBtn.click();
+  await waitForZoomChange(page, z1, "lt");
+  const z2 = await getZoomFromLocalStorage(page);
+  expect(z2).toBeLessThan(z1);
+});
--- a/reports/junit/playwright.xml
+++ b/reports/junit/playwright.xml
@@ -1,6 +1,6 @@
-<testsuites id="" name="" tests="2" failures="1" skipped="0" errors="0" time="20.996912000000002">
-<testsuite name="mapcomponent.spec.js" timestamp="2025-09-16T09:56:04.986Z" hostname="chromium" tests="2" failures="1" skipped="0" time="25.036" errors="0">
-<testcase name="MapComponent" classname="mapcomponent.spec.js" time="18.789">
+<testsuites id="" name="" tests="3" failures="2" skipped="0" errors="0" time="22.572574">
+<testsuite name="mapcomponent.spec.js" timestamp="2025-09-16T10:11:10.535Z" hostname="chromium" tests="3" failures="2" skipped="0" time="41.545" errors="0">
+<testcase name="MapComponent" classname="mapcomponent.spec.js" time="20.181">
 <failure message="mapcomponent.spec.js:162:5 MapComponent" type="FAILURE">
 <![CDATA[  [chromium] › mapcomponent.spec.js:162:5 › MapComponent ───────────────────────────────────────────

@@ -56,7 +56,54 @@
 ]]>
 </system-out>
 </testcase>
-<testcase name="mouse wheel zoom updates mapZoom" classname="mapcomponent.spec.js" time="6.247">
+<testcase name="mouse wheel zoom updates mapZoom" classname="mapcomponent.spec.js" time="14.824">
+<failure message="mapcomponent.spec.js:239:5 mouse wheel zoom updates mapZoom" type="FAILURE">
+<![CDATA[  [chromium] › mapcomponent.spec.js:239:5 › mouse wheel zoom updates mapZoom ───────────────────────
+
+    TimeoutError: page.waitForFunction: Timeout 10000ms exceeded.
+
+      82 |  */
+      83 | async function waitForZoomChange(page, previousZoom, compareFn) {
+    > 84 |   await page.waitForFunction(
+         |              ^
+      85 |     (prev, cmp) => {
+      86 |       const v = localStorage.getItem("mapZoom");
+      87 |       if (!v) return false;
+        at waitForZoomChange (C:\Users\isa.LTW\Desktop\15.09.2025\NodeMap\15.09.2025 NodeMap V1.1.350\playwright\tests\mapcomponent.spec.js:84:14)
+        at C:\Users\isa.LTW\Desktop\15.09.2025\NodeMap\15.09.2025 NodeMap V1.1.350\playwright\tests\mapcomponent.spec.js:261:9
+
+    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+    ..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\test-failed-1.png
+    ────────────────────────────────────────────────────────────────────────────────────────────────
+
+    attachment #3: video (video/webm) ──────────────────────────────────────────────────────────────
+    ..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\video.webm
+    ────────────────────────────────────────────────────────────────────────────────────────────────
+
+    Error Context: ..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\error-context.md
+]]>
+</failure>
+<system-out>
+<![CDATA[[localStorage snapshot] {
+  mapZoom: [32m'10'[39m,
+  mapCenter: [32m'[53.23938294961826,8.21434020996094]'[39m,
+  showAppInfoCard: [32m'false'[39m,
+  showCoordinateInput: [32m'false'[39m,
+  showLayersPanel: [32m'false'[39m,
+  showAreaDropdown: [32m'false'[39m,
+  currentMapId: [32m'12'[39m,
+  currentUserId: [32m'484'[39m
+}
+
+[[ATTACHMENT|..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\test-failed-1.png]]
+
+[[ATTACHMENT|..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\video.webm]]
+
+[[ATTACHMENT|..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\error-context.md]]
+]]>
+</system-out>
+</testcase>
+<testcase name="zoom control buttons update mapZoom" classname="mapcomponent.spec.js" time="6.54">
 </testcase>
 </testsuite>
 </testsuites>
--- a/test-results/.last-run.json
+++ b/test-results/.last-run.json
@@ -1,6 +1,7 @@
 {
  "status": "failed",
  "failedTests": [
-    "6232baea8c2400610a3b-ecc9849a86ce59ad8482"
+    "6232baea8c2400610a3b-ecc9849a86ce59ad8482",
+    "6232baea8c2400610a3b-3d4c054f3ad171ada4e9"
  ]
 }
--- a/test-results/mapcomponent-MapComponent-chromium/error-context.md
+++ b/test-results/mapcomponent-MapComponent-chromium/error-context.md
@@ -35,25 +35,32 @@
          - button "Marker" [ref=e31] [cursor=pointer]
          - button "Marker" [ref=e32] [cursor=pointer]
          - button "Marker" [ref=e33] [cursor=pointer]
-      - generic [ref=e34]:
-        - link "Leaflet" [ref=e35] [cursor=pointer]:
-          - /url: https://leafletjs.com
-          - img [ref=e36] [cursor=pointer]
-          - text: Leaflet
-        - generic [ref=e40]: "|"
-        - text: © OpenStreetMap contributors
-    - generic [ref=e41]:
-      - button "Marker" [ref=e42] [cursor=pointer]:
-        - img [ref=e43] [cursor=pointer]
-      - button "Koordinatensuche einblenden" [ref=e46] [cursor=pointer]:
-        - img [ref=e47] [cursor=pointer]
-      - button "Bearbeitungsmodus aktivieren" [ref=e49] [cursor=pointer]:
-        - img [ref=e50] [cursor=pointer]
-      - button "Karte auf Standardansicht" [ref=e52] [cursor=pointer]:
-        - img [ref=e53] [cursor=pointer]
-      - button "Layer-Panel einblenden" [active] [ref=e55] [cursor=pointer]:
-        - img [ref=e56] [cursor=pointer]
-      - button "Info einblenden" [ref=e58] [cursor=pointer]:
-        - img [ref=e59] [cursor=pointer]
-  - alert [ref=e61]
+      - generic:
+        - generic:
+          - generic [ref=e34]:
+            - button "Zoom in" [ref=e35] [cursor=pointer]:
+              - generic [ref=e36] [cursor=pointer]: +
+            - button "Zoom out" [ref=e37] [cursor=pointer]:
+              - generic [ref=e38] [cursor=pointer]: −
+          - generic [ref=e39]:
+            - link "Leaflet" [ref=e40] [cursor=pointer]:
+              - /url: https://leafletjs.com
+              - img [ref=e41] [cursor=pointer]
+              - text: Leaflet
+            - generic [ref=e45]: "|"
+            - text: © OpenStreetMap contributors
+    - generic [ref=e46]:
+      - button "Marker" [ref=e47] [cursor=pointer]:
+        - img [ref=e48] [cursor=pointer]
+      - button "Koordinatensuche einblenden" [ref=e51] [cursor=pointer]:
+        - img [ref=e52] [cursor=pointer]
+      - button "Bearbeitungsmodus aktivieren" [ref=e54] [cursor=pointer]:
+        - img [ref=e55] [cursor=pointer]
+      - button "Karte auf Standardansicht" [ref=e57] [cursor=pointer]:
+        - img [ref=e58] [cursor=pointer]
+      - button "Layer-Panel einblenden" [active] [ref=e60] [cursor=pointer]:
+        - img [ref=e61] [cursor=pointer]
+      - button "Info einblenden" [ref=e63] [cursor=pointer]:
+        - img [ref=e64] [cursor=pointer]
+  - alert [ref=e66]
 ```
--- a/test-results/mapcomponent-MapComponent-chromium/test-failed-1.png
+++ b/test-results/mapcomponent-MapComponent-chromium/test-failed-1.png
--- a/test-results/mapcomponent-MapComponent-chromium/video.webm
+++ b/test-results/mapcomponent-MapComponent-chromium/video.webm
--- a/test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/error-context.md
+++ b/test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/error-context.md
@@ -0,0 +1,66 @@
+# Page snapshot
+
+```yaml
+- generic [active] [ref=e1]:
+  - generic [ref=e3]:
+    - generic [ref=e4]:
+      - generic:
+        - generic:
+          - button "Marker" [ref=e5] [cursor=pointer]
+          - button "Marker" [ref=e6] [cursor=pointer]
+          - button "Marker" [ref=e7] [cursor=pointer]
+          - button "Marker" [ref=e8] [cursor=pointer]
+          - button "Marker" [ref=e9] [cursor=pointer]
+          - button "Marker" [ref=e10] [cursor=pointer]
+          - button "Marker" [ref=e11] [cursor=pointer]
+          - button "Marker" [ref=e12] [cursor=pointer]
+          - button "Marker" [ref=e13] [cursor=pointer]
+          - button "Marker" [ref=e14] [cursor=pointer]
+          - button "Marker" [ref=e15] [cursor=pointer]
+          - button "Marker" [ref=e16] [cursor=pointer]
+          - button "Marker" [ref=e17] [cursor=pointer]
+          - button "Marker" [ref=e18] [cursor=pointer]
+          - button "Marker" [ref=e19] [cursor=pointer]
+          - button "Marker" [ref=e20] [cursor=pointer]
+          - button "Marker" [ref=e21] [cursor=pointer]
+          - button "Marker" [ref=e22] [cursor=pointer]
+          - button "Marker" [ref=e23] [cursor=pointer]
+          - button "Marker" [ref=e24] [cursor=pointer]
+          - button "Marker" [ref=e25] [cursor=pointer]
+          - button "Marker" [ref=e26] [cursor=pointer]
+          - button "Marker" [ref=e27] [cursor=pointer]
+          - button "Marker" [ref=e28] [cursor=pointer]
+          - button "Marker" [ref=e29] [cursor=pointer]
+          - button "Marker" [ref=e30] [cursor=pointer]
+          - button "Marker" [ref=e31] [cursor=pointer]
+          - button "Marker" [ref=e32] [cursor=pointer]
+          - button "Marker" [ref=e33] [cursor=pointer]
+      - generic:
+        - generic:
+          - generic [ref=e34]:
+            - button "Zoom in" [ref=e35] [cursor=pointer]:
+              - generic [ref=e36] [cursor=pointer]: +
+            - button "Zoom out" [ref=e37] [cursor=pointer]:
+              - generic [ref=e38] [cursor=pointer]: −
+          - generic [ref=e39]:
+            - link "Leaflet" [ref=e40] [cursor=pointer]:
+              - /url: https://leafletjs.com
+              - img [ref=e41] [cursor=pointer]
+              - text: Leaflet
+            - generic [ref=e45]: "|"
+            - text: © OpenStreetMap contributors
+    - generic [ref=e46]:
+      - button "Marker" [ref=e47] [cursor=pointer]:
+        - img [ref=e48] [cursor=pointer]
+      - button "Koordinatensuche einblenden" [ref=e51] [cursor=pointer]:
+        - img [ref=e52] [cursor=pointer]
+      - button "Bearbeitungsmodus aktivieren" [ref=e54] [cursor=pointer]:
+        - img [ref=e55] [cursor=pointer]
+      - button "Karte auf Standardansicht" [ref=e57] [cursor=pointer]:
+        - img [ref=e58] [cursor=pointer]
+      - button "Layer-Panel einblenden" [ref=e60] [cursor=pointer]:
+        - img [ref=e61] [cursor=pointer]
+      - button "Info einblenden" [ref=e63] [cursor=pointer]:
+        - img [ref=e64] [cursor=pointer]
+  - alert [ref=e66]
+```
--- a/test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/test-failed-1.png
+++ b/test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/test-failed-1.png
--- a/test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/video.webm
+++ b/test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/video.webm
--- a/utils/initializeMap.js
+++ b/utils/initializeMap.js
@@ -125,6 +125,7 @@ export const initializeMap = (
      zoom: mapZoom,
      minZoom: minZoom,
      maxZoom: maxZoom,
+      // Disable default position; we'll add our own control at bottom-right
      zoomControl: false,
      dragging: true,
      contextmenu: true,
@@ -142,6 +143,13 @@ export const initializeMap = (

  initMap.dragging.enable();

+  // Add visible +/- zoom control bottom-right (playwright-friendly)
+  try {
+    L.control
+      .zoom({ position: "bottomright" })
+      .addTo(initMap);
+  } catch (_) {}
+
  L.tileLayer(tileLayerUrl, {
    attribution: "&copy; OpenStreetMap contributors",
    tileSize: 256,