@jmruthers/pace-core 0.6.9 → 0.6.10

package/src/components/Header/Header.test.tsx

@@ -10,17 +10,20 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { User } from '@supabase/supabase-js';
-import { Header, HeaderProps } from './Header';
+import { Header } from './Header';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import type { NavigationItem } from '../NavigationMenu';
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
+import { useOrganisations } from '../../hooks/useOrganisations';
+import { useEvents } from '../../hooks/useEvents';
 
 // Mock the child components
 vi.mock('../NavigationMenu', () => ({
-  NavigationMenu: ({ items, onNavigate, currentPath, buttonText, className }: any) => (
+  NavigationMenu: ({ items, _onNavigate, _currentPath, buttonText, className }: any) => (
     <div data-testid="navigation-menu" className={className}>
       <button data-testid="navigation-menu-trigger">{buttonText}</button>
       {items?.map((item: any) => (
@@ -52,12 +55,23 @@ vi.mock('../UserMenu', () => ({
   ),
 }));
 
-vi.mock('../ContextSelector', () => ({
-  ContextSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'context-selector'} className={className}>
+const mockContextSelector = vi.hoisted(() => 
+  vi.fn(({ placeholder, className, showOrganisations, showEvents, onOrganisationSelect, onEventSelect, 'data-testid': testId }: any) => (
+    <div 
+      data-testid={testId || 'context-selector'} 
+      className={className}
+      data-show-orgs={showOrganisations}
+      data-show-events={showEvents}
+      data-on-org-select={onOrganisationSelect ? 'present' : 'absent'}
+      data-on-event-select={onEventSelect ? 'present' : 'absent'}
+    >
       <button>{placeholder || 'Select organisation or event'}</button>
     </div>
-  ),
+  ))
+);
+
+vi.mock('../ContextSelector', () => ({
+  ContextSelector: mockContextSelector,
 }));
 
 // Mock useEventService to prevent provider requirement
@@ -72,6 +86,36 @@ vi.mock('../../hooks/services/useEventService', () => ({
   }))
 }));
 
+// Mock useUnifiedAuth to prevent infinite loops and async calls
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(() => ({
+    user: null,
+    isAuthenticated: false,
+    appName: undefined,
+    session: null,
+    authLoading: false,
+    authError: null,
+    supabase: null,
+  })),
+}));
+
+// Mock AppSwitcher to prevent async hook calls that could hang
+// AppSwitcher uses useAccessibleApps which makes async database queries
+vi.mock('../AppSwitcher/AppSwitcher', () => ({
+  AppSwitcher: ({ trigger, currentAppName: _currentAppName, showSwitcher, className }: any) => {
+    // If showSwitcher is false, return null or trigger (matches actual behavior)
+    if (showSwitcher === false) {
+      return trigger || null;
+    }
+    // If trigger is provided, return it wrapped in a div (simulating Select component)
+    if (trigger) {
+      return <div data-testid="app-switcher" className={className}>{trigger}</div>;
+    }
+    // Otherwise return a div with testid (when no trigger, AppSwitcher renders its own trigger)
+    return <div data-testid="app-switcher" className={className}>App Switcher</div>;
+  },
+}));
+
 // Mock useOrganisations hook
 vi.mock('../../hooks/useOrganisations', () => ({
   useOrganisations: vi.fn(() => ({
@@ -100,6 +144,19 @@ vi.mock('../../hooks/useOrganisations', () => ({
   }))
 }));
 
+// Mock useEvents hook
+vi.mock('../../hooks/useEvents', () => ({
+  useEvents: vi.fn(() => ({
+    events: [],
+    selectedEvent: null,
+    selectedEventId: null,
+    eventLoading: false,
+    eventError: null,
+    setSelectedEvent: vi.fn(),
+    refreshEvents: vi.fn(),
+  })),
+}));
+
 // Test data
 const mockUser: User = {
   id: '123',
@@ -118,16 +175,7 @@ const mockNavItems: NavigationItem[] = [
   { id: 'settings', label: 'Settings', href: '/settings' },
 ];
 
-const mockProps: HeaderProps = {
-  logoUrl: '/test-logo.svg',
-  logoAlt: 'Test Logo',
-  navItems: mockNavItems,
-  user: mockUser,
-  onSignOut: vi.fn(),
-  onChangePassword: vi.fn(),
-  currentPath: '/dashboard',
-  onNavigate: vi.fn(),
-};
+// mockProps removed - not used in tests
 
 describe('Header Component', () => {
   beforeEach(() => {
@@ -175,44 +223,12 @@ describe('Header Component', () => {
       expect(logo).toHaveAttribute('alt', 'Test Logo');
     });
 
-    it('renders custom logo component when provided', () => {
-      const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
-      
-      renderWithProviders(<Header logo={<CustomLogo />} />);
-      
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-      expect(screen.queryByRole('img')).not.toBeInTheDocument();
-    });
-
-    it('renders default logo when no logo props provided', () => {
-      renderWithProviders(<Header />);
-      
-      const logo = screen.getByRole('img', { name: 'Logo' });
-      expect(logo).toBeInTheDocument();
-      expect(logo).toBeVisible();
-      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
-    });
-
-    it('uses logoAlt as fallback when logoUrl provided without logoAlt', () => {
-      renderWithProviders(<Header logoUrl="/test-logo.svg" />);
-      
-      const logo = screen.getByRole('img', { name: 'Logo' });
-      expect(logo).toHaveAttribute('alt', 'Logo');
-    });
-
-    it('prioritizes custom logo over logoUrl', () => {
-      const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
-      
-      renderWithProviders(
-        <Header 
-          logo={<CustomLogo />} 
-          logoUrl="/test-logo.svg" 
-          logoAlt="Test Logo" 
-        />
-      );
+    it('renders clickable logo when logoHref is provided with logoUrl', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoHref="/dashboard" />);
       
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+      const logoLink = screen.getByRole('img', { name: 'Logo' }).closest('a');
+      expect(logoLink).toBeInTheDocument();
+      expect(logoLink).toHaveAttribute('href', '/dashboard');
     });
   });
 
@@ -223,16 +239,17 @@ describe('Header Component', () => {
       
       expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
       expect(screen.getByTestId('navigation-menu-trigger')).toHaveTextContent('Menu');
-    });
-
-    it('does not render navigation menu when navItems empty', () => {
-      renderWithProviders(<Header navItems={[]} />);
       
-      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+      mockNavItems.forEach(item => {
+        expect(screen.getByTestId(`nav-item-${item.id}`)).toHaveTextContent(item.label);
+      });
     });
 
-    it('does not render navigation menu when navItems undefined', () => {
-      renderWithProviders(<Header />);
+    it.each([
+      { navItems: [], description: 'empty array' },
+      { navItems: undefined, description: 'undefined' },
+    ])('does not render navigation menu when navItems is $description', ({ navItems }) => {
+      renderWithProviders(<Header navItems={navItems} />);
       
       expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
     });
@@ -249,39 +266,26 @@ describe('Header Component', () => {
       );
       
       expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
-      // NavigationMenu component should receive the props
-    });
-
-    it('renders all navigation items', () => {
-      renderWithProviders(<Header navItems={mockNavItems} />);
-      
-      mockNavItems.forEach(item => {
-        expect(screen.getByTestId(`nav-item-${item.id}`)).toHaveTextContent(item.label);
-      });
     });
   });
 
   // User menu tests
   describe('User Menu', () => {
-    it('renders user menu when showUserMenu is true', () => {
-      renderWithProviders(<Header user={mockUser} showUserMenu={true} />);
-      
-      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
-    });
-
-    it('does not render user menu when showUserMenu is false', () => {
-      renderWithProviders(<Header user={mockUser} showUserMenu={false} />);
-      
-      expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
-    });
-
-    it('renders user menu by default when user provided', () => {
-      renderWithProviders(<Header user={mockUser} />);
-      
-      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    it.each([
+      { showUserMenu: true, shouldRender: true },
+      { showUserMenu: false, shouldRender: false },
+      { showUserMenu: undefined, shouldRender: true }, // default is true
+    ])('renders user menu based on showUserMenu prop ($showUserMenu)', ({ showUserMenu, shouldRender }) => {
+      renderWithProviders(<Header user={mockUser} showUserMenu={showUserMenu} />);
+      
+      if (shouldRender) {
+        expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+      } else {
+        expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
+      }
     });
 
-    it('displays user email in user menu trigger', () => {
+    it('displays user email when user is provided', () => {
       renderWithProviders(<Header user={mockUser} />);
       
       expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('test@example.com');
@@ -293,7 +297,7 @@ describe('Header Component', () => {
       expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('Sign In');
     });
 
-    it('renders custom user menu when provided', () => {
+    it('renders custom user menu when provided (overrides default)', () => {
       const CustomUserMenu = () => <div data-testid="custom-user-menu">Custom Menu</div>;
       
       renderWithProviders(<Header user={mockUser} userMenu={<CustomUserMenu />} />);
@@ -320,36 +324,19 @@ describe('Header Component', () => {
 
   // Context selector tests
   describe('Context Selector', () => {
-    it('renders context selector by default', () => {
-      renderWithProviders(<Header />);
-      
-      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
-    });
-
-    it('does not render context selector when showContextSelector is false', () => {
-      renderWithProviders(<Header showContextSelector={false} />);
-      
-      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
-    });
-
-    it('renders context selector when showContextSelector is explicitly true', () => {
-      renderWithProviders(<Header showContextSelector={true} />);
-      
-      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
-    });
-
-    it('applies correct className to context selector', () => {
-      renderWithProviders(<Header showContextSelector={true} />);
-      
-      const contextSelector = screen.getByTestId('context-selector');
-      expect(contextSelector).toBeInTheDocument();
-      expect(contextSelector).toBeVisible();
-    });
-
-    it('shows correct placeholder text', () => {
-      renderWithProviders(<Header showContextSelector={true} />);
-      
-      expect(screen.getByRole('button', { name: 'Select organisation or event' })).toBeInTheDocument();
+    it.each([
+      { showContextSelector: true, shouldRender: true },
+      { showContextSelector: false, shouldRender: false },
+      { showContextSelector: undefined, shouldRender: true }, // default is true
+    ])('renders context selector based on showContextSelector prop ($showContextSelector)', ({ showContextSelector, shouldRender }) => {
+      renderWithProviders(<Header showContextSelector={showContextSelector} />);
+      
+      if (shouldRender) {
+        expect(screen.getByTestId('context-selector')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Select organisation or event' })).toBeInTheDocument();
+      } else {
+        expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
+      }
     });
 
     it('preserves layout when context selector is hidden', () => {
@@ -365,10 +352,7 @@ describe('Header Component', () => {
       expect(nav).toBeInTheDocument();
       expect(nav).toBeVisible();
       
-      // Context selector should not be rendered
       expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
-      
-      // User menu should still be present and positioned correctly
       expect(screen.getByTestId('user-menu')).toBeInTheDocument();
     });
   });
@@ -460,28 +444,16 @@ describe('Header Component', () => {
   });
 
   describe('Layout and Responsive Design', () => {
-    it('applies correct grid layout classes', () => {
-      renderWithProviders(<Header />);
-      
-      const nav = screen.getByRole('navigation');
-      expect(nav).toBeInTheDocument();
-      expect(nav).toBeVisible();
-    });
-
-    it('applies correct container classes', () => {
+    it('applies correct layout structure', () => {
       renderWithProviders(<Header />);
       
+      const header = screen.getByRole('banner');
       const nav = screen.getByRole('navigation');
-      expect(nav).toBeInTheDocument();
-      expect(nav).toBeVisible();
-    });
-
-    it('maintains proper header height', () => {
-      renderWithProviders(<Header />);
       
-      const header = screen.getByRole('banner');
       expect(header).toBeInTheDocument();
       expect(header).toBeVisible();
+      expect(nav).toBeInTheDocument();
+      expect(nav).toBeVisible();
     });
   });
 
@@ -518,42 +490,51 @@ describe('Header Component', () => {
 
   // Edge cases and error handling
   describe('Edge Cases and Error Handling', () => {
-    it('handles null user gracefully', () => {
-      renderWithProviders(<Header user={null} />);
+    it.each([
+      { user: null, description: 'null user' },
+      { user: undefined, description: 'undefined user' },
+    ])('handles $description gracefully', ({ user }) => {
+      renderWithProviders(<Header user={user} />);
       
       expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('Sign In');
     });
 
-    it('handles undefined user gracefully', () => {
-      renderWithProviders(<Header user={undefined} />);
+    it.each([
+      { navItems: [], description: 'empty array' },
+      { navItems: undefined, description: 'undefined' },
+    ])('does not render navigation menu when navItems is $description', ({ navItems }) => {
+      renderWithProviders(<Header navItems={navItems} />);
       
-      expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('Sign In');
+      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
     });
 
-    it('handles empty navItems array', () => {
-      renderWithProviders(<Header navItems={[]} />);
+    it('handles missing logoUrl gracefully (uses default)', () => {
+      renderWithProviders(<Header logoAlt="Test Logo" />);
       
-      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+      const logo = screen.getByRole('img', { name: 'Test Logo' });
+      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
     });
 
-    it('handles undefined navItems', () => {
-      renderWithProviders(<Header navItems={undefined} />);
+    it('handles missing logoAlt gracefully (uses default)', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" />);
       
-      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toHaveAttribute('alt', 'Logo');
     });
 
-    it('handles missing logoUrl gracefully', () => {
-      renderWithProviders(<Header logoAlt="Test Logo" />);
+    it('handles logoHref for clickable logo', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoHref="/dashboard" />);
       
-      const logo = screen.getByRole('img', { name: 'Test Logo' });
-      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
+      const logoLink = screen.getByRole('img', { name: 'Logo' }).closest('a');
+      expect(logoLink).toBeInTheDocument();
+      expect(logoLink).toHaveAttribute('href', '/dashboard');
     });
 
-    it('handles missing logoAlt gracefully', () => {
+    it('renders logo without link when logoHref is not provided', () => {
       renderWithProviders(<Header logoUrl="/test-logo.svg" />);
       
       const logo = screen.getByRole('img', { name: 'Logo' });
-      expect(logo).toHaveAttribute('alt', 'Logo');
+      expect(logo.closest('a')).not.toBeInTheDocument();
     });
   });
 
@@ -639,4 +620,514 @@ describe('Header Component', () => {
       expect(screen.getByTestId('user-menu')).toBeInTheDocument();
     });
   });
+
+  // AppSwitcher tests
+  describe('AppSwitcher Integration', () => {
+    beforeEach(() => {
+      // Reset to default mock state
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: null,
+        isAuthenticated: false,
+        appName: undefined,
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+    });
+
+    it('renders AppSwitcher when authenticated and appName is provided', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: mockUser,
+        isAuthenticated: true,
+        appName: 'TEST',
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(<Header />);
+
+      expect(screen.getByTestId('app-switcher')).toBeInTheDocument();
+    });
+
+    it('does not render AppSwitcher when not authenticated', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: null,
+        isAuthenticated: false,
+        appName: undefined,
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(<Header />);
+
+      expect(screen.queryByTestId('app-switcher')).not.toBeInTheDocument();
+    });
+
+    it('does not render AppSwitcher when appName is not provided', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: mockUser,
+        isAuthenticated: true,
+        appName: undefined,
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(<Header />);
+
+      expect(screen.queryByTestId('app-switcher')).not.toBeInTheDocument();
+    });
+
+    it('renders AppSwitcher with correct className', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: mockUser,
+        isAuthenticated: true,
+        appName: 'TEST',
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(<Header />);
+
+      const appSwitcher = screen.getByTestId('app-switcher');
+      expect(appSwitcher).toBeInTheDocument();
+      expect(appSwitcher).toHaveClass('w-9');
+    });
+  });
+
+  // Default logo tests
+  describe('Default Logo Rendering', () => {
+    it('renders default logo when logoUrl is not provided and logoHref is provided', () => {
+      renderWithProviders(<Header logoHref="/dashboard" />);
+
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
+      
+      const logoLink = logo.closest('a');
+      expect(logoLink).toBeInTheDocument();
+      expect(logoLink).toHaveAttribute('href', '/dashboard');
+    });
+
+    it('renders default logo when logoUrl is not provided and logoHref is not provided', () => {
+      renderWithProviders(<Header />);
+
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
+      
+      const logoLink = logo.closest('a');
+      expect(logoLink).not.toBeInTheDocument();
+    });
+
+    it('renders default logo with custom alt text', () => {
+      renderWithProviders(<Header logoAlt="Custom Alt" />);
+
+      const logo = screen.getByRole('img', { name: 'Custom Alt' });
+      expect(logo).toHaveAttribute('alt', 'Custom Alt');
+    });
+  });
+
+  // ContextSelector integration tests
+  describe('ContextSelector Integration', () => {
+    beforeEach(() => {
+      mockContextSelector.mockClear();
+    });
+
+    it('passes showOrganisations prop to ContextSelector', () => {
+      renderWithProviders(<Header showContextSelector={true} showOrganisations={false} />);
+
+      const contextSelector = screen.getByTestId('context-selector');
+      expect(contextSelector).toHaveAttribute('data-show-orgs', 'false');
+      
+      // Check that mockContextSelector was called with showOrganisations
+      const lastCall = mockContextSelector.mock.calls[mockContextSelector.mock.calls.length - 1];
+      expect(lastCall[0].showOrganisations).toBe(false);
+    });
+
+    it('passes showEvents prop to ContextSelector', () => {
+      renderWithProviders(<Header showContextSelector={true} showEvents={false} />);
+
+      const contextSelector = screen.getByTestId('context-selector');
+      expect(contextSelector).toHaveAttribute('data-show-events', 'false');
+      
+      // Check that mockContextSelector was called with showEvents
+      const lastCall = mockContextSelector.mock.calls[mockContextSelector.mock.calls.length - 1];
+      expect(lastCall[0].showEvents).toBe(false);
+    });
+
+    it('uses default values for showOrganisations and showEvents', () => {
+      renderWithProviders(<Header showContextSelector={true} />);
+
+      const contextSelector = screen.getByTestId('context-selector');
+      expect(contextSelector).toHaveAttribute('data-show-orgs', 'true');
+      expect(contextSelector).toHaveAttribute('data-show-events', 'true');
+      
+      // Check that mockContextSelector was called with default values
+      const lastCall = mockContextSelector.mock.calls[mockContextSelector.mock.calls.length - 1];
+      expect(lastCall[0].showOrganisations).toBe(true);
+      expect(lastCall[0].showEvents).toBe(true);
+    });
+
+    it('passes onOrganisationSelect callback to ContextSelector', () => {
+      const mockSwitchOrganisation = vi.fn().mockResolvedValue(undefined);
+      vi.mocked(useOrganisations).mockReturnValue({
+        organisations: [],
+        selectedOrganisation: null,
+        isContextReady: true,
+        isLoading: false,
+        error: null,
+        switchOrganisation: mockSwitchOrganisation,
+        refreshOrganisations: vi.fn(),
+        userMemberships: []
+      });
+
+      renderWithProviders(<Header showContextSelector={true} />);
+
+      // Check that mockContextSelector was called with onOrganisationSelect
+      const lastCall = mockContextSelector.mock.calls[mockContextSelector.mock.calls.length - 1];
+      expect(lastCall[0]).toHaveProperty('onOrganisationSelect');
+      expect(typeof lastCall[0].onOrganisationSelect).toBe('function');
+    });
+
+    it('passes onEventSelect callback to ContextSelector', () => {
+      vi.mocked(useEvents).mockReturnValue({
+        events: [],
+        selectedEvent: null,
+        selectedEventId: null,
+        eventLoading: false,
+        eventError: null,
+        setSelectedEvent: vi.fn(),
+        refreshEvents: vi.fn(),
+      });
+
+      renderWithProviders(<Header showContextSelector={true} />);
+
+      // Check that mockContextSelector was called with onEventSelect
+      const lastCall = mockContextSelector.mock.calls[mockContextSelector.mock.calls.length - 1];
+      expect(lastCall[0]).toHaveProperty('onEventSelect');
+      expect(typeof lastCall[0].onEventSelect).toBe('function');
+    });
+
+    it('calls setSelectedEvent(null) before switchOrganisation when organisation is selected', async () => {
+      const mockSwitchOrganisation = vi.fn().mockResolvedValue(undefined);
+      const mockSetSelectedEvent = vi.fn();
+      
+      vi.mocked(useOrganisations).mockReturnValue({
+        organisations: [],
+        selectedOrganisation: null,
+        isContextReady: true,
+        isLoading: false,
+        error: null,
+        switchOrganisation: mockSwitchOrganisation,
+        refreshOrganisations: vi.fn(),
+        userMemberships: []
+      });
+
+      vi.mocked(useEvents).mockReturnValue({
+        events: [],
+        selectedEvent: null,
+        selectedEventId: null,
+        eventLoading: false,
+        eventError: null,
+        setSelectedEvent: mockSetSelectedEvent,
+        refreshEvents: vi.fn(),
+      });
+
+      renderWithProviders(<Header showContextSelector={true} />);
+
+      // Get the onOrganisationSelect callback from the mock call
+      const contextSelectorCall = mockContextSelector.mock.calls.find(
+        call => call[0].onOrganisationSelect
+      );
+      
+      if (contextSelectorCall && contextSelectorCall[0].onOrganisationSelect) {
+        const onOrganisationSelect = contextSelectorCall[0].onOrganisationSelect;
+        
+        // Call the callback
+        await onOrganisationSelect({ id: 'test-org-id', name: 'Test Organisation' });
+        
+        // Verify setSelectedEvent is called first
+        expect(mockSetSelectedEvent).toHaveBeenCalledWith(null);
+        expect(mockSwitchOrganisation).toHaveBeenCalledWith('test-org-id');
+      }
+    });
+  });
+
+  // Grid layout tests
+  describe('Grid Layout', () => {
+    it('applies correct grid layout when authenticated with appName', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: mockUser,
+        isAuthenticated: true,
+        appName: 'TEST',
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(<Header />);
+
+      const nav = screen.getByRole('navigation');
+      // Check that the nav element has the grid class (may be in className string)
+      const className = nav.className;
+      expect(className).toContain('grid-cols-[auto_auto_1fr_auto_auto]');
+    });
+
+    it('applies correct grid layout when not authenticated', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: null,
+        isAuthenticated: false,
+        appName: undefined,
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(<Header />);
+
+      const nav = screen.getByRole('navigation');
+      const className = nav.className;
+      expect(className).toContain('grid-cols-[auto_1fr_auto_auto]');
+    });
+
+    it('applies correct grid layout when authenticated without appName', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: mockUser,
+        isAuthenticated: true,
+        appName: undefined,
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(<Header />);
+
+      const nav = screen.getByRole('navigation');
+      const className = nav.className;
+      expect(className).toContain('grid-cols-[auto_1fr_auto_auto]');
+    });
+  });
+
+  // Logo navigation tests
+  describe('Logo Navigation', () => {
+    it('renders logo link with correct href when logoHref is provided', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoHref="/dashboard" />);
+
+      const logoLink = screen.getByRole('img', { name: 'Logo' }).closest('a');
+      expect(logoLink).toBeInTheDocument();
+      expect(logoLink).toHaveAttribute('href', '/dashboard');
+    });
+
+    it('does not navigate when logoHref is not provided', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" />);
+
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      const logoLink = logo.closest('a');
+      expect(logoLink).not.toBeInTheDocument();
+    });
+
+    it('handles logoHref with default logo', () => {
+      renderWithProviders(<Header logoHref="/home" />);
+
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      const logoLink = logo.closest('a');
+      expect(logoLink).toBeInTheDocument();
+      expect(logoLink).toHaveAttribute('href', '/home');
+    });
+  });
+
+  // Additional edge cases
+  describe('Additional Edge Cases', () => {
+    it('handles className merging correctly', () => {
+      renderWithProviders(<Header className="custom-class" />);
+
+      const header = screen.getByRole('banner');
+      expect(header).toHaveClass('custom-class');
+      expect(header).toHaveClass('w-full'); // Default classes should still be present
+    });
+
+    it('handles empty navItems array', () => {
+      renderWithProviders(<Header navItems={[]} />);
+
+      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+    });
+
+    it('handles logoUrl with empty string', () => {
+      renderWithProviders(<Header logoUrl="" />);
+
+      // Empty string should be treated as falsy, so default logo should render
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
+    });
+
+    it('handles logoAlt with empty string', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoAlt="" />);
+
+      const logo = screen.getByRole('img', { name: 'Logo' }); // Falls back to default
+      expect(logo).toBeInTheDocument();
+    });
+
+    it('handles all optional props as undefined', () => {
+      renderWithProviders(
+        <Header
+          logoUrl={undefined}
+          logoAlt={undefined}
+          navItems={undefined}
+          user={undefined}
+          onSignOut={undefined}
+          onChangePassword={undefined}
+          actions={undefined}
+          userMenu={undefined}
+          className={undefined}
+          showContextSelector={undefined}
+          showOrganisations={undefined}
+          showEvents={undefined}
+          showUserMenu={undefined}
+          currentPath={undefined}
+          onNavigate={undefined}
+          logoHref={undefined}
+        />
+      );
+
+      const header = screen.getByRole('banner');
+      expect(header).toBeInTheDocument();
+    });
+
+    it('handles logoHref with special characters', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoHref="/dashboard?tab=settings" />);
+
+      const logoLink = screen.getByRole('img', { name: 'Logo' }).closest('a');
+      expect(logoLink).toHaveAttribute('href', '/dashboard?tab=settings');
+    });
+
+    it('handles logoHref with hash', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoHref="/dashboard#section" />);
+
+      const logoLink = screen.getByRole('img', { name: 'Logo' }).closest('a');
+      expect(logoLink).toHaveAttribute('href', '/dashboard#section');
+    });
+  });
+
+  // Comprehensive integration scenarios
+  describe('Comprehensive Integration Scenarios', () => {
+    it('renders full header with all features when authenticated', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: mockUser,
+        isAuthenticated: true,
+        appName: 'TEST',
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      const customActions = <div data-testid="custom-actions">Actions</div>;
+
+      renderWithProviders(
+        <Header
+          logoUrl="/test-logo.svg"
+          logoAlt="Test Logo"
+          logoHref="/dashboard"
+          navItems={mockNavItems}
+          user={mockUser}
+          actions={customActions}
+          showContextSelector={true}
+          showOrganisations={true}
+          showEvents={true}
+          showUserMenu={true}
+          currentPath="/dashboard"
+        />
+      );
+
+      // AppSwitcher
+      expect(screen.getByTestId('app-switcher')).toBeInTheDocument();
+      
+      // Logo
+      expect(screen.getByRole('img', { name: 'Test Logo' })).toBeInTheDocument();
+      
+      // Navigation
+      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      
+      // Context Selector
+      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
+      
+      // Custom Actions
+      expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
+      
+      // User Menu
+      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    });
+
+    it('renders minimal header when not authenticated', () => {
+      vi.mocked(useUnifiedAuth).mockReturnValue({
+        user: null,
+        isAuthenticated: false,
+        appName: undefined,
+        session: null,
+        authLoading: false,
+        authError: null,
+        supabase: null,
+      });
+
+      renderWithProviders(
+        <Header
+          logoUrl="/test-logo.svg"
+          showContextSelector={false}
+          showUserMenu={false}
+        />
+      );
+
+      // Should not have AppSwitcher
+      expect(screen.queryByTestId('app-switcher')).not.toBeInTheDocument();
+      
+      // Should have logo
+      expect(screen.getByRole('img', { name: 'Logo' })).toBeInTheDocument();
+      
+      // Should not have context selector
+      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
+      
+      // Should not have user menu
+      expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
+    });
+
+    it('handles context selector with only organisations', () => {
+      renderWithProviders(
+        <Header
+          showContextSelector={true}
+          showOrganisations={true}
+          showEvents={false}
+        />
+      );
+
+      const contextSelector = screen.getByTestId('context-selector');
+      expect(contextSelector).toHaveAttribute('data-show-orgs', 'true');
+      expect(contextSelector).toHaveAttribute('data-show-events', 'false');
+    });
+
+    it('handles context selector with only events', () => {
+      renderWithProviders(
+        <Header
+          showContextSelector={true}
+          showOrganisations={false}
+          showEvents={true}
+        />
+      );
+
+      const contextSelector = screen.getByTestId('context-selector');
+      expect(contextSelector).toHaveAttribute('data-show-orgs', 'false');
+      expect(contextSelector).toHaveAttribute('data-show-events', 'true');
+    });
+  });
 });