@jmruthers/pace-core 0.5.114 → 0.5.116

package/src/components/ProtectedRoute/ProtectedRoute.test.tsx

@@ -0,0 +1,648 @@
+/**
+ * @file ProtectedRoute Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/ProtectedRoute
+ * @since 0.6.0
+ *
+ * Comprehensive test suite for the ProtectedRoute component following TEST_STANDARD.md.
+ * Tests focus on behavior: authentication, session restoration, event management, and navigation.
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ProtectedRoute, ProtectedRouteProps } from './ProtectedRoute';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock React Router components
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    Navigate: ({ to, replace }: { to: string; replace?: boolean }) => (
+      <div data-testid="navigate" data-to={to} data-replace={replace?.toString()}>
+        Navigate to {to}
+      </div>
+    ),
+    Outlet: () => <div data-testid="outlet">Protected Content</div>,
+  };
+});
+
+// Mock pace-core hooks and components
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(),
+}));
+
+vi.mock('../../hooks/useSessionRestoration', () => ({
+  useSessionRestoration: vi.fn(),
+}));
+
+vi.mock('../../hooks/useEvents', () => ({
+  useEvents: vi.fn(),
+}));
+
+vi.mock('../LoadingSpinner/LoadingSpinner', () => ({
+  LoadingSpinner: () => <div data-testid="loading-spinner" role="status">Loading...</div>,
+}));
+
+vi.mock('../SessionRestorationLoader', () => ({
+  SessionRestorationLoader: () => (
+    <div data-testid="session-restoration-loader">
+      <div role="status">Restoring session...</div>
+    </div>
+  ),
+}));
+
+vi.mock('../Alert/Alert', () => ({
+  Alert: ({ children, variant, className }: any) => (
+    <div data-testid="alert" data-variant={variant} className={className}>
+      {children}
+    </div>
+  ),
+  AlertTitle: ({ children }: any) => <div data-testid="alert-title">{children}</div>,
+  AlertDescription: ({ children }: any) => (
+    <div data-testid="alert-description">{children}</div>
+  ),
+}));
+
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
+import { useSessionRestoration } from '../../hooks/useSessionRestoration';
+import { useEvents } from '../../hooks/useEvents';
+
+// Type-safe mock implementations
+const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
+const mockUseSessionRestoration = vi.mocked(useSessionRestoration);
+const mockUseEvents = vi.mocked(useEvents);
+
+// Suppress console methods in tests
+const originalConsoleDebug = console.debug;
+const originalConsoleWarn = console.warn;
+
+describe('ProtectedRoute Component', () => {
+  // Default mock implementations
+  const defaultAuthState = {
+    isAuthenticated: true,
+    authLoading: false,
+  };
+
+  const defaultSessionState = {
+    isRestoring: false,
+    restorationComplete: true,
+    restorationError: null,
+    hasTimedOut: false,
+  };
+
+  const defaultEventsState = {
+    selectedEvent: { id: 'event-1', name: 'Test Event' },
+    events: [{ id: 'event-1', name: 'Test Event' }],
+    isLoading: false,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    console.debug = vi.fn();
+    console.warn = vi.fn();
+
+    // Set default mocks
+    mockUseUnifiedAuth.mockReturnValue(defaultAuthState);
+    mockUseSessionRestoration.mockReturnValue(defaultSessionState);
+    mockUseEvents.mockReturnValue(defaultEventsState);
+  });
+
+  afterEach(() => {
+    console.debug = originalConsoleDebug;
+    console.warn = originalConsoleWarn;
+  });
+
+  describe('Rendering', () => {
+    it('renders outlet when user is authenticated and event is selected', () => {
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.getByText('Protected Content')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('renders outlet when events exist but none selected (allows event selector visibility)', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [{ id: 'event-1', name: 'Test Event' }],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(console.debug).toHaveBeenCalledWith(
+        '[ProtectedRoute] Events available but none selected - allowing render so selector is visible'
+      );
+    });
+
+    it('renders session restoration loader when session is restoring', () => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('session-restoration-loader')).toBeInTheDocument();
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('renders loading spinner when auth state is loading and not timed out', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('renders custom loading fallback when provided', () => {
+      const customLoader = <div data-testid="custom-loader">Custom Loading...</div>;
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+      });
+
+      renderWithProviders(<ProtectedRoute loadingFallback={customLoader} />);
+
+      expect(screen.getByTestId('custom-loader')).toBeInTheDocument();
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Authentication States', () => {
+    it('redirects unauthenticated user to login page', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      const navigate = screen.getByTestId('navigate');
+      expect(navigate).toBeInTheDocument();
+      expect(navigate).toHaveAttribute('data-to', '/login');
+      expect(navigate).toHaveAttribute('data-replace', 'true');
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+    });
+
+    it('uses custom login path when provided', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute loginPath="/custom-login" />);
+
+      const navigate = screen.getByTestId('navigate');
+      expect(navigate).toHaveAttribute('data-to', '/custom-login');
+    });
+
+    it('uses replace navigation to prevent back button from returning to protected route', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      const navigate = screen.getByTestId('navigate');
+      expect(navigate).toHaveAttribute('data-replace', 'true');
+    });
+
+    it('warns when redirecting due to session restoration timeout', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: true,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(console.warn).toHaveBeenCalledWith(
+        '[ProtectedRoute] Session restoration failed, redirecting to login',
+        expect.objectContaining({
+          timedOut: true,
+        })
+      );
+    });
+
+    it('warns when redirecting due to session restoration error', () => {
+      const mockError = new Error('Session restoration failed');
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: mockError,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(console.warn).toHaveBeenCalledWith(
+        '[ProtectedRoute] Session restoration failed, redirecting to login',
+        expect.objectContaining({
+          error: 'Session restoration failed',
+          timedOut: false,
+        })
+      );
+    });
+  });
+
+  describe('Session Restoration States', () => {
+    it('shows restoration loader when restoration is in progress', () => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('session-restoration-loader')).toBeInTheDocument();
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+    });
+
+    it('does not show restoration loader when restoration is complete', () => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.queryByTestId('session-restoration-loader')).not.toBeInTheDocument();
+    });
+
+    it('prioritizes session restoration over loading state', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('session-restoration-loader')).toBeInTheDocument();
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+
+    it('skips loading spinner when session restoration has timed out even if loading', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: true,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+  });
+
+  describe('Event Management', () => {
+    it('allows rendering during event loading when requireEvent is true', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: true,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+
+    it('renders outlet when requireEvent is false regardless of event state', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={false} />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+    });
+
+    it('shows error message when no events are available and requireEvent is true', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-title')).toHaveTextContent('No Events Available');
+      expect(screen.getByTestId('alert-description')).toHaveTextContent(
+        "You don't have access to any events. Please contact your administrator if you believe this is an error."
+      );
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+    });
+
+    it('renders custom no events fallback when provided', () => {
+      const customFallback = (
+        <div data-testid="custom-no-events">Custom No Events Message</div>
+      );
+
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} noEventsFallback={customFallback} />);
+
+      expect(screen.getByTestId('custom-no-events')).toBeInTheDocument();
+      expect(screen.queryByTestId('alert')).not.toBeInTheDocument();
+    });
+
+    it('allows rendering when events exist but none selected (for event selector visibility)', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [
+          { id: 'event-1', name: 'Event 1' },
+          { id: 'event-2', name: 'Event 2' },
+        ],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(console.debug).toHaveBeenCalledWith(
+        '[ProtectedRoute] Events available but none selected - allowing render so selector is visible'
+      );
+    });
+
+    it('renders outlet when event is selected', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: { id: 'event-1', name: 'Event 1' },
+        events: [{ id: 'event-1', name: 'Event 1' }],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+    });
+
+    it('handles null events array', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: null as any,
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-title')).toHaveTextContent('No Events Available');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles rapid state changes gracefully', async () => {
+      // Start with session restoration
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('session-restoration-loader')).toBeInTheDocument();
+
+      // Simulate state change to authenticated
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      await waitFor(
+        () => {
+          expect(screen.getByTestId('outlet')).toBeInTheDocument();
+        },
+        { timeout: 2000 }
+      );
+
+      expect(screen.queryByTestId('session-restoration-loader')).not.toBeInTheDocument();
+    });
+
+    it('handles case where restoration completes but user is authenticated', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('handles case where restoration times out but user is authenticated', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: true,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('prioritizes event loading over auth loading when requireEvent is true', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: true,
+      });
+
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: true,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      // Should render outlet during event loading, not show auth loading spinner
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+
+    it('handles empty events array correctly', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Props Configuration', () => {
+    it('defaults requireEvent to true when not provided', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Should show no events error since requireEvent defaults to true
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+    });
+
+    it('respects requireEvent prop when set to false', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={false} />);
+
+      // Should render outlet even with no events
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('alert')).not.toBeInTheDocument();
+    });
+
+    it('defaults loginPath to /login when not provided', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      const navigate = screen.getByTestId('navigate');
+      expect(navigate).toHaveAttribute('data-to', '/login');
+    });
+
+    it('uses custom loginPath when provided', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute loginPath="/auth/login" />);
+
+      const navigate = screen.getByTestId('navigate');
+      expect(navigate).toHaveAttribute('data-to', '/auth/login');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides loading state with screen reader support', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      const spinner = screen.getByRole('status');
+      expect(spinner).toBeInTheDocument();
+      expect(spinner).toHaveTextContent('Loading...');
+    });
+
+    it('provides session restoration state with screen reader support', () => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      const status = screen.getByRole('status');
+      expect(status).toBeInTheDocument();
+      expect(status).toHaveTextContent('Restoring session...');
+    });
+
+    it('provides clear error message when no events are available', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      expect(screen.getByTestId('alert-title')).toHaveTextContent('No Events Available');
+      expect(screen.getByTestId('alert-description')).toHaveTextContent(
+        "You don't have access to any events. Please contact your administrator if you believe this is an error."
+      );
+    });
+  });
+});
+

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -136,7 +136,7 @@ export function ProtectedRoute({
   loadingFallback,
   loginPath = '/login'
 }: ProtectedRouteProps) {
-  const { isAuthenticated, isLoading } = useUnifiedAuth();
+  const { isAuthenticated, authLoading } = useUnifiedAuth();
   const { selectedEvent, events, isLoading: eventLoading } = useEvents();
   const sessionRestoration = useSessionRestoration();
 
@@ -157,8 +157,14 @@ export function ProtectedRoute({
     return <SessionRestorationLoader />;
   }
 
-  // Show loading state while auth is being determined
-  if (isLoading && !sessionRestoration.hasTimedOut) {
+  // Allow rendering during event loading - prevents blocking UI while events load
+  // This must come before auth loading check to avoid blocking when only events are loading
+  if (requireEvent && eventLoading) {
+    return <Outlet />;
+  }
+
+  // Show loading state while auth is being determined (but not organisation/event loading)
+  if (authLoading && !sessionRestoration.hasTimedOut) {
     return loadingFallback || (
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
         <LoadingSpinner />
@@ -186,10 +192,7 @@ export function ProtectedRoute({
   // Apps that need super admin access without events should set requireEvent={false}
   // For now, we keep it simple and always require events when requireEvent=true
 
-  // Allow rendering during event loading - prevents blocking UI while events load
-  if (eventLoading) {
-    return <Outlet />;
-  }
+  // Event loading check already handled above before auth loading check
 
   // If no events are available, show error message
   if (!events || events.length === 0) {