@jmruthers/pace-core 0.5.1 → 0.5.4

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

@@ -0,0 +1,741 @@
+/**
+ * @file RoleBasedRouter Component Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Components/RoleBasedRouter
+ * @since 2.0.0
+ * 
+ * Comprehensive tests for the RoleBasedRouter 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 { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { RoleBasedRouter, useRoleBasedRouter } from '../RoleBasedRouter';
+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 React Router
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useLocation: vi.fn(),
+    useNavigate: vi.fn(),
+    Outlet: vi.fn()
+  };
+});
+
+import { useLocation, useNavigate, Outlet } from 'react-router-dom';
+
+// Mock data
+const mockUser = {
+  id: 'user-123',
+  email: 'test@example.com'
+};
+
+const mockScope = {
+  organisationId: 'org-123',
+  eventId: 'event-123',
+  appId: 'app-123'
+};
+
+const mockRoutes = [
+  {
+    path: '/dashboard',
+    component: () => <div data-testid="dashboard">Dashboard</div>,
+    permissions: ['read:dashboard'] as const,
+    pageId: 'dashboard'
+  },
+  {
+    path: '/admin',
+    component: () => <div data-testid="admin">Admin</div>,
+    permissions: ['admin:system'] as const,
+    pageId: 'admin',
+    strictMode: true
+  },
+  {
+    path: '/public',
+    component: () => <div data-testid="public">Public</div>,
+    permissions: [] as const
+  }
+];
+
+// Test components
+const TestComponent = ({ children }: { children: ReactNode }) => (
+  <div data-testid="test-component">{children}</div>
+);
+
+const TestUnauthorized = ({ route, reason }: { route: string; reason: string }) => (
+  <div data-testid="test-unauthorized">
+    Unauthorized: {route} - {reason}
+  </div>
+);
+
+const TestOutlet = () => <div data-testid="test-outlet">Outlet</div>;
+
+// Mock Outlet component
+vi.mocked(Outlet).mockImplementation(TestOutlet);
+
+describe('RoleBasedRouter Component', () => {
+  const mockUseCan = vi.mocked(useCan);
+  const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
+  const mockUseLocation = vi.mocked(useLocation);
+  const mockUseNavigate = vi.mocked(useNavigate);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Default mock implementations
+    mockUseUnifiedAuth.mockReturnValue({
+      user: mockUser,
+      selectedOrganisationId: 'org-123',
+      selectedEventId: 'event-123'
+    });
+    
+    mockUseLocation.mockReturnValue({
+      pathname: '/dashboard',
+      search: '',
+      hash: '',
+      state: null,
+      key: 'test'
+    });
+    
+    mockUseNavigate.mockReturnValue(vi.fn());
+    
+    mockUseCan.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders children when user has permission', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+        expect(screen.getByText('App Content')).toBeInTheDocument();
+      });
+    });
+
+    it('renders unauthorized component when user lacks permission', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/admin']}>
+          <RoleBasedRouter 
+            routes={mockRoutes}
+            unauthorizedComponent={TestUnauthorized}
+          >
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-unauthorized')).toBeInTheDocument();
+        expect(screen.getByText('Unauthorized: /dashboard - Insufficient permissions')).toBeInTheDocument();
+      });
+    });
+
+    it('shows loading state while checking permissions', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      expect(screen.queryByTestId('test-component')).not.toBeInTheDocument();
+    });
+
+    it('renders outlet for route components', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+        expect(screen.getByText('App Content')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Route Protection', () => {
+    it('protects routes based on permissions', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123',
+          appId: undefined
+        }),
+        'read:dashboard',
+        'dashboard'
+      );
+    });
+
+    it('denies access to routes without permissions', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/public']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+        expect(screen.getByText('You don\'t have permission to access')).toBeInTheDocument();
+      });
+    });
+
+    it('handles routes not found in configuration', async () => {
+      mockUseLocation.mockReturnValue({
+        pathname: '/unknown',
+        search: '',
+        hash: '',
+        state: null,
+        key: 'test'
+      });
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      render(
+        <MemoryRouter initialEntries={['/unknown']}>
+          <RoleBasedRouter routes={mockRoutes} strictMode={true}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          expect.stringContaining('STRICT MODE VIOLATION'),
+          expect.objectContaining({
+            route: '/unknown',
+            userId: 'user-123'
+          })
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('redirects to fallback route when unauthorized', async () => {
+      const mockNavigate = vi.fn();
+      mockUseNavigate.mockReturnValue(mockNavigate);
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/admin']}>
+          <RoleBasedRouter 
+            routes={mockRoutes}
+            fallbackRoute="/unauthorized"
+          >
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/unauthorized', { replace: true });
+      });
+    });
+  });
+
+  describe('Context Provider', () => {
+    it('provides router context to children', async () => {
+      const TestConsumer = () => {
+        const context = useRoleBasedRouter();
+        return (
+          <div data-testid="context-consumer">
+            <div data-testid="strict-mode">{context.isStrictMode.toString()}</div>
+            <div data-testid="audit-log">{context.isAuditLogEnabled.toString()}</div>
+          </div>
+        );
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes} strictMode={true} auditLog={false}>
+            <TestConsumer />
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('context-consumer')).toBeInTheDocument();
+        expect(screen.getByTestId('strict-mode')).toHaveTextContent('true');
+        expect(screen.getByTestId('audit-log')).toHaveTextContent('false');
+      });
+    });
+
+    it('throws error when useRoleBasedRouter is used outside provider', () => {
+      const TestConsumer = () => {
+        useRoleBasedRouter();
+        return <div>Should not render</div>;
+      };
+
+      expect(() => {
+        render(<TestConsumer />);
+      }).toThrow('useRoleBasedRouter must be used within a RoleBasedRouter');
+    });
+  });
+
+  describe('Route Access Management', () => {
+    it('records route access attempts', async () => {
+      const onRouteAccessSpy = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter 
+            routes={mockRoutes}
+            onRouteAccess={onRouteAccessSpy}
+            auditLog={true}
+          >
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(onRouteAccessSpy).toHaveBeenCalledWith(
+        '/dashboard',
+        true,
+        expect.objectContaining({
+          route: '/dashboard',
+          permissions: ['read:dashboard'],
+          userId: 'user-123',
+          allowed: true
+        })
+      );
+    });
+
+    it('handles strict mode violations', async () => {
+      const onStrictModeViolationSpy = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/admin']}>
+          <RoleBasedRouter 
+            routes={mockRoutes}
+            onStrictModeViolation={onStrictModeViolationSpy}
+            strictMode={true}
+          >
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(onStrictModeViolationSpy).toHaveBeenCalledWith(
+          '/dashboard',
+          expect.objectContaining({
+            route: '/dashboard',
+            permissions: ['read:dashboard'],
+            userId: 'user-123',
+            allowed: false
+          })
+        );
+      });
+    });
+
+    it('manages route access history', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      const TestHistoryConsumer = () => {
+        const context = useRoleBasedRouter();
+        const history = context.getRouteAccessHistory();
+        return (
+          <div data-testid="history-length">{history.length}</div>
+        );
+      };
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestHistoryConsumer />
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('history-length')).toHaveTextContent('1');
+      });
+    });
+
+    it('provides accessible routes', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      const TestAccessibleConsumer = () => {
+        const context = useRoleBasedRouter();
+        const accessibleRoutes = context.getAccessibleRoutes();
+        return (
+          <div data-testid="accessible-routes">{accessibleRoutes.length}</div>
+        );
+      };
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestAccessibleConsumer />
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('accessible-routes')).toHaveTextContent('3');
+      });
+    });
+
+    it('provides route configuration', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      const TestConfigConsumer = () => {
+        const context = useRoleBasedRouter();
+        const routeConfig = context.getRouteConfig('/dashboard');
+        return (
+          <div data-testid="route-config">{routeConfig?.path}</div>
+        );
+      };
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestConfigConsumer />
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('route-config')).toHaveTextContent('/dashboard');
+      });
+    });
+  });
+
+  describe('Configuration Options', () => {
+    it('respects strictMode setting', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/admin']}>
+          <RoleBasedRouter routes={mockRoutes} strictMode={false}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('STRICT MODE VIOLATION')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('respects auditLog setting', async () => {
+      const onRouteAccessSpy = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter 
+            routes={mockRoutes}
+            onRouteAccess={onRouteAccessSpy}
+            auditLog={false}
+          >
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(onRouteAccessSpy).not.toHaveBeenCalled();
+    });
+
+    it('respects maxHistorySize setting', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      const TestHistoryConsumer = () => {
+        const context = useRoleBasedRouter();
+        const history = context.getRouteAccessHistory();
+        return (
+          <div data-testid="history-length">{history.length}</div>
+        );
+      };
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes} maxHistorySize={5}>
+            <TestHistoryConsumer />
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('history-length')).toHaveTextContent('1');
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing user gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: null,
+        selectedOrganisationId: 'org-123',
+        selectedEventId: 'event-123'
+      });
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        '',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123',
+          appId: undefined
+        }),
+        'read:dashboard',
+        'dashboard'
+      );
+    });
+
+    it('handles missing organisation context', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: null
+      });
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+
+    it('handles permission check errors', async () => {
+      const error = new Error('Permission check failed');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error
+      });
+
+      render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Route Changes', () => {
+    it('handles route changes correctly', async () => {
+      const { rerender } = render(
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      // Change route
+      mockUseLocation.mockReturnValue({
+        pathname: '/admin',
+        search: '',
+        hash: '',
+        state: null,
+        key: 'test2'
+      });
+
+      rerender(
+        <MemoryRouter initialEntries={['/admin']}>
+          <RoleBasedRouter routes={mockRoutes}>
+            <TestComponent>App Content</TestComponent>
+          </RoleBasedRouter>
+        </MemoryRouter>
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          expect.objectContaining({
+            organisationId: 'org-123',
+            eventId: 'event-123',
+            appId: undefined
+          }),
+          'admin:system',
+          'admin'
+        );
+      });
+    });
+  });
+});