test(ui): replace time-based waits in NZ popup-fit regression tests

[comnam90]

Spun out of code review on #103 (item #9).

Context

The two NZ popup-fit regression tests in `tests/ui.spec.ts` use `page.waitForTimeout(500)` and `page.waitForTimeout(800)` after triggering the popup, to let autoPan / setView animations settle before measuring the bounding box. These will flake on slow CI hardware.

Proposed fix

Replace the timeouts with a layout-stable signal — for example:

• `page.waitForFunction(...)` that compares the popup's bounding rect across two frames to confirm it stopped moving.
• Or listen for Leaflet's `moveend` / `autopanend` via `page.evaluate` and resolve a promise when it fires.

Acceptance

• No `page.waitForTimeout(...)` calls in the NZ regression tests
• Tests still pass deterministically across all five Playwright projects

[TheDerbiedOne]

I took the two NZ popup-fit regression tests in tests/ui.spec.ts and replaced the fixed waitForTimeout(500/800) waits with a state-based “layout is stable” signal.

Approach:

• After the popup is visible, poll popup.getBoundingClientRect() until it’s stable for a few consecutive samples (tolerance-based), then measure bounding box vs viewport.
• This keeps the intent (“let autoPan / setView settle”) without time-based flakiness on slow CI.

Patch (unified diff):

diff --git a/tests/ui.spec.ts b/tests/ui.spec.ts
index 06c0c88..c87fd9a 100644
--- a/tests/ui.spec.ts
+++ b/tests/ui.spec.ts
@@ -1,7 +1,48 @@
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect, type Locator, type Page } from '@playwright/test';
 
 const BASE_URL = process.env.BASE_URL || 'http://localhost:8788';
 
+type DomRect = { x: number; y: number; width: number; height: number };
+
+async function waitForStableRect(
+  locator: Locator,
+  opts?: { timeoutMs?: number; stableSamples?: number; tolerancePx?: number }
+) {
+  const timeoutMs = opts?.timeoutMs ?? 2000;
+  const stableSamples = opts?.stableSamples ?? 3;
+  const tolerancePx = opts?.tolerancePx ?? 0.5;
+
+  let last: DomRect | null = null;
+  let stable = 0;
+
+  await expect
+    .poll(
+      async () => {
+        const rect = await locator.evaluate((el) => {
+          const r = el.getBoundingClientRect();
+          return { x: r.x, y: r.y, width: r.width, height: r.height };
+        });
+
+        if (
+          last &&
+          Math.abs(rect.x - last.x) <= tolerancePx &&
+          Math.abs(rect.y - last.y) <= tolerancePx &&
+          Math.abs(rect.width - last.width) <= tolerancePx &&
+          Math.abs(rect.height - last.height) <= tolerancePx
+        ) {
+          stable += 1;
+        } else {
+          stable = 0;
+        }
+
+        last = rect;
+        return stable;
+      },
+      { timeout: timeoutMs }
+    )
+    .toBeGreaterThanOrEqual(stableSamples);
+}
+
 test.describe('Veeam Data Cloud Services Map - UI Tests', () => {
   
   test.beforeEach(async ({ page }) => {
@@ -117,7 +158,7 @@ test.describe('Veeam Data Cloud Services Map - UI Tests', () => {
       const popup = page.locator('.leaflet-popup');
       await expect(popup).toBeVisible({ timeout: 5000 });
       // Let autoPan animation settle before measuring.
-      await page.waitForTimeout(500);
+      await waitForStableRect(popup);
 
       const box = await popup.boundingBox();
       const vp = page.viewportSize();
@@ -141,7 +182,7 @@ test.describe('Veeam Data Cloud Services Map - UI Tests', () => {
       const popup = page.locator('.leaflet-popup');
       await expect(popup).toBeVisible({ timeout: 5000 });
       // Let the zoom-escalation setView + autoPan settle before measuring.
-      await page.waitForTimeout(800);
+      await waitForStableRect(popup);
 
       const box = await popup.boundingBox();
       const vp = page.viewportSize();