docs: Kabelüberwachung Overlay für Events (Abgleich, TDR und RSL) Messung

2025-08-13 16:09:55 +02:00
parent 7bc13505b2
commit f1ba9d4e4d
8 changed files with 126 additions and 8 deletions
--- a/tests/kabelueberwachung-overlays.spec.ts
+++ b/tests/kabelueberwachung-overlays.spec.ts
@@ -0,0 +1,94 @@
+import { test, expect, Page, Locator } from "@playwright/test";
+
+// Helpers
+function cardByCableName(page: Page, name: string): Locator {
+  // Find a module card that contains the visible cable name text
+  return page.locator("div.relative.bg-gray-300", { hasText: name }).first();
+}
+
+function slotOverlayIn(card: Locator): Locator {
+  // Slot overlay is the only element with absolute inset-0 inside the card
+  return card.locator("div.absolute.inset-0");
+}
+
+async function setDeviceEvents(
+  page: Page,
+  { ksx, ksy, ksz }: { ksx?: number[]; ksy?: number[]; ksz?: number[] }
+) {
+  await page.evaluate(
+    ({ ksx, ksy, ksz }) => {
+      interface W {
+        loopMeasurementEvent?: number[];
+        tdrMeasurementEvent?: number[];
+        alignmentEvent?: number[];
+      }
+      const w = window as unknown as W;
+      if (ksx) w.loopMeasurementEvent = ksx;
+      if (ksy) w.tdrMeasurementEvent = ksy;
+      if (ksz) w.alignmentEvent = ksz;
+    },
+    { ksx, ksy, ksz }
+  );
+}
+
+// Notes:
+// - On /kabelueberwachung, the global overlay is hidden and each module shows its own overlay when active.
+// - DeviceEventsBridge polls the window arrays every 2 seconds.
+// - Dev mode serves /api/cpl/kabelueberwachungAPIHandler which initializes those arrays from mocks.
+
+test.describe("Kabelüberwachung per-slot overlays", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:3000/kabelueberwachung");
+    // Ensure page has rendered modules
+    await expect(page.getByText("Rack 1")).toBeVisible();
+    // Wait a moment for initial device arrays and first poll
+    await page.waitForTimeout(2500);
+  });
+
+  test("only active slot is blocked; others remain usable", async ({
+    page,
+  }) => {
+    const card1 = cardByCableName(page, "Kabel 1"); // slot 1 (index 0) has events in mock
+    const card2 = cardByCableName(page, "Kabel 2"); // slot 2 (index 1) is inactive in mock
+
+    // 1) Initial: overlay visible on Kabel 1, not on Kabel 2
+    await expect(slotOverlayIn(card1)).toBeVisible();
+    await expect(slotOverlayIn(card2)).toHaveCount(0);
+
+    // 2) Interact with Kabel 2 while Kabel 1 is blocked
+    await expect(card2.getByRole("button", { name: "ISO" })).toBeVisible();
+    await card2.getByRole("button", { name: "ISO" }).click();
+
+    // ISO modal should open
+    await expect(page.getByText("Isolationswiderstand")).toBeVisible();
+
+    // Close modal with Escape
+    await page.keyboard.press("Escape");
+    await expect(page.getByText("Isolationswiderstand")).toHaveCount(0);
+
+    // 3) Dynamically switch overlay from Kabel 1 to Kabel 2
+    const zero = new Array(32).fill(0);
+    const ksx = zero.slice();
+    ksx[1] = 1; // activate Schleife for slot 2
+    await setDeviceEvents(page, { ksx });
+
+    // Wait for bridge poll and UI update
+    await page.waitForTimeout(2500);
+
+    await expect(slotOverlayIn(card1)).toHaveCount(0);
+    await expect(slotOverlayIn(card2)).toBeVisible();
+
+    // Percentage text should show in the overlay (e.g., "12%")
+    await expect(slotOverlayIn(card2).getByText(/%$/)).toBeVisible();
+  });
+
+  test("global overlay is not shown on kabelueberwachung page", async ({
+    page,
+  }) => {
+    // A full-screen overlay would be fixed inset-0 at document level; ensure none
+    const globalOverlay = page.locator(
+      'div.fixed.inset-0:has-text("Bitte warten…")'
+    );
+    await expect(globalOverlay).toHaveCount(0);
+  });
+});