@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -11,7 +11,7 @@
 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 { ProtectedRoute } from './ProtectedRoute';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 // Mock React Router components
@@ -65,14 +65,20 @@ vi.mock('../Alert/Alert', () => ({
   ),
 }));
 
+vi.mock('../../hooks/usePreventTabReload', () => ({
+  usePreventTabReload: vi.fn(),
+}));
+
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { useSessionRestoration } from '../../hooks/useSessionRestoration';
 import { useEvents } from '../../hooks/useEvents';
+import { usePreventTabReload } from '../../hooks/usePreventTabReload';
 
 // Type-safe mock implementations
 const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
 const mockUseSessionRestoration = vi.mocked(useSessionRestoration);
 const mockUseEvents = vi.mocked(useEvents);
+const mockUsePreventTabReload = vi.mocked(usePreventTabReload);
 
 // Suppress console methods in tests
 const originalConsoleDebug = console.debug;
@@ -122,6 +128,7 @@ describe('ProtectedRoute Component', () => {
     mockUseUnifiedAuth.mockReturnValue(defaultAuthState);
     mockUseSessionRestoration.mockReturnValue(defaultSessionState);
     mockUseEvents.mockReturnValue(defaultEventsState);
+    mockUsePreventTabReload.mockImplementation(() => {});
   });
 
   afterEach(() => {
@@ -144,7 +151,6 @@ describe('ProtectedRoute Component', () => {
     });
 
     it('renders outlet when events exist but none selected (allows event selector visibility)', async () => {
-      const consoleDebugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
       
       mockUseEvents.mockReturnValue({
         selectedEvent: null,
@@ -380,6 +386,26 @@ describe('ProtectedRoute Component', () => {
       expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
       expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
     });
+
+    it('skips restoration loader when a restoration error is present', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: new Error('Restore failed'),
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(screen.queryByTestId('session-restoration-loader')).not.toBeInTheDocument();
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
   });
 
   describe('Event Management', () => {
@@ -452,7 +478,6 @@ describe('ProtectedRoute Component', () => {
         isLoading: false,
       });
 
-      const consoleDebugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
 
       renderWithProviders(<ProtectedRoute requireEvent={true} />);
 
@@ -697,5 +722,1172 @@ describe('ProtectedRoute Component', () => {
       );
     });
   });
-});
 
+  describe('Tab Visibility and Grace Period', () => {
+    beforeEach(() => {
+      // Mock document.hidden
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+    });
+
+    it('calls usePreventTabReload with correct parameters', () => {
+      renderWithProviders(<ProtectedRoute />);
+
+      expect(mockUsePreventTabReload).toHaveBeenCalledWith({
+        enabled: true,
+        gracePeriodMs: 2000,
+      });
+    });
+
+    it('prevents redirect during grace period when tab becomes visible', async () => {
+      // Start with authenticated user
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      const { rerender } = renderWithProviders(
+        <ProtectedRoute />
+      );
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // Simulate tab becoming hidden (user switches away)
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // Simulate user becoming unauthenticated while tab is hidden, but still loading (session refresh)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true, // Still loading - session might be refreshing
+      });
+
+      // Simulate tab becoming visible again
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // During grace period with loading state, should show loading instead of redirecting
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('shows loading during grace period when tab becomes visible and user is unauthenticated', async () => {
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      const { rerender } = renderWithProviders(
+        <ProtectedRoute />
+      );
+
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // Tab becomes hidden
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // User becomes unauthenticated but still loading (session refresh in progress)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true,
+      });
+
+      // Tab becomes visible
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      rerender(<ProtectedRoute />);
+      
+      // Should show loading during grace period when tab becomes visible
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('tracks wasAuthenticatedRef to prevent redirects during session refresh', async () => {
+      const { rerender } = renderWithProviders(
+        <ProtectedRoute />
+      );
+
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // User appears unauthenticated (session refresh in progress)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true, // Still loading (session refresh)
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Should show loading, not redirect (wasAuthenticatedRef prevents immediate redirect)
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('redirects when a previously authenticated user is logged out and no longer loading', () => {
+      const { rerender } = renderWithProviders(
+        <ProtectedRoute />
+      );
+
+      // Start authenticated to set wasAuthenticatedRef
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // User becomes unauthenticated and not loading
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+
+    it('handles multiple visibility changes correctly', async () => {
+      const { rerender } = renderWithProviders(
+        <ProtectedRoute />
+      );
+
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Tab becomes hidden
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // Tab becomes visible
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // Tab becomes hidden again
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // Tab becomes visible again
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // Should still render outlet if authenticated
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+    });
+
+    it('clears visibility flag when user authenticates', async () => {
+      const { rerender } = renderWithProviders(
+        <ProtectedRoute />
+      );
+
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Tab becomes hidden
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // User becomes unauthenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      // Tab becomes visible
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // User authenticates again (session refresh completes)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Should render outlet, visibility flag should be cleared
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('handles rapid state changes during tab visibility transitions', async () => {
+      vi.useFakeTimers();
+      
+      const { rerender } = renderWithProviders(
+        <ProtectedRoute />
+      );
+
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Rapid state changes
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true,
+      });
+
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+      // State changes again
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe('Session Restoration Not Complete Logic', () => {
+    it('shows loading when restoration has not completed and user is not authenticated', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false, // Not complete
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Should show loading while waiting for restoration to complete
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('shows session restoration loader when restoration is in progress and user is not authenticated', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true, // In progress
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Should show session restoration loader while restoration is in progress
+      expect(screen.getByTestId('session-restoration-loader')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('redirects when restoration has timed out even if not complete', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: true, // Timed out
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Should redirect immediately when timed out
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+
+    it('redirects when restoration has error even if not complete', () => {
+      const mockError = new Error('Restoration failed');
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: mockError, // Has error
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Should redirect immediately when error occurs
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+
+    it('shows loading when isLoading is true even if restoration not complete', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true, // Still loading
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Should show loading when isLoading is true
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('handles restoration complete but user never authenticated', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true, // Complete
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // User was never authenticated, should redirect
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+  });
+
+  describe('Tab Visibility Timeout and Grace Period', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('prevents redirect during 2-second grace period after tab becomes visible', async () => {
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // Tab becomes hidden
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // User becomes unauthenticated while tab is hidden, but still loading (session refresh)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true, // Still loading - session refresh in progress
+      });
+
+      // Tab becomes visible
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      rerender(<ProtectedRoute />);
+
+      // Should show loading during grace period when isLoading is true
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+
+      // Fast-forward 1 second (still in grace period)
+      vi.advanceTimersByTime(1000);
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+
+      // Fast-forward past grace period (2 seconds total) and stop loading
+      vi.advanceTimersByTime(1000);
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false, // No longer loading
+      });
+      rerender(<ProtectedRoute />);
+
+      // After grace period and not loading, should redirect
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+
+    it('clears timeout when tab becomes hidden during grace period', () => {
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+
+      // Tab becomes hidden
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // User becomes unauthenticated but still loading
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true,
+      });
+
+      // Tab becomes visible (starts grace period)
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+      // Tab becomes hidden again (should clear timeout)
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      rerender(<ProtectedRoute />);
+
+      // Component should still show loading if isLoading is true
+      // The timeout cleanup happens in the effect, but component state is based on current props
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    });
+
+    it('handles initial state when tab is visible and user appears logged out', () => {
+      // Start with user that was authenticated (sets wasAuthenticatedRef)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+
+      // User becomes unauthenticated but still loading (session refresh)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true, // Still loading
+      });
+
+      // Tab is visible (initial state check)
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Should show loading during initial grace period when isLoading is true
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+      // Fast-forward past grace period and stop loading
+      vi.advanceTimersByTime(2000);
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false, // No longer loading
+      });
+      rerender(<ProtectedRoute />);
+
+      // After grace period and not loading, should redirect if still not authenticated
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+
+    it('clears visibility flag when user authenticates during grace period', () => {
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+
+      // Tab becomes hidden
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: true,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      // User becomes unauthenticated but still loading
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true,
+      });
+
+      // Tab becomes visible (starts grace period)
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+      // User authenticates again (session refresh completes)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Should render outlet and clear visibility flag
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('SSR and Document Handling', () => {
+    it('handles document.hidden being undefined gracefully', () => {
+      const originalHidden = Object.getOwnPropertyDescriptor(document, 'hidden');
+
+      // Remove hidden property to simulate edge case
+      delete (document as any).hidden;
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      // Should not throw error - component checks typeof document !== 'undefined'
+      expect(() => {
+        renderWithProviders(<ProtectedRoute />);
+      }).not.toThrow();
+
+      // Component should still render outlet
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // Restore hidden property
+      if (originalHidden) {
+        Object.defineProperty(document, 'hidden', originalHidden);
+      } else {
+        // Restore default if it didn't exist
+        Object.defineProperty(document, 'hidden', {
+          writable: true,
+          configurable: true,
+          value: false,
+        });
+      }
+    });
+  });
+
+  describe('Complex State Transitions', () => {
+    beforeEach(() => {
+      // Ensure document is properly set up
+      Object.defineProperty(document, 'hidden', {
+        writable: true,
+        configurable: true,
+        value: false,
+      });
+    });
+
+    it('handles transition from session restoration to authenticated', () => {
+      // Start with session restoration
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+      expect(screen.getByTestId('session-restoration-loader')).toBeInTheDocument();
+
+      // Restoration completes and user becomes authenticated
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('session-restoration-loader')).not.toBeInTheDocument();
+    });
+
+    it('handles transition from loading to authenticated with events', () => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+        isLoading: true,
+      });
+
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: true,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute requireEvent={true} />);
+      // Event loading takes priority, should render outlet
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // User becomes authenticated and events load
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseEvents.mockReturnValue({
+        selectedEvent: { id: 'event-1', name: 'Event 1' },
+        events: [{ id: 'event-1', name: 'Event 1' }],
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute requireEvent={true} />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+    });
+
+    it('handles transition from authenticated to unauthenticated', () => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // User becomes unauthenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+
+    it('handles rapid transitions between multiple states', () => {
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+
+      // State 1: Session restoring
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: true,
+        restorationComplete: false,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('session-restoration-loader')).toBeInTheDocument();
+
+      // State 2: Loading (restoration complete but auth loading)
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+        isLoading: true,
+      });
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+      // State 3: Authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+    });
+  });
+
+  describe('Event Loading Priority', () => {
+    beforeEach(() => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+    });
+
+    it('renders outlet during event loading even when auth is loading', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: true,
+        isLoading: true, // Auth is loading
+      });
+
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: true, // Events are loading
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      // Event loading check comes before auth loading check
+      // Should render outlet during event loading
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+
+    it('shows auth loading when events are not loading and auth is loading', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: true,
+        isLoading: true,
+      });
+
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false, // Events not loading
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      // Should show auth loading spinner
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('wasAuthenticatedRef Tracking', () => {
+    beforeEach(() => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+    });
+
+    it('tracks wasAuthenticatedRef when user authenticates', () => {
+      // Start unauthenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+      expect(screen.getByTestId('navigate')).toBeInTheDocument();
+
+      // User authenticates
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // User becomes unauthenticated again (but wasAuthenticatedRef is true)
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: true, // Still loading (session refresh)
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // Should show loading (not redirect immediately) because wasAuthenticatedRef is true
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+
+    it('redirects immediately when user was never authenticated', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // User was never authenticated, should redirect immediately
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+  });
+
+  describe('shouldRedirect State Management', () => {
+    beforeEach(() => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+    });
+
+    it('resets shouldRedirect when user authenticates', () => {
+      // Start authenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute />);
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // User becomes unauthenticated
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+      expect(screen.getByTestId('navigate')).toBeInTheDocument();
+
+      // User authenticates again
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: true,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute />);
+
+      // shouldRedirect should be reset, outlet should render
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Restoration Error Combinations', () => {
+    it('handles restoration error with timeout', () => {
+      const mockError = new Error('Restoration failed');
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: false,
+        restorationError: mockError,
+        hasTimedOut: true, // Both error and timeout
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Should redirect immediately (error takes precedence or both cause redirect)
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+
+    it('handles restoration complete with error (edge case)', () => {
+      const mockError = new Error('Restoration failed');
+
+      mockUseUnifiedAuth.mockReturnValue({
+        isAuthenticated: false,
+        authLoading: false,
+        isLoading: false,
+      });
+
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true, // Complete but has error (edge case)
+        restorationError: mockError,
+        hasTimedOut: false,
+      });
+
+      renderWithProviders(<ProtectedRoute />);
+
+      // Error should cause redirect
+      expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/login');
+    });
+  });
+
+  describe('Event State Edge Cases', () => {
+    beforeEach(() => {
+      mockUseSessionRestoration.mockReturnValue({
+        isRestoring: false,
+        restorationComplete: true,
+        restorationError: null,
+        hasTimedOut: false,
+      });
+    });
+
+    it('handles events array with null elements', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        // @ts-expect-error - Testing runtime edge case
+        events: [null, undefined],
+        isLoading: false,
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      // Component checks events.length === 0, so [null, undefined] has length 2
+      // This means it will try to render outlet (events exist but none selected)
+      // The component doesn't validate event object structure, just array length
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+    });
+
+    it('handles events array that becomes empty after loading', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: true,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      // Should render outlet during loading
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // Events finish loading but are empty
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute requireEvent={true} />);
+
+      // Should show no events message
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.queryByTestId('outlet')).not.toBeInTheDocument();
+    });
+
+    it('handles events that become available after loading', () => {
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [],
+        isLoading: true,
+      });
+
+      const { rerender } = renderWithProviders(<ProtectedRoute requireEvent={true} />);
+
+      // Should render outlet during loading
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+
+      // Events become available
+      mockUseEvents.mockReturnValue({
+        selectedEvent: null,
+        events: [{ id: 'event-1', name: 'Event 1' }],
+        isLoading: false,
+      });
+
+      rerender(<ProtectedRoute requireEvent={true} />);
+
+      // Should render outlet (events exist, even if none selected)
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
+    });
+  });
+});