test(panels): exercise debounced resize listener

Author: koala73

src/app/debounced-resize-listener.ts

@@ -0,0 +1,22 @@
+import { debounce } from '@/utils/debounce';
+
+export type DebouncedResizeListener = (() => void) & { cancel(): void };
+
+export function addDebouncedResizeListener(
+  target: EventTarget,
+  onResize: () => void,
+  delayMs = 100,
+): DebouncedResizeListener {
+  const listener = debounce(() => onResize(), delayMs);
+  target.addEventListener('resize', listener);
+  return listener;
+}
+
+export function removeDebouncedResizeListener(
+  target: EventTarget,
+  listener: DebouncedResizeListener | null,
+): void {
+  if (!listener) return;
+  target.removeEventListener('resize', listener);
+  listener.cancel();
+}

src/app/panel-layout.ts

@@ -1,4 +1,9 @@
 import type { AppContext, AppModule } from '@/app/app-context';
+import {
+  addDebouncedResizeListener,
+  removeDebouncedResizeListener,
+  type DebouncedResizeListener,
+} from '@/app/debounced-resize-listener';
 import { normalizeExclusiveChoropleths } from '@/components/resilience-choropleth-utils';
 import { replayPendingCalls, clearAllPendingCalls } from '@/app/pending-panel-data';
 import { getAlertsNearLocation } from '@/services/geo-convergence';
@@ -197,7 +202,7 @@ export class PanelLayoutManager implements AppModule {
   private unsubscribeEntitlementChange: (() => void) | null = null;
   private unsubscribePaymentFailureBanner: (() => void) | null = null;
   private scheduledLoadAllRaf: number | null = null;
-  private _onResizeDebounced: (() => void) & { cancel(): void } | null = null;
+  private _onResizeDebounced: DebouncedResizeListener | null = null;
 
   constructor(ctx: AppContext, callbacks: PanelLayoutManagerCallbacks) {
     this.ctx = ctx;
@@ -405,10 +410,7 @@ export class PanelLayoutManager implements AppModule {
     // Reset checkout overlay so next layout init can register its callback
     destroyCheckoutOverlay();
 
-    if (this._onResizeDebounced) {
-      window.removeEventListener('resize', this._onResizeDebounced);
-    }
-    this._onResizeDebounced?.cancel();
+    removeDebouncedResizeListener(window, this._onResizeDebounced);
     this._onResizeDebounced = null;
   }
 
@@ -1634,12 +1636,8 @@ export class PanelLayoutManager implements AppModule {
       });
     }
 
-    if (this._onResizeDebounced) {
-      window.removeEventListener('resize', this._onResizeDebounced);
-      this._onResizeDebounced.cancel();
-    }
-    this._onResizeDebounced = debounce(() => this.ensureCorrectZones(), 100);
-    window.addEventListener('resize', this._onResizeDebounced);
+    removeDebouncedResizeListener(window, this._onResizeDebounced);
+    this._onResizeDebounced = addDebouncedResizeListener(window, () => this.ensureCorrectZones());
 
     this.ctx.map.onTimeRangeChanged((range) => {
       this.ctx.currentTimeRange = range;

src/utils/debounce.ts

@@ -0,0 +1,12 @@
+export function debounce<T extends (...args: unknown[]) => void>(
+  fn: T,
+  delay: number,
+): ((...args: Parameters<T>) => void) & { cancel(): void } {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  const debounced = (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+  debounced.cancel = () => { clearTimeout(timeoutId); };
+  return debounced;
+}

src/utils/index.ts

@@ -50,18 +50,7 @@ export function getHeatmapClass(change: number): string {
   return `${direction}-1`;
 }
 
-export function debounce<T extends (...args: unknown[]) => void>(
-  fn: T,
-  delay: number
-): ((...args: Parameters<T>) => void) & { cancel(): void } {
-  let timeoutId: ReturnType<typeof setTimeout>;
-  const debounced = (...args: Parameters<T>) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn(...args), delay);
-  };
-  debounced.cancel = () => { clearTimeout(timeoutId); };
-  return debounced;
-}
+export { debounce } from './debounce';
 
 export function throttle<T extends (...args: unknown[]) => void>(
   fn: T,

tests/resize-debounce.test.mjs

@@ -2,37 +2,27 @@
 //
 // Verifies:
 // - debounce() collapses rapid-fire calls into one
-// - PanelLayoutManager wires the resize listener via _onResizeDebounced
-// - destroy() cancels the debounce timer
+// - PanelLayoutManager wires resize through the production helper
+// - destroy() cancels pending resize work
 
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
 import { readFileSync } from 'node:fs';
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import {
+  addDebouncedResizeListener,
+  removeDebouncedResizeListener,
+} from '../src/app/debounced-resize-listener.ts';
+import { debounce } from '../src/utils/debounce.ts';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const panelLayoutSrc = readFileSync(
   resolve(__dirname, '../src/app/panel-layout.ts'),
   'utf-8'
 );
 
-// ------------------------------------------------------------------
-// Inline debounce (mirrors src/utils/index.ts) to test behaviour
-// without pulling in import.meta.env-dependent modules
-// ------------------------------------------------------------------
-/** @returns {{ cancel: () => void }} */
-function debounce(fn, delay) {
-  let timeoutId;
-  const debounced = (..._args) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn(), delay);
-  };
-  debounced.cancel = () => { clearTimeout(timeoutId); };
-  return debounced;
-}
-
-describe('debounce utility (inline — mirrors src/utils/index.ts)', () => {
+describe('debounce utility', () => {
   it('does NOT call fn before delay elapses', () => {
     let called = false;
     const debounced = debounce(() => { called = true; }, 100);
@@ -69,6 +59,59 @@ describe('debounce utility (inline — mirrors src/utils/index.ts)', () => {
   });
 });
 
+describe('debounced resize listener helper', () => {
+  it('collapses a real resize event burst into one delayed ensure call', async () => {
+    const target = new EventTarget();
+    let callCount = 0;
+    const listener = addDebouncedResizeListener(target, () => { callCount++; }, 40);
+
+    for (let i = 0; i < 8; i++) {
+      target.dispatchEvent(new Event('resize'));
+    }
+
+    assert.strictEqual(callCount, 0, 'resize burst must not call synchronously');
+
+    await new Promise(r => setTimeout(r, 20));
+    target.dispatchEvent(new Event('resize'));
+    assert.strictEqual(callCount, 0, 'mid-burst resize must reset the timer');
+
+    await new Promise(r => setTimeout(r, 70));
+    assert.strictEqual(callCount, 1, 'resize burst must collapse to one delayed call');
+
+    removeDebouncedResizeListener(target, listener);
+  });
+
+  it('re-init removal cancels the old pending listener before a new one is assigned', async () => {
+    const target = new EventTarget();
+    let callCount = 0;
+
+    const firstListener = addDebouncedResizeListener(target, () => { callCount++; }, 40);
+    target.dispatchEvent(new Event('resize'));
+
+    removeDebouncedResizeListener(target, firstListener);
+    const secondListener = addDebouncedResizeListener(target, () => { callCount++; }, 40);
+    target.dispatchEvent(new Event('resize'));
+
+    await new Promise(r => setTimeout(r, 70));
+    assert.strictEqual(callCount, 1, 'only the new listener timer should fire');
+
+    removeDebouncedResizeListener(target, secondListener);
+  });
+
+  it('destroy removal removes the listener and cancels pending resize work', async () => {
+    const target = new EventTarget();
+    let callCount = 0;
+    const listener = addDebouncedResizeListener(target, () => { callCount++; }, 40);
+
+    target.dispatchEvent(new Event('resize'));
+    removeDebouncedResizeListener(target, listener);
+    target.dispatchEvent(new Event('resize'));
+
+    await new Promise(r => setTimeout(r, 70));
+    assert.strictEqual(callCount, 0, 'destroy cleanup must cancel pending and future resize work');
+  });
+});
+
 // ------------------------------------------------------------------
 // Live lifecycle tests — replaces source-text regex tests which cannot
 // detect ordering bugs or re-init ghost calls.
@@ -154,50 +197,44 @@ describe('resize debounce lifecycle (live instance)', () => {
 describe('resize debounce wiring (panel-layout.ts)', () => {
   it('declares _onResizeDebounced nullable field', () => {
     assert.ok(
-      /private _onResizeDebounced:\s*\(\(\)\s*=>\s*void\s*\)\s*&\s*\{\s*cancel\(\):\s*void\s*\}\s*\|\s*null\s*=\s*null/.test(
+      /private _onResizeDebounced:\s*DebouncedResizeListener\s*\|\s*null\s*=\s*null/.test(
         panelLayoutSrc
       ),
       '_onResizeDebounced field not found with correct type signature'
     );
   });
 
-  it('init sets _onResizeDebounced = debounce(ensureCorrectZones, 100)', () => {
+  it('init installs resize through addDebouncedResizeListener', () => {
     assert.ok(
-      /this\._onResizeDebounced\s*=\s*debounce\(\(\)\s*=>\s*this\.ensureCorrectZones\(\),\s*100\)/.test(
+      /this\._onResizeDebounced\s*=\s*addDebouncedResizeListener\(\s*window,\s*\(\)\s*=>\s*this\.ensureCorrectZones\(\)\s*\)/.test(
         panelLayoutSrc
       ),
-      'debounce(ensureCorrectZones, 100) assignment not found'
+      'addDebouncedResizeListener(ensureCorrectZones) assignment not found'
     );
   });
 
-  it('addEventListener uses _onResizeDebounced (not bare ensureCorrectZones)', () => {
-    const addLine = panelLayoutSrc
-      .split('\n')
-      .find(l => l.includes("addEventListener") && l.includes("'resize'"));
-    assert.ok(addLine, "resize addEventListener line not found");
-    assert.ok(
-      /_onResizeDebounced/.test(addLine),
-      `resize listener must use _onResizeDebounced. Found: ${addLine.trim()}`
-    );
+  it('init removes the old resize helper before installing a replacement', () => {
     assert.ok(
-      !/\(\)\s*=>\s*this\.ensureCorrectZones\(\)/.test(addLine),
-      'resize listener must not use bare arrow fn (the original bug)'
+      /removeDebouncedResizeListener\(\s*window,\s*this\._onResizeDebounced\s*\);\s*this\._onResizeDebounced\s*=\s*addDebouncedResizeListener/s.test(
+        panelLayoutSrc
+      ),
+      'init must remove/cancel the previous resize listener before replacement'
     );
   });
 
-  it('destroy() calls _onResizeDebounced?.cancel()', () => {
+  it('does not keep the original bare resize arrow listener', () => {
     assert.ok(
-      /_onResizeDebounced\?\.cancel\(\)/.test(panelLayoutSrc),
-      'destroy() must call _onResizeDebounced?.cancel()'
+      !/window\.addEventListener\s*\(\s*['"]resize['"]\s*,\s*\(\)\s*=>\s*this\.ensureCorrectZones\(\)\s*\)/.test(panelLayoutSrc),
+      'resize listener must not use bare arrow fn (the original bug)'
     );
   });
 
-  it('destroy() removes listener via _onResizeDebounced reference', () => {
+  it('destroy() removes the resize helper and nulls the field', () => {
     assert.ok(
-      /window\.removeEventListener\s*\(\s*['"]resize['"]\s*,\s*this\._onResizeDebounced/.test(
+      /removeDebouncedResizeListener\(\s*window,\s*this\._onResizeDebounced\s*\);\s*this\._onResizeDebounced\s*=\s*null/s.test(
         panelLayoutSrc
       ),
-      'destroy() must remove resize listener via _onResizeDebounced'
+      'destroy() must remove/cancel the resize listener and null the field'
     );
   });
 });