@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/PaceAppLayout/PaceAppLayout.integration.test.tsx

@@ -1,3 +1,18 @@
+/**
+ * @file PaceAppLayout Integration Tests
+ * @package @jmruthers/pace-core
+ * @module Components/PaceAppLayout/Integration
+ * @since 0.1.0
+ *
+ * Comprehensive integration tests for PaceAppLayout component covering:
+ * - Integration with React Router
+ * - Integration with authentication providers
+ * - Integration with permission systems
+ * - Real-world user workflows
+ * - Configuration integration
+ * - Layout integration
+ */
+
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
@@ -165,15 +180,16 @@ vi.mock('../../hooks/services/useEventService', () => ({
 // Mock useEvents hook (used by useEventTheme and ContextSelector)
 // Use the hoisted mockUseEventService so useEvents can work properly
 // But also provide a direct mock for components that import useEvents directly
-const mockUseEvents = vi.hoisted(() => vi.fn(() => ({
-  selectedEvent: { event_id: 'event-123' },
-  events: [],
-  isLoading: false,
-  error: null,
-  setSelectedEvent: vi.fn(),
-  refreshEvents: vi.fn(),
-  clearEventSelection: vi.fn(),
-})));
+// Note: mockUseEvents is defined but not currently used - kept for potential future use
+// const mockUseEvents = vi.hoisted(() => vi.fn(() => ({
+//   selectedEvent: { event_id: 'event-123' },
+//   events: [],
+//   isLoading: false,
+//   error: null,
+//   setSelectedEvent: vi.fn(),
+//   refreshEvents: vi.fn(),
+//   clearEventSelection: vi.fn(),
+// })));
 
 // Don't mock useEvents - let it use the mocked useEventService
 // The real useEvents will work because useEventService is mocked
@@ -231,7 +247,7 @@ vi.mock('../../providers/services/EventServiceProvider', () => {
       return React.createElement(MockContext.Provider, { value: mockContextValue }, children);
     },
     EventServiceContext: {
-      Provider: ({ children, value }: any) => React.createElement('div', { 'data-testid': 'event-service-provider' }, children),
+      Provider: ({ children }: any) => React.createElement('div', { 'data-testid': 'event-service-provider' }, children),
       Consumer: ({ children }: any) => children(mockContextValue),
     },
     useEventService: mockUseEventService,
@@ -279,9 +295,9 @@ vi.mock('../../rbac/api', () => ({
   setupRBAC: vi.fn()
 }));
 
-// Mock RBAC hooks
+// Mock RBAC hooks - mock individual files since barrel was removed
 // Reference hoisted mocks - they're available when factory runs
-vi.mock('../../rbac/hooks', () => ({
+vi.mock('../../rbac/hooks/useRBAC', () => ({
   useRBAC: vi.fn(() => ({
     hasPermission: mockHasPermissionRBAC,
     isLoading: false,
@@ -294,7 +310,9 @@ vi.mock('../../rbac/hooks', () => ({
     eventRoles: [],
     permissionMap: {},
   })),
-  useCan: mockUseCan,
+}));
+
+vi.mock('../../rbac/hooks/useResolvedScope', () => ({
   useResolvedScope: vi.fn(() => ({
     resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
     isLoading: false,
@@ -302,6 +320,10 @@ vi.mock('../../rbac/hooks', () => ({
   })),
 }));
 
+vi.mock('../../rbac/hooks/usePermissions', () => ({
+  useCan: mockUseCan,
+}));
+
 // Mock ContextSelector to avoid useEventService requirement
 vi.mock('../ContextSelector', () => ({
   ContextSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
@@ -323,26 +345,24 @@ vi.mock('../Header', () => ({
     navItems,
     actions,
     userMenu,
-    logo,
     logoUrl,
+    logoAlt,
     showContextSelector,
     showUserMenu,
     className
   }) => (
     <header data-testid="mock-header" role="banner" className={className}>
-      <div data-testid="app-name">{logoUrl ? 'Test App' : 'Complex App'}</div>
+      <div data-testid="app-name">{logoAlt ? logoAlt.replace(' Logo', '') : 'Test App'}</div>
       <div data-testid="user-info">{user?.user_metadata?.display_name || user?.email}</div>
       <div data-testid="nav-items-count">{navItems?.length || 0}</div>
       {actions && actions}
       <div data-testid="has-actions">{actions ? 'true' : 'false'}</div>
       {userMenu && userMenu}
       <div data-testid="has-custom-user-menu">{userMenu ? 'true' : 'false'}</div>
-      {logo && logo}
-      <div data-testid="has-custom-logo">{logo ? 'true' : 'false'}</div>
       <div data-testid="logo-url">{logoUrl || 'default'}</div>
       <div data-testid="show-user-menu">{showUserMenu !== false ? 'true' : 'false'}</div>
       <nav data-testid="navigation">
-        {navItems?.map((item, index) => (
+        {navItems?.map((item) => (
           <button 
             key={item.id}
             data-testid={`nav-${item.id}`}
@@ -451,6 +471,7 @@ describe('PaceAppLayout Integration', () => {
     
     // Reset RBAC hook mocks
     // Access hoisted mocks directly (they're available in this scope)
+    // CRITICAL: All mocks must resolve immediately to prevent test hanging
     mockHasPermissionRBAC.mockClear();
     mockHasPermissionRBAC.mockResolvedValue(true);
     mockUseCan.mockReturnValue({
@@ -465,11 +486,12 @@ describe('PaceAppLayout Integration', () => {
     mockIsPermitted = vi.mocked(isPermitted);
     
     // Reset super admin mock (use module-level mockIsSuperAdmin)
+    // CRITICAL: Must resolve immediately to prevent hanging
     mockIsSuperAdmin.mockClear();
     mockIsSuperAdmin.mockResolvedValue(false);
     
     // Reset mockIsPermitted to default implementation
-    mockIsPermitted.mockImplementation((input) => {
+    mockIsPermitted.mockImplementation((_input) => {
       return Promise.resolve(true);
     });
     
@@ -557,23 +579,6 @@ describe('PaceAppLayout Integration', () => {
       expect(screen.getByTestId('has-custom-user-menu')).toHaveTextContent('true');
     });
 
-    it('integrates with custom logo', () => {
-      const CustomLogo = () => (
-        <div data-testid="custom-logo">
-          <img src="/custom-logo.svg" alt="Custom Logo" />
-        </div>
-      );
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" customLogo={<CustomLogo />} enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-      expect(screen.getByTestId('has-custom-logo')).toHaveTextContent('true');
-      expect(screen.getByTestId('logo-url')).toHaveTextContent('default');
-    });
   });
 
   describe('Navigation Integration', () => {
@@ -698,7 +703,7 @@ describe('PaceAppLayout Integration', () => {
       { id: 'admin', label: 'Admin', href: '/admin' }
     ];
 
-    it('integrates permission enforcement with navigation', async () => {
+    it('integrates permission enforcement with navigation', { timeout: 15000 }, async () => {
       const routePermissions = {
         '/dashboard': 'read',
         '/settings': 'read'
@@ -719,7 +724,7 @@ describe('PaceAppLayout Integration', () => {
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
         expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
+      }, { timeout: 10000 });
     });
 
     it('integrates permission filtering with navigation items', async () => {
@@ -730,7 +735,6 @@ describe('PaceAppLayout Integration', () => {
       };
       
       // Get the mocked isPermitted and update it to deny 'private' page access
-      const rbacApi = await import('../../rbac/api');
       
       render(
         <TestWrapper>
@@ -750,7 +754,7 @@ describe('PaceAppLayout Integration', () => {
       }, { timeout: 2000 });
     });
 
-    it('integrates custom page ID mapping with permissions', async () => {
+    it('integrates custom page ID mapping with permissions', { timeout: 15000 }, async () => {
       const pageIdMapping = {
         '/test-path': 'custom-page-id'
       };
@@ -772,7 +776,7 @@ describe('PaceAppLayout Integration', () => {
       }, { timeout: 2000 });
     });
 
-    it('integrates permission fallback with custom components', async () => {
+    it('integrates permission fallback with custom components', { timeout: 15000 }, async () => {
       // Mock the RBAC system to deny permission
       const CustomFallback = () => (
         <div data-testid="custom-fallback">
@@ -833,7 +837,7 @@ describe('PaceAppLayout Integration', () => {
       expect(screen.getByRole('contentinfo')).toBeInTheDocument(); // footer
       
       const main = screen.getByTestId('mock-outlet').parentElement;
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
+      expect(main).toHaveClass('px-4', 'w-full', 'max-w-app-content-max', 'mx-auto', 'py-8');
     });
 
     it('ensures main content area grows to fill available space', () => {
@@ -844,7 +848,7 @@ describe('PaceAppLayout Integration', () => {
       );
       
       const main = screen.getByTestId('mock-outlet').parentElement;
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
+      expect(main).toHaveClass('px-4', 'w-full', 'max-w-app-content-max', 'mx-auto', 'py-8');
     });
 
     it('integrates custom header className', () => {
@@ -864,7 +868,7 @@ describe('PaceAppLayout Integration', () => {
         </TestWrapper>
       );
       
-      expect(screen.getByTestId('mock-header')).toHaveClass('sticky', 'top-0', 'z-[40]', 'w-full');
+      expect(screen.getByTestId('mock-header')).toHaveClass('sticky', 'top-0', 'z-header', 'w-full');
     });
   });
 
@@ -952,7 +956,7 @@ describe('PaceAppLayout Integration', () => {
       }, { timeout: 2000 });
     });
 
-    it('handles complex navigation with custom items and permissions', async () => {
+    it('handles complex navigation with custom items and permissions', { timeout: 15000 }, async () => {
       // Mock permission check to filter admin access
       mockIsPermitted.mockImplementation((input) => {
         if (input.pageId === 'admin') return Promise.resolve(false);
@@ -1025,7 +1029,6 @@ describe('PaceAppLayout Integration', () => {
       
       const HeaderActions = () => <div data-testid="header-actions">Actions</div>;
       const CustomUserMenu = () => <div data-testid="custom-user-menu">Menu</div>;
-      const CustomLogo = () => <div data-testid="custom-logo">Logo</div>;
       
       const routePermissions = {
         '/custom1': 'read',
@@ -1044,7 +1047,6 @@ describe('PaceAppLayout Integration', () => {
             navItems={stableConfigNavItems}
             headerActions={<HeaderActions />}
             customUserMenu={<CustomUserMenu />}
-            customLogo={<CustomLogo />}
             showContextSelector={false}
             showUserMenu={false}
             headerClassName="complex-header-class"
@@ -1059,7 +1061,6 @@ describe('PaceAppLayout Integration', () => {
       // Verify all custom components are rendered
       expect(screen.getByTestId('header-actions')).toBeInTheDocument();
       expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
       
       // Verify configuration is applied
       expect(screen.getByTestId('app-name')).toHaveTextContent('Complex App');
@@ -1069,7 +1070,7 @@ describe('PaceAppLayout Integration', () => {
       expect(screen.getByTestId('mock-header')).toHaveClass('complex-header-class');
     });
 
-    it('handles dynamic configuration changes', async () => {
+    it('handles dynamic configuration changes', { timeout: 15000 }, async () => {
       // Ensure super admin check resolves immediately
       mockIsSuperAdmin.mockResolvedValue(false);
       

package/src/components/PaceAppLayout/PaceAppLayout.performance.test.tsx

@@ -1,3 +1,17 @@
+/**
+ * @file PaceAppLayout Performance Tests
+ * @package @jmruthers/pace-core
+ * @module Components/PaceAppLayout/Performance
+ * @since 0.1.0
+ *
+ * Comprehensive performance tests for PaceAppLayout component covering:
+ * - Render performance and optimization
+ * - Re-render prevention with stable props
+ * - Memory usage and cleanup
+ * - Navigation performance
+ * - Permission check performance
+ */
+
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
@@ -202,6 +216,7 @@ vi.mock('../../providers/services/EventServiceProvider', () => {
 
 // Define mocks using vi.hoisted() so they're available in hoisted vi.mock factories
 // Note: Cannot export hoisted variables directly, so we define them and access directly in tests
+// CRITICAL: All mocks must resolve immediately to prevent test hanging
 const mockIsPermitted = vi.hoisted(() => vi.fn().mockResolvedValue(true));
 const mockCheckPermission = vi.hoisted(() => vi.fn().mockResolvedValue(true));
 const mockHasPermissionRBAC = vi.hoisted(() => vi.fn().mockResolvedValue(true));
@@ -228,16 +243,17 @@ vi.mock('@supabase/supabase-js', () => {
 
 // Mock the new RBAC system for performance testing
 // Reference hoisted mocks - they're available when factory runs
+// CRITICAL: All async mocks must resolve immediately to prevent test hanging
 vi.mock('../../rbac/api', () => ({
   isPermitted: mockIsPermitted,
   isPermittedCached: vi.fn().mockResolvedValue(true),
   getPermissionMap: vi.fn().mockResolvedValue({}),
   getAccessLevel: vi.fn().mockResolvedValue('viewer'),
   isSuperAdmin: mockIsSuperAdmin,
-  setupRBAC: vi.fn()
+  setupRBAC: vi.fn().mockResolvedValue(undefined)
 }));
 
-// Mock RBAC hooks
+// Mock RBAC hooks - mock individual files since barrel was removed
 // Reference hoisted mocks - they're available when factory runs
 // Mock useCan hook - create a mock function that can be controlled in tests
 const mockUseCanFn = vi.fn(() => ({
@@ -247,7 +263,7 @@ const mockUseCanFn = vi.fn(() => ({
   refetch: vi.fn().mockResolvedValue(undefined),
 }));
 
-vi.mock('../../rbac/hooks', () => ({
+vi.mock('../../rbac/hooks/useRBAC', () => ({
   useRBAC: vi.fn(() => ({
     hasPermission: mockHasPermissionRBAC,
     isLoading: false,
@@ -260,7 +276,13 @@ vi.mock('../../rbac/hooks', () => ({
     eventRoles: [],
     permissionMap: {},
   })),
+}));
+
+vi.mock('../../rbac/hooks/usePermissions', () => ({
   useCan: (...args: any[]) => mockUseCanFn(...args),
+}));
+
+vi.mock('../../rbac/hooks/useResolvedScope', () => ({
   useResolvedScope: vi.fn(() => ({
     resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
     isLoading: false,
@@ -370,6 +392,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 
       (performance as any).memory = { usedJSHeapSize: 10_000_000 };
 
+      // CRITICAL: Ensure all async mocks resolve immediately to prevent hanging
       mockUpdatePassword.mockResolvedValue({ error: null });
       mockCheckPermission.mockClear();
       mockCheckPermission.mockResolvedValue(true);
@@ -378,15 +401,29 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       // Reset RBAC hook mock
       mockHasPermissionRBAC.mockClear();
       mockHasPermissionRBAC.mockResolvedValue(true);
+      // Ensure super admin mock resolves immediately
+      mockIsSuperAdmin.mockClear();
+      mockIsSuperAdmin.mockResolvedValue(false);
+      // Reset useCan mock to return resolved state
+      mockUseCanFn.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
     });
 
     afterEach(() => {
       performanceNowSpy?.mockRestore();
       (performance as any).memory = originalPerformanceMemory;
+      // Clear all timers to prevent hanging
+      vi.clearAllTimers();
+      // Ensure all mocks are reset
+      vi.clearAllMocks();
     });
 
   describe('Rendering Performance', () => {
-    it('renders within performance threshold', async () => {
+    it('renders within performance threshold', { timeout: 10000 }, async () => {
       render(
         <TestWrapper>
           <PaceAppLayout appName="Test App" />
@@ -395,30 +432,27 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
     });
 
-      it('renders with custom components within threshold', async () => {
-        const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
+      it('renders with custom components within threshold', { timeout: 10000 }, async () => {
         const CustomUserMenu = () => <div data-testid="custom-user-menu">Custom Menu</div>;
 
         render(
           <TestWrapper>
             <PaceAppLayout
               appName="Test App"
-              customLogo={<CustomLogo />}
               customUserMenu={<CustomUserMenu />}
             />
           </TestWrapper>
         );
 
         await waitFor(() => {
-          expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
           expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
-        });
+        }, { timeout: 5000 });
       });
 
-      it('renders with large navigation items within threshold', async () => {
+      it('renders with large navigation items within threshold', { timeout: 10000 }, async () => {
         const largeNavItems = Array.from({ length: 50 }, (_, i) => ({
           id: `nav-${i}`,
           label: `Navigation ${i}`,
@@ -433,7 +467,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 
         await waitFor(() => {
           expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        });
+        }, { timeout: 5000 });
         expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
       });
   });
@@ -452,7 +486,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       // Wait for permission check to complete and component to render
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
       
       // Use real performance.now() for accurate timing (temporarily restore the spy)
       // Note: We're measuring after mount, so this should be very fast
@@ -501,7 +535,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       // Wait for component to fully mount (including super admin check)
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
       
       // Use real performance.now() for accurate timing (temporarily restore the spy)
       performanceNowSpy?.mockRestore();
@@ -529,7 +563,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       }
     });
 
-      it('handles permission check errors efficiently', async () => {
+      it('handles permission check errors efficiently', { timeout: 10000 }, async () => {
         mockUseCanFn.mockReturnValue({
           can: false,
           isLoading: false,
@@ -545,12 +579,12 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 
         await waitFor(() => {
           expect(screen.getByText('Permission check failed')).toBeInTheDocument();
-        });
+        }, { timeout: 5000 });
       });
   });
 
   describe('Memory Usage', () => {
-    it('does not cause significant memory leaks on re-renders', () => {
+    it('does not cause significant memory leaks on re-renders', { timeout: 10000 }, () => {
       const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
       
       const { rerender } = render(
@@ -581,7 +615,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       }
     });
 
-    it('handles large navigation items without memory issues', () => {
+    it('handles large navigation items without memory issues', { timeout: 10000 }, () => {
       const largeNavItems = Array.from({ length: 100 }, (_, i) => ({
         id: `nav-${i}`,
         label: `Navigation ${i}`,
@@ -611,7 +645,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   });
 
   describe('Re-render Performance', () => {
-    it('handles prop changes efficiently', () => {
+    it('handles prop changes efficiently', { timeout: 10000 }, () => {
       const { rerender } = render(
         <TestWrapper>
           <PaceAppLayout appName="Test App" />
@@ -646,7 +680,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       }
     });
 
-    it('handles permission enforcement toggles efficiently', async () => {
+    it('handles permission enforcement toggles efficiently', { timeout: 10000 }, async () => {
       // Ensure super admin check resolves immediately for performance testing
       mockIsSuperAdmin.mockResolvedValue(false);
       
@@ -659,7 +693,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       // Wait for initial mount
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
       
       // Use real performance.now() for accurate timing (temporarily restore the spy)
       performanceNowSpy?.mockRestore();
@@ -672,7 +706,10 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
         </TestWrapper>
       );
       
-      await new Promise(resolve => setTimeout(resolve, 10));
+      // Wait for re-render to complete
+      await waitFor(() => {
+        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+      }, { timeout: 1000 });
       
       rerender(
         <TestWrapper>
@@ -701,7 +738,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   });
 
   describe('Navigation Performance', () => {
-    it('handles rapid navigation efficiently', () => {
+    it('handles rapid navigation efficiently', { timeout: 10000 }, () => {
       const navItems = [
         { id: 'home', label: 'Home', href: '/' },
         { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
@@ -731,18 +768,18 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       
       // Rapidly click navigation buttons
       // If not, this test will fail.
-      // @ts-ignore
+      // @ts-expect-error - fireEvent.click is used for performance testing
       fireEvent.click(screen.getByTestId('nav-nav-0'));
-      // @ts-ignore
+      // @ts-expect-error - fireEvent.click is used for performance testing
       fireEvent.click(screen.getByTestId('nav-nav-1'));
-      // @ts-ignore
+      // @ts-expect-error - fireEvent.click is used for performance testing
       fireEvent.click(screen.getByTestId('nav-nav-2'));
       
       // Should handle rapid navigation without performance issues
       expect(mockNavigate).toHaveBeenCalledTimes(3);
     });
 
-    it('handles large navigation items efficiently', () => {
+    it('handles large navigation items efficiently', { timeout: 10000 }, () => {
       const largeNavItems = Array.from({ length: 50 }, (_, i) => ({
         id: `nav-${i}`,
         label: `Navigation ${i}`,
@@ -760,7 +797,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       // Click on multiple navigation items
       for (let i = 0; i < 5; i++) {
         const navButton = screen.getByTestId(`nav-nav-${i}`);
-        // @ts-ignore
+        // @ts-expect-error - fireEvent.click expects specific event types, but test environment allows this
         fireEvent.click(navButton);
       }
       
@@ -772,7 +809,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   });
 
   describe('Authentication Performance', () => {
-    it('handles authentication actions efficiently', async () => {
+    it('handles authentication actions efficiently', { timeout: 10000 }, async () => {
       // Ensure super admin check resolves immediately for performance testing
       mockIsSuperAdmin.mockResolvedValue(false);
       
@@ -789,7 +826,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       // Wait for component to fully mount (including super admin check)
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
       
       // Use real performance.now() for accurate timing (temporarily restore the spy)
       performanceNowSpy?.mockRestore();
@@ -802,8 +839,11 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       fireEvent.click(signOutButton);
       fireEvent.click(changePasswordButton);
       
-      // Wait for async operations to complete
-      await new Promise(resolve => setTimeout(resolve, 50));
+      // Wait for async operations to complete with timeout
+      await waitFor(() => {
+        expect(mockSignOut).toHaveBeenCalled();
+        expect(mockUpdatePassword).toHaveBeenCalled();
+      }, { timeout: 1000 });
       
       const endTime = performance.now();
       const authTime = endTime - startTime;
@@ -827,7 +867,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
     });
 
-    it('handles authentication errors efficiently', async () => {
+    it('handles authentication errors efficiently', { timeout: 10000 }, async () => {
       // Ensure super admin check resolves immediately for performance testing
       mockIsSuperAdmin.mockResolvedValue(false);
       
@@ -846,7 +886,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       // Wait for component to fully mount (including super admin check)
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
       
       // Use real performance.now() for accurate timing (temporarily restore the spy)
       performanceNowSpy?.mockRestore();
@@ -859,8 +899,11 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       fireEvent.click(signOutButton);
       fireEvent.click(changePasswordButton);
       
-      // Wait for async operations to complete
-      await new Promise(resolve => setTimeout(resolve, 50));
+      // Wait for async operations to complete with timeout
+      await waitFor(() => {
+        expect(mockSignOut).toHaveBeenCalled();
+        expect(mockUpdatePassword).toHaveBeenCalled();
+      }, { timeout: 1000 });
       
       const endTime = performance.now();
       const authTime = endTime - startTime;
@@ -884,7 +927,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   });
 
   describe('Complex Configuration Performance', () => {
-    it('handles complex configurations efficiently', async () => {
+    it('handles complex configurations efficiently', { timeout: 10000 }, async () => {
       const customNavItems = Array.from({ length: 20 }, (_, i) => ({
         id: `nav-${i}`,
         label: `Navigation ${i}`,
@@ -939,7 +982,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       await waitFor(() => {
         expect(screen.getByTestId('header-actions')).toBeInTheDocument();
         expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
       
       const endTime = performance.now();
       const renderTime = endTime - startTime;