test: fix broken tests from chrome motion PR

- Make matchMedia mock unconditional in setup.js (was skipped when JSDOM already defined it)
- Stub matchMedia for mobile breakpoint in AlgorithmInsightPanel tests (useIsBelowLg uses matchMedia, not innerWidth)
- Add visualizationsRemaining to ControlPanel mock in VisualizerApp tests

Author: ayoub3bidi

src/components/AlgorithmInsightPanel.test.jsx

@@ -9,10 +9,28 @@ import { fireEvent, renderWithI18n, screen, waitFor } from '../test/testUtils';
 import AlgorithmInsightPanel from './AlgorithmInsightPanel';
 import i18n from '../i18n';
 import { ALGORITHM_TYPES } from '@/constants';
+import { BELOW_LG_MEDIA_QUERY } from '../hooks/useIsBelowLg';
+
+function stubMatchMedia(matchesMobile) {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn(query => ({
+      matches: query === BELOW_LG_MEDIA_QUERY ? matchesMobile : false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(() => false),
+    }))
+  );
+}
 
 describe('AlgorithmInsightPanel', () => {
   beforeEach(async () => {
     await i18n.changeLanguage('en');
+    stubMatchMedia(false);
   });
 
   it('renders insight content and icon placeholders when open', () => {
@@ -39,11 +57,7 @@ describe('AlgorithmInsightPanel', () => {
   });
 
   it('calls onClose when the mobile close button is clicked', () => {
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 375,
-    });
+    stubMatchMedia(true);
     const onClose = vi.fn();
     renderWithI18n(
       <AlgorithmInsightPanel
@@ -63,11 +77,7 @@ describe('AlgorithmInsightPanel', () => {
   });
 
   it('calls onClose when backdrop is clicked on desktop', () => {
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 1024,
-    });
+    stubMatchMedia(false);
     const onClose = vi.fn();
     const { container } = renderWithI18n(
       <AlgorithmInsightPanel

src/pages/VisualizerApp.test.jsx

@@ -299,6 +299,7 @@ vi.mock('../components/ControlPanel', () => ({
     sortOrder,
     onSortOrderChange,
     onToggleFullScreen,
+    visualizationsRemaining,
   }) => (
     <div data-testid="control-panel">
       <span data-testid="control-total-steps">{String(totalSteps)}</span>
@@ -316,6 +317,12 @@ vi.mock('../components/ControlPanel', () => ({
       <button type="button" onClick={onToggleFullScreen}>
         toggle-fullscreen
       </button>
+      {visualizationsRemaining != null &&
+      Number.isFinite(visualizationsRemaining) ? (
+        <p role="status">
+          {`${visualizationsRemaining} visualizations remaining`}
+        </p>
+      ) : null}
       {algorithmType === 'sorting' && (
         <button
           type="button"

src/test/setup.js

@@ -216,7 +216,7 @@ vi.mock('framer-motion', async () => {
   return createFramerMotionMock();
 });
 
-if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
+if (typeof window !== 'undefined') {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
     configurable: true,