@jmruthers/pace-core 0.5.1 → 0.5.4

package/src/rbac/components/__tests__/NavigationGuard.test.tsx

@@ -0,0 +1,843 @@
+/**
+ * @file NavigationGuard Component Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Components/NavigationGuard
+ * @since 2.0.0
+ * 
+ * Comprehensive tests for the NavigationGuard component covering all critical functionality.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { ReactNode } from 'react';
+import { NavigationGuard } from '../NavigationGuard';
+import { useCan } from '../../hooks';
+import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
+
+// Mock the RBAC hooks
+vi.mock('../../hooks', () => ({
+  useCan: vi.fn()
+}));
+
+// Mock the auth provider
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn()
+}));
+
+// Mock the event context utility
+vi.mock('../../utils/eventContext', () => ({
+  createScopeFromEvent: vi.fn()
+}));
+
+import { createScopeFromEvent } from '../../utils/eventContext';
+
+// Mock data
+const mockUser = {
+  id: 'user-123',
+  email: 'test@example.com'
+};
+
+const mockScope = {
+  organisationId: 'org-123',
+  eventId: 'event-123',
+  appId: 'app-123'
+};
+
+const mockNavigationItem = {
+  id: 'nav-dashboard',
+  label: 'Dashboard',
+  path: '/dashboard',
+  permissions: ['read:dashboard'] as const,
+  pageId: 'dashboard',
+  icon: 'dashboard',
+  order: 1,
+  hidden: false
+};
+
+// Test component
+const TestComponent = ({ children }: { children: ReactNode }) => (
+  <div data-testid="test-component">{children}</div>
+);
+
+const TestFallback = () => (
+  <div data-testid="test-fallback">Access Denied</div>
+);
+
+const TestLoading = () => (
+  <div data-testid="test-loading">Loading...</div>
+);
+
+describe('NavigationGuard Component', () => {
+  const mockUseCan = vi.mocked(useCan);
+  const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
+  const mockCreateScopeFromEvent = vi.mocked(createScopeFromEvent);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Default mock implementations
+    mockUseUnifiedAuth.mockReturnValue({
+      user: mockUser,
+      selectedOrganisationId: 'org-123',
+      selectedEventId: 'event-123',
+      supabase: {} as any
+    });
+    
+    mockUseCan.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders children when permission is granted', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={mockNavigationItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+        expect(screen.getByText('Navigation Link')).toBeInTheDocument();
+      });
+    });
+
+    it('renders fallback when permission is denied', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+        expect(screen.queryByTestId('test-component')).not.toBeInTheDocument();
+      });
+    });
+
+    it('shows loading state during permission check', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          loading={<TestLoading />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      expect(screen.getByTestId('test-loading')).toBeInTheDocument();
+      expect(screen.queryByTestId('test-component')).not.toBeInTheDocument();
+    });
+
+    it('uses default fallback when none provided', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={mockNavigationItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+
+    it('uses default loading when none provided', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={mockNavigationItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      expect(screen.getByText('Checking...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Permission Checking', () => {
+    it('enforces navigation permissions correctly', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={mockNavigationItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123'
+        }),
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('handles multiple permissions', async () => {
+      const multiPermissionItem = {
+        ...mockNavigationItem,
+        permissions: ['read:dashboard', 'write:dashboard'] as const
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={multiPermissionItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      // Should check the first permission as representative
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123'
+        }),
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('handles empty permissions array', async () => {
+      const noPermissionItem = {
+        ...mockNavigationItem,
+        permissions: [] as const
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={noPermissionItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+    });
+
+    it('handles permission checking errors gracefully', async () => {
+      const error = new Error('Permission check failed');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Scope Resolution', () => {
+    it('uses provided scope when available', async () => {
+      const customScope = {
+        organisationId: 'custom-org',
+        eventId: 'custom-event',
+        appId: 'custom-app'
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          scope={customScope}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        customScope,
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('resolves scope from organisation and event context', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={mockNavigationItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123'
+        }),
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('resolves scope from organisation only', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: 'org-123',
+        selectedEventId: null,
+        supabase: {} as any
+      });
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={mockNavigationItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: undefined
+        }),
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('resolves scope from event context when organisation not available', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: 'event-123',
+        supabase: {} as any
+      });
+
+      mockCreateScopeFromEvent.mockResolvedValue({
+        organisationId: 'resolved-org',
+        eventId: 'event-123',
+        appId: 'resolved-app'
+      });
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={mockNavigationItem}>
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockCreateScopeFromEvent).toHaveBeenCalledWith({}, 'event-123');
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'resolved-org',
+          eventId: 'event-123'
+        }),
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('handles scope resolution errors', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: 'event-123',
+        supabase: {} as any
+      });
+
+      const error = new Error('Could not resolve organisation from event');
+      mockCreateScopeFromEvent.mockRejectedValue(error);
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking...')).toBeInTheDocument();
+      });
+    });
+
+    it('handles missing context gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: null,
+        supabase: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking...')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Security Features', () => {
+    it('prevents bypassing in strict mode', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          strictMode={true}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('STRICT MODE VIOLATION'),
+        expect.objectContaining({
+          navigationItem: 'nav-dashboard',
+          permissions: ['read:dashboard'],
+          userId: 'user-123'
+        })
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('logs navigation access attempts for audit', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          auditLog={true}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Navigation access attempt'),
+        expect.objectContaining({
+          navigationItem: 'nav-dashboard',
+          permissions: ['read:dashboard'],
+          userId: 'user-123',
+          allowed: false
+        })
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('calls onDenied callback when access is denied', async () => {
+      const onDeniedSpy = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          onDenied={onDeniedSpy}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+
+      expect(onDeniedSpy).toHaveBeenCalledWith(mockNavigationItem);
+    });
+
+    it('does not call onDenied when access is granted', async () => {
+      const onDeniedSpy = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          onDenied={onDeniedSpy}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(onDeniedSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Configuration Options', () => {
+    it('respects strictMode setting', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          strictMode={false}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('STRICT MODE VIOLATION')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('respects auditLog setting', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          auditLog={false}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('Navigation access attempt')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('respects requireAll setting', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          requireAll={false}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      // Should still check the first permission as representative
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123'
+        }),
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing user gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: null,
+        selectedOrganisationId: 'org-123',
+        selectedEventId: 'event-123',
+        supabase: {} as any
+      });
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        '',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123'
+        }),
+        'read:dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('handles permission check errors', async () => {
+      const error = new Error('Database connection failed');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error
+      });
+
+      render(
+        <NavigationGuard 
+          navigationItem={mockNavigationItem}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Navigation Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Navigation Item Properties', () => {
+    it('handles different navigation item types', async () => {
+      const differentItem = {
+        id: 'nav-settings',
+        label: 'Settings',
+        path: '/settings',
+        permissions: ['read:settings'] as const,
+        pageId: 'settings',
+        icon: 'settings',
+        order: 2,
+        hidden: false
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={differentItem}>
+          <TestComponent>Settings Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123'
+        }),
+        'read:settings',
+        'settings',
+        true
+      );
+    });
+
+    it('handles hidden navigation items', async () => {
+      const hiddenItem = {
+        ...mockNavigationItem,
+        hidden: true
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <NavigationGuard navigationItem={hiddenItem}>
+          <TestComponent>Hidden Link</TestComponent>
+        </NavigationGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+    });
+  });
+});