@jmruthers/pace-core 0.6.10 → 0.6.11

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

@@ -45,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>,
   };
 });
 
@@ -74,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' },
@@ -82,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
@@ -412,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');
     });
   });
 
@@ -1336,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', () => {
@@ -1348,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');
       });
     });
 
@@ -1610,5 +1613,526 @@ describe('PaceAppLayout Component', () => {
         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 });
+    });
   });
 });