@jmruthers/pace-core 0.6.6 → 0.6.8

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { NavigationMenu } from './NavigationMenu';
@@ -716,7 +716,7 @@ describe('NavigationMenu Component', () => {
         expect(screen.getByText('Home')).toBeInTheDocument();
       }, { interval: 10 });
 
-      const homeItem = screen.getByText('Home');
+      const homeItem = screen.getByRole('option', { name: 'Home' });
       await user.click(homeItem);
 
       expect(mockNavigate).toHaveBeenCalledWith(
@@ -748,7 +748,7 @@ describe('NavigationMenu Component', () => {
         expect(screen.getByText('Home')).toBeInTheDocument();
       }, { interval: 10 });
 
-      const homeItem = screen.getByText('Home');
+      const homeItem = screen.getByRole('option', { name: 'Home' });
       await user.click(homeItem);
 
       expect(window.location.href).toBe('/');
@@ -1350,14 +1350,16 @@ describe('NavigationMenu Component', () => {
           items={basicNavItems}
           onNavigate={mockNavigate}
           buttonText="Menu"
+          itemsPreFiltered={true}
         />
       );
 
       const openMenu = async () => {
         await user.click(screen.getByRole('combobox'));
         await waitFor(() => {
-          expect(screen.getByText('Home')).toBeInTheDocument();
-        }, { interval: 10 });
+          // Items should appear as options in the listbox
+          expect(screen.getByRole('option', { name: 'Home' })).toBeInTheDocument();
+        }, { interval: 10, timeout: 3000 });
       };
 
       await openMenu();
@@ -1367,10 +1369,38 @@ describe('NavigationMenu Component', () => {
           items={basicNavItems}
           onNavigate={mockNavigate}
           buttonText="Menu"
+          itemsPreFiltered={true}
         />
       );
 
-      await openMenu();
+      // Wait for rerender to complete and component to be ready
+      await waitFor(() => {
+        const combobox = screen.getByRole('combobox');
+        expect(combobox).toBeInTheDocument();
+        expect(combobox).not.toBeDisabled();
+      }, { interval: 10, timeout: 1000 });
+      
+      // The Select component may keep the menu open after rerender
+      // Check if menu is still open, and if so, verify items are still visible
+      // If closed, open it again to verify items remain visible
+      const combobox = screen.getByRole('combobox');
+      const isOpen = combobox.getAttribute('aria-expanded') === 'true';
+      
+      if (!isOpen) {
+        // Menu closed, open it again
+        await user.click(combobox);
+        await waitFor(() => {
+          const updatedCombobox = screen.getByRole('combobox');
+          expect(updatedCombobox).toHaveAttribute('aria-expanded', 'true');
+        }, { interval: 10, timeout: 3000 });
+      }
+      
+      // Now wait for items to appear as options in the visible listbox
+      // This verifies that items remain visible after rerender during permission reload
+      await waitFor(() => {
+        // Items should appear as options in the listbox after rerender
+        expect(screen.getByRole('option', { name: 'Home' })).toBeInTheDocument();
+      }, { interval: 10, timeout: 3000 });
     });
 
     it('renders no selectable items when auth and RBAC providers are unavailable', async () => {
@@ -1423,14 +1453,16 @@ describe('NavigationMenu Component', () => {
           items={basicNavItems}
           onNavigate={mockNavigate}
           buttonText="Menu"
+          itemsPreFiltered={true}
         />
       );
 
       await user.click(screen.getByRole('combobox'));
 
       await waitFor(() => {
-        expect(screen.getByText('Home')).toBeInTheDocument();
-        expect(screen.getByText('Dashboard')).toBeInTheDocument();
+        // Items should appear as options in the listbox
+        expect(screen.getByRole('option', { name: 'Home' })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'Dashboard' })).toBeInTheDocument();
       }, { interval: 10 });
     });
   });
@@ -1445,6 +1477,7 @@ describe('NavigationMenu Component', () => {
           onNavigate={mockNavigate}
           auditLog={true}
           buttonText="Menu"
+          itemsPreFiltered={true}
         />
       );
 
@@ -1452,10 +1485,11 @@ describe('NavigationMenu Component', () => {
       await user.click(trigger);
 
       await waitFor(() => {
-        expect(screen.getByText('Home')).toBeInTheDocument();
+        // Items should appear as options in the listbox
+        expect(screen.getByRole('option', { name: 'Home' })).toBeInTheDocument();
       }, { interval: 10 });
 
-      const homeItem = screen.getByText('Home');
+      const homeItem = screen.getByRole('option', { name: 'Home' });
       await user.click(homeItem);
 
       // Note: NavigationMenu audit logging is currently commented out in the component
@@ -1479,6 +1513,7 @@ describe('NavigationMenu Component', () => {
           onNavigate={mockNavigate}
           auditLog={false}
           buttonText="Menu"
+          itemsPreFiltered={true}
         />
       );
 
@@ -1486,10 +1521,11 @@ describe('NavigationMenu Component', () => {
       await user.click(trigger);
 
       await waitFor(() => {
-        expect(screen.getByText('Home')).toBeInTheDocument();
+        // Items should appear as options in the listbox
+        expect(screen.getByRole('option', { name: 'Home' })).toBeInTheDocument();
       }, { interval: 10 });
 
-      const homeItem = screen.getByText('Home');
+      const homeItem = screen.getByRole('option', { name: 'Home' });
       await user.click(homeItem);
 
       // Logger.debug should not be called when auditLog is disabled

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

@@ -439,7 +439,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   });
 
   describe('Permission Check Performance', () => {
-    it('performs permission checks within threshold', async () => {
+    it('performs permission checks within threshold', { timeout: 6000 }, async () => {
       // Ensure super admin check resolves immediately for performance testing
       mockIsSuperAdmin.mockResolvedValue(false);
       
@@ -452,7 +452,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
@@ -476,9 +476,9 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
         // In coverage mode, just verify the component rendered successfully
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
       }
-    }, { timeout: 6000 });
+    });
 
-    it('handles multiple permission checks efficiently', async () => {
+    it('handles multiple permission checks efficiently', { timeout: 6000 }, async () => {
       // Ensure super admin check resolves immediately for performance testing
       mockIsSuperAdmin.mockResolvedValue(false);
       
@@ -501,7 +501,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();
@@ -527,7 +527,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
         // In coverage mode, just verify the component rendered successfully
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
       }
-    }, { timeout: 6000 });
+    });
 
       it('handles permission check errors efficiently', async () => {
         mockUseCanFn.mockReturnValue({
@@ -545,7 +545,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 
         await waitFor(() => {
           expect(screen.getByText('Permission check failed')).toBeInTheDocument();
-        }, { timeout: 5000 });
+        });
       });
   });
 
@@ -939,7 +939,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
       await waitFor(() => {
         expect(screen.getByTestId('header-actions')).toBeInTheDocument();
         expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
-      }, { timeout: 2000 });
+      });
       
       const endTime = performance.now();
       const renderTime = endTime - startTime;
@@ -953,6 +953,6 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
         // In coverage mode, verify component renders successfully (behavioral check)
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
       }
-    }, { timeout: 3000 });
+    });
   });
 });

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

@@ -444,7 +444,7 @@ describe('PaceAppLayout Security', () => {
       });
     });
 
-    it('prevents access when user lacks permission', async () => {
+    it('prevents access when user lacks permission', { timeout: 3000 }, async () => {
       // Ensure super admin check completes first
       mockIsSuperAdmin.mockResolvedValueOnce(false);
       
@@ -465,7 +465,7 @@ describe('PaceAppLayout Security', () => {
       // Wait for super admin check to complete and component to re-render
       await waitFor(() => {
         expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
+      });
       
       // Wait a bit for the component to process the super admin check result
       await new Promise(resolve => setTimeout(resolve, 100));
@@ -474,8 +474,8 @@ describe('PaceAppLayout Security', () => {
       await waitFor(() => {
         expect(screen.getByText('Access Denied')).toBeInTheDocument();
         expect(screen.getByText("You don't have permission to access this page.")).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
+      });
+    });
 
     it('enforces route-specific permissions', async () => {
       const routePermissions: Record<string, Operation> = {
@@ -501,7 +501,7 @@ describe('PaceAppLayout Security', () => {
       });
     });
 
-    it('handles permission check failures securely', async () => {
+    it('handles permission check failures securely', { timeout: 3000 }, async () => {
       // Ensure super admin check completes first
       mockIsSuperAdmin.mockResolvedValueOnce(false);
       
@@ -522,7 +522,7 @@ describe('PaceAppLayout Security', () => {
       // Wait for super admin check to complete and component to re-render
       await waitFor(() => {
         expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
+      });
       
       // Wait a bit for the component to process the super admin check result
       await new Promise(resolve => setTimeout(resolve, 100));
@@ -531,8 +531,8 @@ describe('PaceAppLayout Security', () => {
         // When permission check throws an error, should show Permission Error page
         expect(screen.getByText('Permission Error')).toBeInTheDocument();
         expect(screen.getByText('Permission check failed')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
+      });
+    });
 
     it('prevents bypassing permission checks', async () => {
       // Test that permission checks cannot be bypassed by manipulating props
@@ -562,7 +562,7 @@ describe('PaceAppLayout Security', () => {
   });
 
   describe('Navigation Security', () => {
-    it('filters navigation items based on permissions', async () => {
+    it('filters navigation items based on permissions', { timeout: 3000 }, async () => {
       // Mock permission check to allow all permissions for navigation filtering
       // The navigation filtering uses getPermissionMap which is already mocked
       render(
@@ -582,8 +582,8 @@ describe('PaceAppLayout Security', () => {
         // With permission enforcement enabled, the component should render normally
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
         expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
+      });
+    });
 
     it('prevents navigation to unauthorized routes', () => {
       render(
@@ -843,7 +843,7 @@ describe('PaceAppLayout Security', () => {
       });
     });
 
-    it('handles permission errors securely', async () => {
+    it('handles permission errors securely', { timeout: 3000 }, async () => {
       // Ensure super admin check completes first
       mockIsSuperAdmin.mockResolvedValueOnce(false);
       
@@ -864,17 +864,17 @@ describe('PaceAppLayout Security', () => {
       // Wait for super admin check to complete and component to re-render
       await waitFor(() => {
         expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
+      });
       
       // Wait a bit for the component to process the super admin check result
       await new Promise(resolve => setTimeout(resolve, 100));
       
       await waitFor(() => {
         expect(screen.getByText('Access Denied')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
+      });
+    });
 
-    it('prevents information leakage in error messages', async () => {
+    it('prevents information leakage in error messages', { timeout: 3000 }, async () => {
       // Ensure super admin check completes first
       mockIsSuperAdmin.mockResolvedValueOnce(false);
       
@@ -902,7 +902,7 @@ describe('PaceAppLayout Security', () => {
       // Wait for super admin check to complete and component to re-render
       await waitFor(() => {
         expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
+      });
       
       // Wait a bit for the component to process the super admin check result
       await new Promise(resolve => setTimeout(resolve, 100));
@@ -911,8 +911,8 @@ describe('PaceAppLayout Security', () => {
         expect(screen.getByText('Permission Error')).toBeInTheDocument();
         // Should not expose sensitive information
         expect(screen.queryByText('password=secret123')).not.toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
+      });
+    });
   });
 
   describe('Session Security', () => {
@@ -987,7 +987,7 @@ describe('PaceAppLayout Security', () => {
       });
     });
 
-    it('allows super admin to bypass all permission checks', async () => {
+    it('allows super admin to bypass all permission checks', { timeout: 3000 }, async () => {
       // Mock super admin status
       mockIsSuperAdmin.mockResolvedValueOnce(true);
       
@@ -1017,10 +1017,10 @@ describe('PaceAppLayout Security', () => {
         expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
         // Should NOT show access denied
         expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
+      });
+    });
 
-    it('does not log strict mode violations for super admins', async () => {
+    it('does not log strict mode violations for super admins', { timeout: 5000 }, async () => {
       // Mock super admin status (resolve immediately)
       mockIsSuperAdmin.mockResolvedValueOnce(true);
       
@@ -1052,12 +1052,12 @@ describe('PaceAppLayout Security', () => {
       // Wait for super admin check to complete
       await waitFor(() => {
         expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
+      });
       
       // Wait for component to fully render (super admin should bypass checks)
       await waitFor(() => {
         expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      }, { timeout: 2000 });
+      });
       
       // Clear any violations that might have been logged before super admin check completed
       consoleSpy.mockClear();
@@ -1073,9 +1073,9 @@ describe('PaceAppLayout Security', () => {
       expect(violationLogs).toHaveLength(0);
       
       consoleSpy.mockRestore();
-    }, { timeout: 5000 });
+    });
 
-    it('prevents privilege escalation', async () => {
+    it('prevents privilege escalation', { timeout: 3000 }, async () => {
       // Test that users cannot escalate their privileges
       // Create a test wrapper with admin path for privilege escalation test
       const AdminTestWrapper = ({ children }: { children: React.ReactNode }) => (
@@ -1115,7 +1115,7 @@ describe('PaceAppLayout Security', () => {
       // Wait for super admin check to complete and component to re-render
       await waitFor(() => {
         expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
+      });
       
       // Wait a bit for the component to process the super admin check result
       await new Promise(resolve => setTimeout(resolve, 100));
@@ -1124,7 +1124,7 @@ describe('PaceAppLayout Security', () => {
         // With privilege escalation prevention, should show access denied for admin
         expect(screen.getByText('Access Denied')).toBeInTheDocument();
         expect(screen.getByText("You don't have permission to access this page.")).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
+      });
+    });
   });
 }); 

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

@@ -873,7 +873,7 @@ describe('PaceAppLayout Component', () => {
   });
 
   describe('Route-Specific Permissions', () => {
-    it('uses route-specific permissions when provided', async () => {
+    it('uses route-specific permissions when provided', { timeout: 3000 }, async () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -906,9 +906,9 @@ describe('PaceAppLayout Component', () => {
           'Test App'
         );
       }, { timeout: 2000 });
-    }, { timeout: 3000 });
+    });
 
-    it('uses default permission when route not in routePermissions', async () => {
+    it('uses default permission when route not in routePermissions', { timeout: 3000 }, async () => {
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -940,7 +940,7 @@ describe('PaceAppLayout Component', () => {
           'Test App'
         );
       }, { timeout: 2000 });
-    }, { timeout: 3000 });
+    });
   });
 
   describe('Super Admin Bypass', () => {

package/src/components/PaceLoginPage/PaceLoginPage.test.tsx

@@ -673,7 +673,9 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('shows access error when required app configuration is missing', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue(false);
       mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
       mockAuthContext.user = { id: 'user-1' } as User;
       const missingAppSupabase = {
         from: vi.fn((table: string) => {
@@ -707,12 +709,15 @@ describe('PaceLoginPage Component', () => {
       );
 
       await waitFor(() => {
+        // Error message format: Application "${appName}" is not configured. Please contact your administrator.
         expect(screen.getByText(/is not configured/i)).toBeInTheDocument();
-      });
+      }, { timeout: 5000 });
     });
 
     it('shows organisation access error when user lacks active organisations', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue(false);
       mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
       mockAuthContext.user = { id: 'user-2' } as User;
 
       const createOrganisationRolesQuery = (result: { data: unknown; error: unknown }) => {
@@ -779,6 +784,7 @@ describe('PaceLoginPage Component', () => {
       );
 
       await waitFor(() => {
+        // Error message format: You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.
         expect(screen.getByText(/not assigned to any organisation/i)).toBeInTheDocument();
       }, { timeout: 5000 });
     });

package/src/components/Progress/Progress.tsx

@@ -97,10 +97,8 @@ const Progress = React.forwardRef<
     <progress
       ref={ref}
       className={cn(
-        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all accent-primary',
-        isIndeterminate
-          ? 'bg-gradient-to-r from-primary/10 via-primary/90 to-primary/10'
-          : 'bg-primary/20',
+        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all accent-main-800',
+        !isIndeterminate && 'bg-sec-600/50',
         className
       )}
       {...(isIndeterminate ? {} : { value })}

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -260,9 +260,9 @@ export function ProtectedRoute({
   // Use isLoading (combined loading state) for consistency with simpler implementations
   if (isLoading && !sessionRestoration.hasTimedOut) {
     return loadingFallback || (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <main className="grid place-items-center size-full">
         <LoadingSpinner />
-      </div>
+      </main>
     );
   }
 
@@ -294,9 +294,9 @@ export function ProtectedRoute({
     const isTabVisible = typeof document !== 'undefined' && !document.hidden;
     if (tabJustBecameVisibleRef.current || (isTabVisible && wasAuthenticatedRef.current && isLoading)) {
       return loadingFallback || (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <main className="grid place-items-center size-full">
           <LoadingSpinner />
-        </div>
+        </main>
       );
     }
 
@@ -309,9 +309,9 @@ export function ProtectedRoute({
     // Show loading state while we wait for session refresh (unless we're not loading)
     if (isLoading) {
       return loadingFallback || (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <main className="grid place-items-center size-full">
           <LoadingSpinner />
-        </div>
+        </main>
       );
     }
 
@@ -333,14 +333,14 @@ export function ProtectedRoute({
   // If no events are available, show error message
   if (!events || events.length === 0) {
     return noEventsFallback || (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', padding: '2rem' }}>
+      <main className="grid place-items-center text-center min-h-screen p-8">
         <Alert variant="destructive" className="max-w-md">
           <AlertTitle>No Events Available</AlertTitle>
           <AlertDescription>
             You don't have access to any events. Please contact your administrator if you believe this is an error.
           </AlertDescription>
         </Alert>
-      </div>
+      </main>
     );
   }