test(ui): verify navbar responsive menu behavior

Author: Divv1524

app/components/navbar.test.tsx

@@ -1,21 +1,46 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
 import Navbar from './navbar';
 import type { ReactNode } from 'react';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
+type MatchMediaChangeListener = (event: MediaQueryListEvent) => void;
+
+function mockMatchMedia(initialMatches = false) {
+  let matches = initialMatches;
+  const listeners = new Set<MatchMediaChangeListener>();
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      get matches() {
+        return matches;
+      },
+      media: query,
+      onchange: null,
+      addListener: vi.fn((listener: MatchMediaChangeListener) => listeners.add(listener)),
+      removeListener: vi.fn((listener: MatchMediaChangeListener) => listeners.delete(listener)),
+      addEventListener: vi.fn((event: string, listener: MatchMediaChangeListener) => {
+        if (event === 'change') listeners.add(listener);
+      }),
+      removeEventListener: vi.fn((event: string, listener: MatchMediaChangeListener) => {
+        if (event === 'change') listeners.delete(listener);
+      }),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+
+  return {
+    setMatches(nextMatches: boolean) {
+      matches = nextMatches;
+      listeners.forEach((listener) => {
+        listener({
+          matches,
+          media: '(min-width: 768px)',
+        } as MediaQueryListEvent);
+      });
+    },
+  };
+}
 
 vi.mock('framer-motion', () => ({
   motion: {
@@ -34,6 +59,9 @@ vi.mock('lucide-react', () => ({
 describe('Navbar mobile menu', () => {
   beforeEach(() => {
     window.innerWidth = 500;
+    mockMatchMedia(false);
+    window.localStorage.clear();
+    document.documentElement.className = '';
   });
 
   it('menu is hidden by default', () => {
@@ -63,23 +91,65 @@ describe('Navbar mobile menu', () => {
     expect(screen.queryByText(/closeicon/i)).toBeNull();
   });
 
-  it('closes menu on resize to desktop', () => {
+  it('keeps menu open when a plain resize event fires below desktop', () => {
     render(<Navbar />);
 
     const button = screen.getByLabelText(/open menu/i);
 
     fireEvent.click(button);
 
-    window.innerWidth = 1200;
-
-    window.matchMedia = vi.fn().mockImplementation(() => ({
-      matches: true,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    }));
-
     window.dispatchEvent(new Event('resize'));
 
     expect(button.getAttribute('aria-expanded')).toBe('true');
   });
 });
+
+describe('Navbar responsive breakpoints', () => {
+  beforeEach(() => {
+    window.innerWidth = 500;
+    window.localStorage.clear();
+    document.documentElement.className = '';
+  });
+
+  it('renders semantic navigation and mobile menu controls at small widths', () => {
+    mockMatchMedia(false);
+
+    render(<Navbar />);
+
+    expect(screen.getByRole('navigation')).toBeTruthy();
+    expect(screen.getByRole('link', { name: /go to home/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /open menu/i }).getAttribute('aria-expanded')).toBe(
+      'false'
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /open menu/i }));
+
+    expect(screen.getByRole('button', { name: /close menu/i }).getAttribute('aria-expanded')).toBe(
+      'true'
+    );
+    expect(screen.getAllByRole('link', { name: /customization studio/i })).toHaveLength(2);
+    expect(screen.getAllByRole('link', { name: /github repo/i })).toHaveLength(2);
+  });
+
+  it('closes the open hamburger menu when crossing into the desktop breakpoint', () => {
+    const matchMedia = mockMatchMedia(false);
+
+    render(<Navbar />);
+
+    fireEvent.click(screen.getByRole('button', { name: /open menu/i }));
+
+    expect(screen.getByRole('button', { name: /close menu/i }).getAttribute('aria-expanded')).toBe(
+      'true'
+    );
+
+    act(() => {
+      matchMedia.setMatches(true);
+    });
+
+    expect(screen.getByRole('button', { name: /open menu/i }).getAttribute('aria-expanded')).toBe(
+      'false'
+    );
+    expect(screen.getAllByRole('link', { name: /customization studio/i })).toHaveLength(1);
+    expect(screen.getAllByRole('link', { name: /github repo/i })).toHaveLength(1);
+  });
+});