From 44f6e5c1eccb746b05b40412649519297059cbaa Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Mon, 25 May 2026 00:18:32 -0400
Subject: [PATCH] fix(web): add matchMedia mock to prevent unhandled test
 errors

The window.matchMedia API (used for accessibility features) was not
mocked in tests, causing unhandled rejections when replay.ts tried to
check prefers-reduced-motion. Added the mock to both test-setup.ts
and the beforeEach hook in replay.test.ts to ensure it's available
before modules load.

Closes: bf-5cwi

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 web/src/pages/replay.test.ts | 15 +++++++++++++++
 web/src/test-setup.ts        | 24 ++++++++++++++----------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/replay.test.ts b/web/src/pages/replay.test.ts
index 4592d04..46f5f7f 100644
--- a/web/src/pages/replay.test.ts
+++ b/web/src/pages/replay.test.ts
@@ -12,6 +12,21 @@ declare global {
 
 describe('replay.ts error handling (URL load button)', () => {
   beforeEach(() => {
+    // Ensure matchMedia is mocked before any module loads
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+
     // Setup DOM environment
     document.body.innerHTML = '<div id="app"></div>';
     globalThis.fetch = vi.fn();
diff --git a/web/src/test-setup.ts b/web/src/test-setup.ts
index f0dfddb..36ac775 100644
--- a/web/src/test-setup.ts
+++ b/web/src/test-setup.ts
@@ -1,17 +1,21 @@
 /**
  * Vitest setup file for browser API mocks.
  */
+import { vi } from 'vitest';
 
+// Mock matchMedia for accessibility features in replay.ts
+// Must be set up before tests import modules that use it
+const matchMediaMock = vi.fn().mockImplementation((query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}));
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: vi.fn().mockImplementation((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
+  value: matchMediaMock,
 });