@jmruthers/pace-core 0.5.191 → 0.6.1

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

@@ -273,7 +273,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 );
 
 describe('PaceAppLayout Component', () => {
-  const defaultProps = {
+  const baseProps = {
     appName: 'Test App',
   };
 
@@ -296,7 +296,7 @@ describe('PaceAppLayout Component', () => {
     it('renders with default props', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -309,7 +309,7 @@ describe('PaceAppLayout Component', () => {
     it('renders with custom app name', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} appName="Custom App" />
+          <PaceAppLayout {...baseProps} appName="Custom App" />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -325,7 +325,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} navItems={customNavItems} />
+          <PaceAppLayout {...baseProps} navItems={customNavItems} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -337,7 +337,7 @@ describe('PaceAppLayout Component', () => {
     it('renders with default navigation items when none provided', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -352,7 +352,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} headerActions={headerActions} />
+          <PaceAppLayout {...baseProps} headerActions={headerActions} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -365,7 +365,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} customLogo={customLogo} />
+          <PaceAppLayout {...baseProps} customLogo={customLogo} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -378,7 +378,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} customUserMenu={customUserMenu} />
+          <PaceAppLayout {...baseProps} customUserMenu={customUserMenu} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -389,7 +389,7 @@ describe('PaceAppLayout Component', () => {
     it('renders with custom header className', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} headerClassName="custom-header" />
+          <PaceAppLayout {...baseProps} headerClassName="custom-header" />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -402,7 +402,7 @@ describe('PaceAppLayout Component', () => {
     it('uses default header className when not provided', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -416,7 +416,7 @@ describe('PaceAppLayout Component', () => {
     it('shows event selector by default', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -427,7 +427,7 @@ describe('PaceAppLayout Component', () => {
     it('hides event selector when showEventSelector is false', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} showEventSelector={false} />
+          <PaceAppLayout {...baseProps} showEventSelector={false} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -438,7 +438,7 @@ describe('PaceAppLayout Component', () => {
     it('shows event selector when showEventSelector is explicitly true', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} showEventSelector={true} />
+          <PaceAppLayout {...baseProps} showEventSelector={true} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -451,7 +451,7 @@ describe('PaceAppLayout Component', () => {
     it('shows user menu by default', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -462,7 +462,7 @@ describe('PaceAppLayout Component', () => {
     it('hides user menu when showUserMenu is false', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} showUserMenu={false} />
+          <PaceAppLayout {...baseProps} showUserMenu={false} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -476,7 +476,7 @@ describe('PaceAppLayout Component', () => {
       const user = userEvent.setup();
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -489,7 +489,7 @@ describe('PaceAppLayout Component', () => {
       const user = userEvent.setup();
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -507,7 +507,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} navItems={customNavItems} />
+          <PaceAppLayout {...baseProps} navItems={customNavItems} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -522,7 +522,7 @@ describe('PaceAppLayout Component', () => {
     it('passes current path to header', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} />
+          <PaceAppLayout {...baseProps} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -536,7 +536,7 @@ describe('PaceAppLayout Component', () => {
     it('renders normally when enforcePermissions is false', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={false} />
+          <PaceAppLayout {...baseProps} enforcePermissions={false} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -547,7 +547,26 @@ describe('PaceAppLayout Component', () => {
 
     it('shows loading state when checking permissions', async () => {
       // Mock useCan to return loading state
-      mockUseCan.mockReturnValueOnce({
+      // Need to ensure currentPageId is set so permission checking happens
+      // Use a path that will result in a valid pageId (e.g., '/dashboard' -> 'dashboard')
+      mockLocation.pathname = '/dashboard';
+      
+      // Mock useRBAC to return non-super-admin so permission check isn't bypassed
+      // Also ensure isSuperAdminDirect check returns false
+      mockIsSuperAdminAPI.mockResolvedValue(false);
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        isLoading: false,
+        hasPermission: vi.fn(),
+        hasAnyPermission: vi.fn(),
+        hasRole: vi.fn(),
+        hasAnyRole: vi.fn(),
+        permissionMap: {},
+        roleMap: {},
+      });
+      
+      // Mock useCan to return loading state - use mockReturnValue to ensure it persists
+      mockUseCan.mockReturnValue({
         can: false,
         isLoading: true,
         error: null,
@@ -556,12 +575,16 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={true} />
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
         </TestWrapper>,
         { withRouter: false }
       );
       
-      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      // Wait for loading state to appear
+      // The component should show loading state when isCheckingPermission is true
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      }, { timeout: 2000 });
       expect(screen.queryByTestId('header')).not.toBeInTheDocument();
     });
 
@@ -579,7 +602,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={true} />
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -612,7 +635,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={true} />
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -644,7 +667,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={true} />
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -681,7 +704,7 @@ describe('PaceAppLayout Component', () => {
       
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={true} />
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -719,7 +742,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true} 
             permissionFallback={customFallback}
           />
@@ -755,7 +778,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
             enforcePagePermissions={true}
             pagePermissionFallback={pageFallback}
@@ -791,7 +814,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             navItems={customNavItems}
             enforcePermissions={true}
             routePermissions={{
@@ -827,7 +850,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             navItems={customNavItems}
             enforcePermissions={false}
             routePermissions={{
@@ -852,7 +875,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
             routePermissions={{
               '/dashboard': 'update',
@@ -886,7 +909,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
             defaultPermission="create"
             routePermissions={{
@@ -924,7 +947,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
           />
         </TestWrapper>,
@@ -953,7 +976,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
             onPageAccessDenied={onPageAccessDenied}
           />
@@ -981,7 +1004,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
             strictMode={true}
             onStrictModeViolation={onStrictModeViolation}
@@ -1013,7 +1036,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             roleBasedRouting={true}
             routeConfig={routeConfig}
             onRouteAccessDenied={onRouteAccessDenied}
@@ -1042,7 +1065,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             roleBasedRouting={true}
             routeConfig={routeConfig}
             strictMode={true}
@@ -1084,7 +1107,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <FallbackWrapper>
           <PaceAppLayout
-            {...defaultProps}
+            {...baseProps}
             roleBasedRouting={true}
             strictMode={true}
             fallbackRoute="/no-access"
@@ -1128,7 +1151,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
           />
         </TestWrapper>,
@@ -1170,7 +1193,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             enforcePermissions={true}
           />
         </TestWrapper>,
@@ -1194,7 +1217,7 @@ describe('PaceAppLayout Component', () => {
       it('renders with proper semantic HTML elements', () => {
         renderWithProviders(
           <TestWrapper>
-            <PaceAppLayout {...defaultProps} />
+            <PaceAppLayout {...baseProps} />
           </TestWrapper>,
           { withRouter: false }
         );
@@ -1207,7 +1230,7 @@ describe('PaceAppLayout Component', () => {
       it('provides proper main content area', () => {
         renderWithProviders(
           <TestWrapper>
-            <PaceAppLayout {...defaultProps} />
+            <PaceAppLayout {...baseProps} />
           </TestWrapper>,
           { withRouter: false }
         );
@@ -1220,7 +1243,7 @@ describe('PaceAppLayout Component', () => {
       it('renders main content area with proper styling', () => {
         renderWithProviders(
           <TestWrapper>
-            <PaceAppLayout {...defaultProps} />
+            <PaceAppLayout {...baseProps} />
           </TestWrapper>,
           { withRouter: false }
         );
@@ -1234,7 +1257,7 @@ describe('PaceAppLayout Component', () => {
       it('has accessible navigation', () => {
         renderWithProviders(
           <TestWrapper>
-            <PaceAppLayout {...defaultProps} />
+            <PaceAppLayout {...baseProps} />
           </TestWrapper>,
           { withRouter: false }
         );
@@ -1246,7 +1269,7 @@ describe('PaceAppLayout Component', () => {
       it('has accessible user menu', () => {
         renderWithProviders(
           <TestWrapper>
-            <PaceAppLayout {...defaultProps} />
+            <PaceAppLayout {...baseProps} />
           </TestWrapper>,
           { withRouter: false }
         );
@@ -1260,7 +1283,7 @@ describe('PaceAppLayout Component', () => {
       it('provides meaningful text for screen readers', () => {
         renderWithProviders(
           <TestWrapper>
-            <PaceAppLayout {...defaultProps} />
+            <PaceAppLayout {...baseProps} />
           </TestWrapper>,
           { withRouter: false }
         );
@@ -1275,7 +1298,7 @@ describe('PaceAppLayout Component', () => {
         const user = userEvent.setup();
         renderWithProviders(
           <TestWrapper>
-            <PaceAppLayout {...defaultProps} />
+            <PaceAppLayout {...baseProps} />
           </TestWrapper>,
           { withRouter: false }
         );
@@ -1291,7 +1314,7 @@ describe('PaceAppLayout Component', () => {
     it('handles empty navigation items array', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} navItems={[]} />
+          <PaceAppLayout {...baseProps} navItems={[]} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -1309,7 +1332,7 @@ describe('PaceAppLayout Component', () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
-            {...defaultProps} 
+            {...baseProps} 
             navItems={navItemsWithoutHref}
             enforcePermissions={false}
           />
@@ -1326,7 +1349,7 @@ describe('PaceAppLayout Component', () => {
       // without breaking. We don't enforce permissions to simplify the test.
       const { rerender } = renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={false} />
+          <PaceAppLayout {...baseProps} enforcePermissions={false} />
         </TestWrapper>,
         { withRouter: false }
       );
@@ -1340,7 +1363,7 @@ describe('PaceAppLayout Component', () => {
       mockLocation.pathname = '/settings';
       rerender(
         <TestWrapper>
-          <PaceAppLayout {...defaultProps} enforcePermissions={false} />
+          <PaceAppLayout {...baseProps} enforcePermissions={false} />
         </TestWrapper>
       );