@jmruthers/pace-core 0.2.4

package/src/rbac/__tests__/components-navigation-guard.test.tsx

@@ -0,0 +1,895 @@
+/**
+ * @file NavigationGuard Component Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Components/NavigationGuard
+ * @since 2.0.0
+ *
+ * Comprehensive test suite for the NavigationGuard component.
+ * Tests all functionality including navigation permission checking, error handling,
+ * strict mode, audit logging, and edge cases.
+ */
+
+import React from 'react';
+import { screen, waitFor, act } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { NavigationGuard, NavigationGuardProps } from '../components/NavigationGuard';
+import { useCan } from '../hooks';
+import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
+import { NavigationItem } from '../components/NavigationProvider';
+import { renderWithProviders } from '../../__tests__/shared';
+
+// Mock the hooks
+vi.mock('../hooks', () => ({
+  useCan: vi.fn(),
+}));
+
+vi.mock('../../providers/UnifiedAuthProvider', () => ({
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <div data-testid="auth-provider">{children}</div>,
+  useUnifiedAuth: vi.fn(),
+}));
+
+const mockUseCan = vi.mocked(useCan);
+const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
+
+// Test data
+const mockUser = {
+  id: 'user-123',
+  email: 'test@example.com',
+  name: 'Test User'
+};
+
+const mockScope = {
+  organisationId: 'org-456',
+  eventId: 'event-789',
+  appId: undefined
+};
+
+const mockNavigationItem: NavigationItem = {
+  id: 'dashboard',
+  label: 'Dashboard',
+  path: '/dashboard',
+  permissions: ['read:page.dashboard'],
+  pageId: 'dashboard-page',
+  meta: {
+    icon: '🏠',
+    description: 'Main dashboard'
+  }
+};
+
+const defaultProps: NavigationGuardProps = {
+  navigationItem: mockNavigationItem,
+  children: <div data-testid="protected-navigation">Protected Navigation</div>
+};
+
+describe('NavigationGuard Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Default mock implementations
+    mockUseUnifiedAuth.mockReturnValue({
+      user: mockUser,
+      selectedOrganisationId: 'org-456',
+      selectedEventId: 'event-789',
+      selectedAppId: 'app-101',
+      selectedOrganisation: null,
+      selectedEvent: null,
+      selectedApp: null,
+      isLoading: false,
+      error: null,
+      login: vi.fn(),
+      logout: vi.fn(),
+      selectOrganisation: vi.fn(),
+      selectEvent: vi.fn(),
+      selectApp: vi.fn(),
+    });
+
+    mockUseCan.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic Functionality', () => {
+    it('should render children when permission is granted', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<NavigationGuard {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('protected-navigation')).toBeInTheDocument();
+      });
+    });
+
+    it('should render fallback when permission is denied', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      const fallback = <div data-testid="access-denied">Access Denied</div>;
+      
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('access-denied')).toBeInTheDocument();
+        expect(screen.queryByTestId('protected-navigation')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should render loading state while checking permissions', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      const loading = <div data-testid="loading">Loading...</div>;
+      
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          loading={loading}
+        />
+      );
+
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+      expect(screen.queryByTestId('protected-navigation')).not.toBeInTheDocument();
+    });
+
+    it('should render fallback when permission check fails', async () => {
+      const error = new Error('Permission check failed');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error,
+        refetch: vi.fn(),
+      });
+
+      const fallback = <div data-testid="error-fallback">Error occurred</div>;
+      
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+        expect(screen.queryByTestId('protected-navigation')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Permission Checking', () => {
+    it('should call useCan with correct parameters using first permission', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<NavigationGuard {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          mockScope,
+          'read:page.dashboard', // First permission
+          'dashboard-page', // pageId from navigation item
+          true // useCache
+        );
+      });
+    });
+
+    it('should use custom scope when provided', async () => {
+      const customScope = {
+        organisationId: 'custom-org',
+        eventId: 'custom-event',
+        appId: 'custom-app'
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          scope={customScope}
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          customScope,
+          'read:page.dashboard',
+          'dashboard-page',
+          true
+        );
+      });
+    });
+
+    it('should handle empty permissions array', async () => {
+      const navigationItemWithoutPermissions: NavigationItem = {
+        ...mockNavigationItem,
+        permissions: []
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={navigationItemWithoutPermissions}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('protected-navigation')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle single permission', async () => {
+      const singlePermissionItem: NavigationItem = {
+        ...mockNavigationItem,
+        permissions: ['read:page.dashboard']
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={singlePermissionItem}
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          mockScope,
+          'read:page.dashboard',
+          'dashboard-page',
+          true
+        );
+      });
+    });
+
+    it('should handle multiple permissions', async () => {
+      const multiplePermissionsItem: NavigationItem = {
+        ...mockNavigationItem,
+        permissions: ['read:page.dashboard', 'manage:page.dashboard', 'delete:page.dashboard']
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={multiplePermissionsItem}
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          mockScope,
+          'read:page.dashboard', // First permission
+          'dashboard-page',
+          true
+        );
+      });
+    });
+
+    it('should handle navigation item without pageId', async () => {
+      const itemWithoutPageId: NavigationItem = {
+        ...mockNavigationItem,
+        pageId: undefined
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={itemWithoutPageId}
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          mockScope,
+          'read:page.dashboard',
+          undefined, // No pageId
+          true
+        );
+      });
+    });
+  });
+
+  describe('Require All vs Any Logic', () => {
+    it('should use requireAll=true by default', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<NavigationGuard {...defaultProps} />);
+
+      await waitFor(() => {
+        // The component should use the representative permission result
+        expect(screen.getByTestId('protected-navigation')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle requireAll=false', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          requireAll={false}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('protected-navigation')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Strict Mode', () => {
+    it('should log strict mode violation when permission is denied', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          strictMode={true}
+        />
+      );
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[NavigationGuard] STRICT MODE VIOLATION: User attempted to access protected navigation item without permission',
+          expect.objectContaining({
+            navigationItem: 'dashboard',
+            permissions: ['read:page.dashboard'],
+            userId: 'user-123',
+            scope: mockScope,
+            requireAll: true,
+            timestamp: expect.any(String)
+          })
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should not log strict mode violation when strict mode is disabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          strictMode={false}
+        />
+      );
+
+      await waitFor(() => {
+        expect(consoleSpy).not.toHaveBeenCalledWith(
+          expect.stringContaining('STRICT MODE VIOLATION')
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Audit Logging', () => {
+    it('should log navigation access attempt when audit logging is enabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          auditLog={true}
+        />
+      );
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[NavigationGuard] Navigation access attempt:',
+          expect.objectContaining({
+            navigationItem: 'dashboard',
+            permissions: ['read:page.dashboard'],
+            userId: 'user-123',
+            scope: mockScope,
+            allowed: true,
+            requireAll: true,
+            timestamp: expect.any(String)
+          })
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should not log navigation access attempt when audit logging is disabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          auditLog={false}
+        />
+      );
+
+      await waitFor(() => {
+        expect(consoleSpy).not.toHaveBeenCalledWith(
+          expect.stringContaining('[NavigationGuard] Navigation access attempt:')
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('should call onDenied callback when permission is denied', async () => {
+      const onDenied = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          onDenied={onDenied}
+        />
+      );
+
+      await waitFor(() => {
+        expect(onDenied).toHaveBeenCalledWith(mockNavigationItem);
+      });
+    });
+
+    it('should not call onDenied callback when permission is granted', async () => {
+      const onDenied = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          onDenied={onDenied}
+        />
+      );
+
+      await waitFor(() => {
+        expect(onDenied).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle missing organisation context', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: null,
+        selectedAppId: null,
+        selectedOrganisation: null,
+        selectedEvent: null,
+        selectedApp: null,
+        isLoading: false,
+        error: null,
+        login: vi.fn(),
+        logout: vi.fn(),
+        selectOrganisation: vi.fn(),
+        selectEvent: vi.fn(),
+        selectApp: vi.fn(),
+      });
+
+      const { getByText } = renderWithProviders(<NavigationGuard {...defaultProps} />);
+      
+      // The component should show loading state when there's no organisation context
+      expect(getByText('Checking...')).toBeInTheDocument();
+    });
+
+    it('should handle permission check errors gracefully', async () => {
+      const error = new Error('Database connection failed');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error,
+        refetch: vi.fn(),
+      });
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const fallback = <div data-testid="error-fallback">Error occurred</div>;
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[NavigationGuard] Permission check failed for navigation item dashboard:',
+          error
+        );
+        expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Default Components', () => {
+    it('should render default access denied component when no fallback provided', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<NavigationGuard {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+
+    it('should render default loading component when no loading provided', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<NavigationGuard {...defaultProps} />);
+
+      expect(screen.getByText('Checking...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty children gracefully', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          children={null}
+        />
+      );
+
+      await waitFor(() => {
+        // Should not throw error
+        expect(screen.queryByTestId('protected-navigation')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle undefined user gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: null,
+        selectedOrganisationId: 'org-456',
+        selectedEventId: 'event-789',
+        selectedAppId: 'app-101',
+        selectedOrganisation: null,
+        selectedEvent: null,
+        selectedApp: null,
+        isLoading: false,
+        error: null,
+        login: vi.fn(),
+        logout: vi.fn(),
+        selectOrganisation: vi.fn(),
+        selectEvent: vi.fn(),
+        selectApp: vi.fn(),
+      });
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<NavigationGuard {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          '',
+          mockScope,
+          'read:page.dashboard',
+          'dashboard-page',
+          true
+        );
+      });
+    });
+
+    it('should handle rapid permission changes', async () => {
+      const { rerender } = renderWithProviders(<NavigationGuard {...defaultProps} />);
+
+      // Initially granted
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('protected-navigation')).toBeInTheDocument();
+      });
+
+      // Change to denied
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      rerender(<NavigationGuard {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('protected-navigation')).not.toBeInTheDocument();
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle malformed permissions gracefully', async () => {
+      const malformedItem: NavigationItem = {
+        ...mockNavigationItem,
+        permissions: ['invalid-permission', 'another-invalid']
+      };
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={malformedItem}
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          mockScope,
+          'invalid-permission', // First permission
+          'dashboard-page',
+          true
+        );
+      });
+    });
+
+    it('should handle navigation items with roles and access levels', async () => {
+      const itemWithRoles: NavigationItem = {
+        ...mockNavigationItem,
+        roles: ['admin'],
+        accessLevel: 'admin'
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={itemWithRoles}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('protected-navigation')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Performance', () => {
+    it('should not re-render unnecessarily when props are the same', async () => {
+      const renderSpy = vi.fn();
+      
+      const TestComponent = () => {
+        renderSpy();
+        return <div data-testid="test-content">Test</div>;
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      const { rerender } = renderWithProviders(
+        <NavigationGuard 
+          {...defaultProps} 
+          children={<TestComponent />}
+        />
+      );
+
+      // Initial render
+      await waitFor(() => {
+        expect(renderSpy).toHaveBeenCalledTimes(1);
+      });
+
+      // Re-render with same props
+      rerender(
+        <NavigationGuard 
+          {...defaultProps} 
+          children={<TestComponent />}
+        />
+      );
+
+      // Should not cause additional renders due to memoization
+      // React 18 Strict Mode causes double rendering in development
+      expect(renderSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('Integration', () => {
+    it('should work with different navigation item types', async () => {
+      const navigationItems: NavigationItem[] = [
+        {
+          id: 'dashboard',
+          label: 'Dashboard',
+          path: '/dashboard',
+          permissions: ['read:page.dashboard'],
+          meta: { icon: '🏠' }
+        },
+        {
+          id: 'admin',
+          label: 'Admin',
+          path: '/admin',
+          permissions: ['manage:page.admin'],
+          roles: ['admin'],
+          accessLevel: 'admin',
+          meta: { icon: '⚙️', hidden: true }
+        },
+        {
+          id: 'settings',
+          label: 'Settings',
+          path: '/settings',
+          permissions: ['update:page.settings'],
+          pageId: 'settings-page',
+          meta: { icon: '🔧', order: 1 }
+        }
+      ];
+      
+      for (const item of navigationItems) {
+        vi.clearAllMocks();
+        mockUseCan.mockReturnValue({
+          can: true,
+          isLoading: false,
+          error: null,
+          refetch: vi.fn(),
+        });
+
+        const { unmount } = renderWithProviders(
+          <NavigationGuard 
+            {...defaultProps} 
+            navigationItem={item}
+          />
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('protected-navigation')).toBeInTheDocument();
+        });
+        
+        unmount();
+      }
+    });
+  });
+});