@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -17,6 +17,8 @@ import { MemoryRouter } from 'react-router-dom';
 import { PaceAppLayout } from './PaceAppLayout';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
+import { logger } from '../../utils/core/logger';
+import { EventContextRequiredError } from '../../rbac/types';
 import {
   mockNavigate,
   mockLocation,
@@ -26,7 +28,6 @@ import {
   mockOrganisation,
   mockOrganisationContext,
   mockIsPermitted,
-  mockHasPermissionRBAC,
   mockUseRBAC,
   mockUseCan,
   resetPaceAppLayoutMocks,
@@ -44,7 +45,7 @@ vi.mock('react-router-dom', async () => {
     ...actual,
     useNavigate: () => mockNavigate,
     useLocation: () => mockLocation,
-    Outlet: () => <div data-testid="outlet">Page Content</div>,
+    Outlet: () => <section data-testid="outlet">Page Content</section>,
   };
 });
 
@@ -73,7 +74,7 @@ vi.mock('../../hooks/useOrganisations', () => ({
   })),
 }));
 
-// Mock useEvents hook (used by useEventTheme)
+// Mock useEvents and useOptionalEvents (PaceAppLayout uses useOptionalEvents for event context)
 vi.mock('../../hooks/useEvents', () => ({
   useEvents: vi.fn(() => ({
     selectedEvent: { event_id: 'event-123' },
@@ -81,6 +82,9 @@ vi.mock('../../hooks/useEvents', () => ({
     isLoading: false,
     error: null,
   })),
+  useOptionalEvents: vi.fn(() => ({
+    selectedEvent: { event_id: 'event-123' },
+  })),
 }));
 
 // Mock useEventTheme to avoid EventServiceProvider requirement
@@ -164,30 +168,36 @@ vi.mock('../../rbac/api', () => ({
   getAccessLevel: vi.fn().mockResolvedValue('viewer'),
 }));
 
-// Mock RBAC hooks
+// Mock RBAC hooks - mock individual files since barrel was removed
 // Note: Must use function syntax in factory to avoid hoisting issues
 // Import mockUseCan from test-setup so tests can control it
-vi.mock('../../rbac/hooks', async () => {
+vi.mock('../../rbac/hooks/useRBAC', () => ({
+  useRBAC: vi.fn(() => ({
+    hasPermission: vi.fn().mockResolvedValue(true),
+    isLoading: false,
+    error: null,
+    hasGlobalPermission: vi.fn().mockResolvedValue(true),
+    hasOrganisationPermission: vi.fn().mockResolvedValue(true),
+    hasEventPermission: vi.fn().mockResolvedValue(true),
+    globalRole: null,
+    organisationRoles: [],
+    eventRoles: [],
+    permissionMap: {},
+  })),
+}));
+
+vi.mock('../../rbac/hooks/useResolvedScope', () => ({
+  useResolvedScope: vi.fn(() => ({
+    resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+vi.mock('../../rbac/hooks/usePermissions', async () => {
   const testSetup = await import('./test-setup.tsx');
   return {
-    useRBAC: vi.fn(() => ({
-      hasPermission: vi.fn().mockResolvedValue(true),
-      isLoading: false,
-      error: null,
-      hasGlobalPermission: vi.fn().mockResolvedValue(true),
-      hasOrganisationPermission: vi.fn().mockResolvedValue(true),
-      hasEventPermission: vi.fn().mockResolvedValue(true),
-      globalRole: null,
-      organisationRoles: [],
-      eventRoles: [],
-      permissionMap: {},
-    })),
     useCan: (...args: any[]) => testSetup.mockUseCan(...args),
-    useResolvedScope: vi.fn(() => ({
-      resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
-      isLoading: false,
-      error: null,
-    })),
   };
 });
 
@@ -203,7 +213,7 @@ vi.mock('../Header', () => ({
     user, 
     onSignOut, 
     onChangePassword, 
-    currentPath, 
+    _currentPath, 
     onNavigate, 
     showContextSelector, 
     showUserMenu, 
@@ -284,12 +294,21 @@ describe('PaceAppLayout Component', () => {
     // Get the mocked isSuperAdmin function
     const rbacApi = await import('../../rbac/api');
     mockIsSuperAdmin = vi.mocked(rbacApi.isSuperAdmin);
-    // Reset RBAC API mocks
+    // CRITICAL: Ensure all async mocks resolve immediately to prevent hanging
+    mockIsSuperAdminAPI.mockResolvedValue(false);
+    // Reset RBAC API mocks - must resolve immediately
     const { isPermitted, isPermittedCached } = await import('../../rbac/api');
     vi.mocked(isPermitted).mockReset();
     vi.mocked(isPermitted).mockResolvedValue(true);
     vi.mocked(isPermittedCached).mockReset();
     vi.mocked(isPermittedCached).mockResolvedValue(true);
+    // Ensure useCan mock resolves immediately
+    mockUseCan.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn().mockResolvedValue(undefined),
+    });
   });
 
   describe('Basic Rendering', () => {
@@ -360,18 +379,6 @@ describe('PaceAppLayout Component', () => {
       expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
     });
 
-    it('renders with custom logo', () => {
-      const customLogo = <div data-testid="custom-logo">Custom Logo</div>;
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout {...baseProps} customLogo={customLogo} />
-        </TestWrapper>,
-        { withRouter: false }
-      );
-      
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-    });
 
     it('renders with custom user menu', () => {
       const customUserMenu = <div data-testid="custom-user-menu">Custom User Menu</div>;
@@ -408,7 +415,7 @@ describe('PaceAppLayout Component', () => {
       );
       
       const header = screen.getByTestId('header');
-      expect(header).toHaveClass('sticky', 'top-0', 'z-[40]', 'w-full');
+      expect(header).toHaveClass('sticky', 'top-0', 'z-header', 'w-full');
     });
   });
 
@@ -621,6 +628,35 @@ describe('PaceAppLayout Component', () => {
       }, { timeout: 3000 });
     });
 
+    it('renders layout when permission error is a context error', async () => {
+      mockIsSuperAdmin.mockResolvedValue(false);
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: new EventContextRequiredError(),
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockIsSuperAdmin).toHaveBeenCalled();
+      }, { timeout: 2000 });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+        expect(screen.getByTestId('outlet')).toBeInTheDocument();
+        expect(screen.queryByText('Permission Error')).not.toBeInTheDocument();
+        expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
     it('shows access denied when user lacks permission', async () => {
       // Ensure super admin check completes first - resolve immediately
       mockIsSuperAdmin.mockResolvedValue(false);
@@ -832,7 +868,7 @@ describe('PaceAppLayout Component', () => {
       // Wait for the component to render initially
       await waitFor(() => {
         expect(screen.getByTestId('header')).toBeInTheDocument();
-      });
+      }, { timeout: 10000 });
       
       // Verify that navigation items are rendered
       await waitFor(() => {
@@ -842,6 +878,38 @@ describe('PaceAppLayout Component', () => {
       }, { timeout: 2000 });
     });
 
+    it('falls back to base navigation when permission map fails', async () => {
+      const { getPermissionMap } = await import('../../rbac/api');
+      vi.mocked(getPermissionMap).mockRejectedValueOnce(new Error('permission map failure'));
+
+      const customNavItems = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+        { id: 'settings', label: 'Settings', href: '/settings', icon: 'Settings' },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout
+            {...baseProps}
+            navItems={customNavItems}
+            enforcePermissions={false}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(logger.error).toHaveBeenCalledWith(
+          'PaceAppLayout',
+          'Failed to load permission map for navigation filtering',
+          expect.objectContaining({ userId: 'user-123' })
+        );
+      }, { timeout: 2000 });
+
+      expect(screen.getByTestId('nav-item-home')).toBeInTheDocument();
+      expect(screen.getByTestId('nav-item-settings')).toBeInTheDocument();
+    });
+
     it('always filters navigation items by permissions (filtering cannot be disabled)', async () => {
       const customNavItems = [
         { id: 'home', label: 'Home', href: '/', icon: 'Home' },
@@ -1096,11 +1164,13 @@ describe('PaceAppLayout Component', () => {
         },
       ];
 
+      // Update mock location before rendering
       mockLocation.pathname = '/secure';
       mockNavigate.mockClear();
 
       const { isPermittedCached } = await import('../../rbac/api');
-      vi.mocked(isPermittedCached).mockResolvedValueOnce(false);
+      // Mock to return false for permission check
+      vi.mocked(isPermittedCached).mockResolvedValue(false);
 
       const FallbackWrapper = ({ children }: { children: React.ReactNode }) => (
         <MemoryRouter initialEntries={['/secure']}>
@@ -1123,9 +1193,10 @@ describe('PaceAppLayout Component', () => {
         { withRouter: false }
       );
 
+      // Wait for the async permission check and navigation
       await waitFor(() => {
         expect(mockNavigate).toHaveBeenCalledWith('/no-access', { replace: true });
-      });
+      }, { timeout: 5000 });
 
       expect(onRouteAccessDenied).toHaveBeenCalledWith('/secure', 'Insufficient permissions');
       expect(onRouteStrictModeViolation).toHaveBeenCalledWith('/secure', 'Insufficient permissions');
@@ -1214,6 +1285,33 @@ describe('PaceAppLayout Component', () => {
         expect(screen.getByRole('heading', { name: 'Access Denied' })).toBeInTheDocument();
       }, { timeout: 3000 });
     });
+
+    it('shows organisation loading state when context is still resolving', async () => {
+      const { useOrganisations } = await import('../../hooks/useOrganisations');
+      const mockedUseOrganisations = vi.mocked(useOrganisations);
+      mockedUseOrganisations.mockReturnValue({
+        ...mockOrganisationContext,
+        selectedOrganisation: null,
+        isLoading: true,
+        isContextReady: false,
+        hasValidOrganisationContext: false,
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Loading organisation context...')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      mockedUseOrganisations.mockReturnValue({
+        ...mockOrganisationContext,
+      });
+    });
   });
 
   describe('Accessibility', () => {
@@ -1241,7 +1339,7 @@ describe('PaceAppLayout Component', () => {
         
         const main = screen.getByRole('main');
         expect(main).toBeInTheDocument();
-        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('renders main content area with proper styling', () => {
@@ -1253,7 +1351,7 @@ describe('PaceAppLayout Component', () => {
         );
         
         const main = screen.getByTestId('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');
       });
     });
 
@@ -1361,7 +1459,7 @@ describe('PaceAppLayout Component', () => {
       // Wait for initial render
       await waitFor(() => {
         expect(screen.getByTestId('header')).toBeInTheDocument();
-      });
+      }, { timeout: 10000 });
       
       // Change location to trigger new render
       mockLocation.pathname = '/settings';
@@ -1393,7 +1491,6 @@ describe('PaceAppLayout Component', () => {
         { withRouter: false }
       );
       
-      const initialHeader = screen.getByTestId('header');
       
       // Re-render with same props
       rerender(
@@ -1405,4 +1502,637 @@ describe('PaceAppLayout Component', () => {
       expect(screen.getByTestId('header')).toBeInTheDocument();
     });
   });
+
+  describe('Context Integration', () => {
+    it('handles missing organisation context gracefully', async () => {
+      // Mock useOrganisations hook directly
+      const { useOrganisations } = await import('../../hooks/useOrganisations');
+      vi.mocked(useOrganisations).mockReturnValueOnce({
+        ...mockOrganisationContext,
+        selectedOrganisation: null,
+        isContextReady: false,
+        hasValidOrganisationContext: false,
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      // Component should handle missing organisation context
+      await waitFor(() => {
+        // Should either show loading or handle gracefully
+        const header = screen.queryByTestId('header');
+        const loading = screen.queryByText(/loading|checking/i);
+        expect(header || loading).toBeTruthy();
+      }, { timeout: 2000 });
+    });
+
+    it('handles context changes during runtime', async () => {
+      const { rerender } = renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      // Simulate context change by rerendering
+      rerender(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>
+      );
+
+      // Component should handle context change gracefully
+      expect(screen.getByTestId('header')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases - Extended', () => {
+    it('handles route changes and permission re-evaluation', { timeout: 10000 }, async () => {
+      mockLocation.pathname = '/dashboard';
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            routePermissions={{
+              '/dashboard': 'read',
+              '/settings': 'update',
+            }}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      // Simulate route change
+      mockLocation.pathname = '/settings';
+      
+      // Component should re-evaluate permissions for new route
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalled();
+      }, { timeout: 2000 });
+    });
+
+    it('handles errors during permission resolution gracefully', { timeout: 10000 }, async () => {
+      // Ensure super admin check completes first
+      mockIsSuperAdmin.mockResolvedValue(false);
+      
+      // Mock useCan to return an error
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: new Error('Permission resolution failed'),
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      // Component should handle error gracefully
+      await waitFor(() => {
+        // Check for error message (may be shown in error UI)
+        const errorHeading = screen.queryByRole('heading', { name: /permission error/i });
+        const header = screen.queryByTestId('header');
+        // Should either show error or handle it gracefully
+        expect(errorHeading || header).toBeTruthy();
+      }, { timeout: 3000 });
+    });
+
+    it('handles rapid permission state changes', { timeout: 10000 }, async () => {
+      mockIsSuperAdmin.mockResolvedValue(false);
+      
+      const { rerender } = renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      // Rapidly change permission state
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      rerender(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>
+      );
+
+      // Component should handle rapid changes without crashing
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    it('handles undefined navItems gracefully', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} navItems={undefined} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles empty navItems array', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} navItems={[]} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+  });
+
+  describe('Props and Configuration', () => {
+    it('handles custom headerClassName', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} headerClassName="custom-header-class" />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        const header = screen.getByTestId('header');
+        expect(header).toBeInTheDocument();
+        // Header component should receive className prop
+      }, { timeout: 10000 });
+    });
+
+    it('handles custom logoHref', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} logoHref="/custom-home" />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles showUserMenu prop', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} showUserMenu={false} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles showContextSelector prop', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} showContextSelector={false} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles showOrganisations and showEvents props', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            showOrganisations={false}
+            showEvents={false}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles customUserMenu prop', { timeout: 10000 }, async () => {
+      const customMenu = <div data-testid="custom-user-menu">Custom Menu</div>;
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} customUserMenu={customMenu} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+        expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles headerActions prop', { timeout: 10000 }, async () => {
+      const headerActions = <button data-testid="custom-action">Custom Action</button>;
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} headerActions={headerActions} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+        expect(screen.getByTestId('custom-action')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+  });
+
+  describe('Permission Enforcement - Extended', () => {
+    it('handles enforcePagePermissions prop', { timeout: 10000 }, async () => {
+      mockIsSuperAdmin.mockResolvedValue(false);
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            enforcePagePermissions={true}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles pagePermissionFallback prop', { timeout: 10000 }, async () => {
+      mockIsSuperAdmin.mockResolvedValue(false);
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      const customFallback = <div data-testid="custom-page-fallback">Custom Page Fallback</div>;
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            enforcePagePermissions={true}
+            pagePermissionFallback={customFallback}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Should show fallback or header
+        const fallback = screen.queryByTestId('custom-page-fallback');
+        const header = screen.queryByTestId('header');
+        expect(fallback || header).toBeTruthy();
+      }, { timeout: 10000 });
+    });
+
+    it('handles onPageAccessDenied callback', { timeout: 10000 }, async () => {
+      const user = userEvent.setup();
+      mockIsSuperAdmin.mockResolvedValue(false);
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      const onPageAccessDenied = vi.fn();
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            enforcePagePermissions={true}
+            onPageAccessDenied={onPageAccessDenied}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Callback should be called when access is denied
+        expect(onPageAccessDenied).toHaveBeenCalled();
+      }, { timeout: 10000 });
+    });
+
+    it('handles onStrictModeViolation callback', { timeout: 10000 }, async () => {
+      mockIsSuperAdmin.mockResolvedValue(false);
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      const onStrictModeViolation = vi.fn();
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            strictMode={true}
+            onStrictModeViolation={onStrictModeViolation}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Callback should be called when strict mode violation occurs
+        expect(onStrictModeViolation).toHaveBeenCalled();
+      }, { timeout: 10000 });
+    });
+  });
+
+  describe('Route Configuration', () => {
+    it('handles roleBasedRouting prop', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            roleBasedRouting={true}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles routeConfig prop', { timeout: 10000 }, async () => {
+      const routeConfig = [
+        {
+          path: '/dashboard',
+          component: () => <div>Dashboard</div>,
+          permissions: ['dashboard:read'],
+          pageId: 'dashboard',
+        },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            roleBasedRouting={true}
+            routeConfig={routeConfig}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles fallbackRoute prop', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            roleBasedRouting={true}
+            fallbackRoute="/unauthorized"
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles onRouteAccessDenied callback', { timeout: 10000 }, async () => {
+      const onRouteAccessDenied = vi.fn();
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            roleBasedRouting={true}
+            onRouteAccessDenied={onRouteAccessDenied}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+  });
+
+  describe('Loading States', () => {
+    it('handles loading state during permission check', { timeout: 15000 }, async () => {
+      mockIsSuperAdmin.mockResolvedValue(false);
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Should show loading spinner (canvas with role="status") or header
+        const loading = screen.queryByRole('status');
+        const header = screen.queryByTestId('header');
+        expect(loading || header).toBeTruthy();
+      }, { timeout: 12000 });
+    });
+
+    it('handles loading state during super admin check', { timeout: 10000 }, async () => {
+      // Mock isSuperAdmin to return a pending promise
+      mockIsSuperAdmin.mockImplementation(() => new Promise(() => {}));
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Should show loading or header
+        const loading = screen.queryByTestId('loading-spinner');
+        const header = screen.queryByTestId('header');
+        expect(loading || header).toBeTruthy();
+      }, { timeout: 10000 });
+    });
+  });
+
+  describe('Navigation Items Filtering', () => {
+    it('filters navigation items based on permissions', { timeout: 10000 }, async () => {
+      const navItemsWithPermissions: NavigationItem[] = [
+        { id: 'public', label: 'Public', href: '/public' },
+        { id: 'restricted', label: 'Restricted', href: '/restricted', permissions: ['restricted:read'] },
+      ];
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItemsWithPermissions}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles navigation items with roles', { timeout: 10000 }, async () => {
+      const navItemsWithRoles: NavigationItem[] = [
+        { id: 'admin', label: 'Admin', href: '/admin', roles: ['admin'] },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItemsWithRoles}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+  });
+
+  describe('Error Boundaries and Resilience', () => {
+    it('handles errors in child components gracefully', { timeout: 10000 }, async () => {
+      // Note: React error boundaries catch errors, so they don't propagate to test
+      // This test verifies the component structure is correct
+      // In real apps, errors would be caught by error boundaries
+      const ErrorComponent = () => {
+        throw new Error('Child component error');
+      };
+
+      // Suppress console.error for this test
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      // Component should handle errors from child components
+      // React error boundaries catch errors, so the component may render an error UI
+      // rather than throwing
+      try {
+        renderWithProviders(
+          <TestWrapper>
+            <PaceAppLayout {...baseProps}>
+              <ErrorComponent />
+            </PaceAppLayout>
+          </TestWrapper>,
+          { withRouter: false }
+        );
+        // If error boundary catches it, component may render error UI instead of throwing
+        // This is acceptable behavior
+      } catch (error) {
+        // If error propagates, that's also acceptable (no error boundary)
+        expect(error).toBeInstanceOf(Error);
+      }
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Outlet Rendering', () => {
+    it('renders Outlet for child routes', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('outlet')).toBeInTheDocument();
+        expect(screen.getByText('Page Content')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles multiple nested routes', { timeout: 10000 }, async () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+  });
 });