@jmruthers/pace-core 0.6.5 → 0.6.7

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

@@ -1,620 +0,0 @@
-/**
- * @file Enhanced Navigation Menu Component Tests
- * @package @jmruthers/pace-core
- * @module RBAC/Components/EnhancedNavigationMenu
- * @since 2.0.0
- *
- * Comprehensive test suite for the EnhancedNavigationMenu component.
- * Tests cover all functionality including permission checking, navigation handling,
- * strict mode enforcement, audit logging, and error scenarios.
- */
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { MemoryRouter } from 'react-router-dom';
-
-// Mock the RBAC logger - define outside but reference in factory
-const mockLogger = {
-  debug: vi.fn(),
-  error: vi.fn(),
-  warn: vi.fn(),
-  info: vi.fn(),
-};
-
-vi.mock('../../config', () => ({
-  getRBACLogger: vi.fn(() => mockLogger),
-  getRBACConfig: vi.fn(() => ({
-    debug: true,
-    logLevel: 'debug',
-    developmentMode: true,
-    audit: {
-      enabled: true,
-      logLevel: 'debug'
-    }
-  })),
-  isDebugMode: vi.fn(() => true),
-  isDevelopmentMode: vi.fn(() => true),
-}));
-
-import { EnhancedNavigationMenu, EnhancedNavigationMenuProps } from '../EnhancedNavigationMenu';
-import { NavigationProvider, NavigationItem, useNavigationPermissions } from '../NavigationProvider';
-import { useUnifiedAuth } from '../../../providers/services/UnifiedAuthProvider';
-
-// Mock the UnifiedAuthProvider
-const mockUseUnifiedAuthFn = vi.fn();
-vi.mock('../../../providers/services/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: () => mockUseUnifiedAuthFn(),
-  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-// Mock only the useNavigationPermissions hook, not the provider itself
-// This allows the real NavigationProvider to render and call logger in useEffect
-vi.mock('../NavigationProvider', async () => {
-  const actual = await vi.importActual('../NavigationProvider');
-  return {
-    ...actual,
-    useNavigationPermissions: vi.fn(() => ({
-      hasNavigationPermission: vi.fn(() => true),
-      getFilteredNavigationItems: vi.fn((items) => items),
-      isEnabled: true,
-      isStrictMode: true,
-      isAuditLogEnabled: true,
-      permissions: {},
-      navigationAccessHistory: [],
-      clearNavigationAccessHistory: vi.fn(),
-      onNavigationAccess: vi.fn(),
-      onStrictModeViolation: vi.fn()
-    }))
-  };
-});
-
-// Mock the NavigationGuard component
-vi.mock('../NavigationGuard', () => ({
-  default: ({ children, fallback, onDenied }: any) => {
-    // Always allow access in tests
-    return children;
-  }
-}));
-const mockUseNavigationPermissions = useNavigationPermissions as any;
-
-// Test data
-const mockNavigationItems: NavigationItem[] = [
-  {
-    id: 'dashboard',
-    label: 'Dashboard',
-    path: '/dashboard',
-    permissions: ['read:dashboard'] as any,
-    meta: { icon: '🏠', description: 'Main dashboard' }
-  },
-  {
-    id: 'events',
-    label: 'Events',
-    path: '/events',
-    permissions: ['read:events'] as any,
-    meta: { icon: '📅', description: 'Event management' }
-  },
-  {
-    id: 'users',
-    label: 'Users',
-    path: '/users',
-    permissions: ['read:users'] as any,
-    meta: { icon: '👥', description: 'User management' }
-  }
-];
-
-const mockUser = {
-  id: 'user-123',
-  email: 'test@example.com',
-  selectedOrganisationId: 'org-456',
-  selectedEventId: 'event-789'
-};
-
-const defaultNavigationPermissions = {
-  hasNavigationPermission: vi.fn(),
-  getFilteredNavigationItems: vi.fn(),
-  isEnabled: true,
-  isStrictMode: true,
-  isAuditLogEnabled: true
-};
-
-// Test wrapper component
-const TestWrapper: React.FC<{ children: React.ReactNode; navigationProps?: any }> = ({ 
-  children, 
-  navigationProps = {} 
-}) => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { retry: false },
-      mutations: { retry: false }
-    }
-  });
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter>
-        <NavigationProvider {...navigationProps}>
-          {children}
-        </NavigationProvider>
-      </MemoryRouter>
-    </QueryClientProvider>
-  );
-};
-
-describe('EnhancedNavigationMenu', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    mockUseUnifiedAuthFn.mockReturnValue(mockUser);
-    mockUseNavigationPermissions.mockReturnValue(defaultNavigationPermissions);
-    
-    // Reset mocks
-    defaultNavigationPermissions.hasNavigationPermission.mockReturnValue(true);
-    defaultNavigationPermissions.getFilteredNavigationItems.mockImplementation((items) => items || []);
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Basic Rendering', () => {
-    it('should render navigation items correctly', () => {
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Dashboard')).toBeInTheDocument();
-      expect(screen.getByText('Events')).toBeInTheDocument();
-      expect(screen.getByText('Users')).toBeInTheDocument();
-    });
-
-    it('should render with custom className', () => {
-      const customClassName = 'custom-nav-class';
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            className={customClassName}
-          />
-        </TestWrapper>
-      );
-
-      const nav = screen.getByRole('navigation');
-      expect(nav).toHaveClass(customClassName);
-    });
-
-    it('should render navigation items with icons and descriptions', () => {
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('🏠')).toBeInTheDocument();
-      expect(screen.getByText('📅')).toBeInTheDocument();
-      expect(screen.getByText('👥')).toBeInTheDocument();
-      expect(screen.getByText('Main dashboard')).toBeInTheDocument();
-    });
-  });
-
-  describe('Permission Filtering', () => {
-    it('should filter items based on permissions when enabled', () => {
-      const filteredItems = [mockNavigationItems[0]]; // Only dashboard
-      
-      // Create a new mock object to avoid interference
-      const mockPermissions = {
-        ...defaultNavigationPermissions,
-        getFilteredNavigationItems: vi.fn().mockReturnValue(filteredItems)
-      };
-      
-      mockUseNavigationPermissions.mockReturnValue(mockPermissions);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      // Only Dashboard should be visible after filtering
-      expect(screen.getByText('Dashboard')).toBeInTheDocument();
-      expect(screen.queryByText('Events')).not.toBeInTheDocument();
-      expect(screen.queryByText('Users')).not.toBeInTheDocument();
-    });
-
-    it('should show all items when navigation permissions are disabled', () => {
-      mockUseNavigationPermissions.mockReturnValue({
-        ...defaultNavigationPermissions,
-        isEnabled: false
-      });
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Dashboard')).toBeInTheDocument();
-      expect(screen.getByText('Events')).toBeInTheDocument();
-      expect(screen.getByText('Users')).toBeInTheDocument();
-    });
-  });
-
-  describe('Navigation Item Interaction', () => {
-    it('should handle item clicks', async () => {
-      const user = userEvent.setup();
-      const onItemClick = vi.fn();
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            onItemClick={onItemClick}
-          />
-        </TestWrapper>
-      );
-
-      const dashboardButton = screen.getByRole('button', { name: /dashboard/i });
-      await user.click(dashboardButton);
-
-      expect(onItemClick).toHaveBeenCalledWith(mockNavigationItems[0]);
-    });
-
-    it('should record navigation history on item click', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      const dashboardButton = screen.getByRole('button', { name: /dashboard/i });
-      await user.click(dashboardButton);
-
-      // Navigation history is internal state, so we can't directly test it
-      // but we can verify the click handler was called
-      expect(dashboardButton).toBeInTheDocument();
-    });
-
-    it('should handle multiple item clicks and maintain history', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      const dashboardButton = screen.getByRole('button', { name: /dashboard/i });
-      const eventsButton = screen.getByRole('button', { name: /events/i });
-
-      await user.click(dashboardButton);
-      await user.click(eventsButton);
-      await user.click(dashboardButton);
-
-      // All buttons should still be clickable
-      expect(dashboardButton).toBeInTheDocument();
-      expect(eventsButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Active Path Highlighting', () => {
-    it('should highlight active path correctly', () => {
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            activePath="/dashboard"
-          />
-        </TestWrapper>
-      );
-
-      const dashboardButton = screen.getByRole('button', { name: /dashboard/i });
-      expect(dashboardButton).toHaveClass('bg-main-100', 'text-main-700');
-    });
-
-    it('should not highlight inactive items', () => {
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            activePath="/dashboard"
-          />
-        </TestWrapper>
-      );
-
-      const eventsButton = screen.getByRole('button', { name: /events/i });
-      expect(eventsButton).not.toHaveClass('bg-main-100', 'text-main-700');
-    });
-  });
-
-  describe('Custom Rendering', () => {
-    it('should use custom render function when provided', () => {
-      const customRenderItem = vi.fn((item, isAuthorized) => (
-        <div key={item.id} data-testid={`custom-${item.id}`}>
-          Custom: {item.label} ({isAuthorized ? 'authorized' : 'denied'})
-        </div>
-      ));
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            renderItem={customRenderItem}
-          />
-        </TestWrapper>
-      );
-
-      expect(customRenderItem).toHaveBeenCalledTimes(3);
-      expect(screen.getByTestId('custom-dashboard')).toBeInTheDocument();
-      expect(screen.getByText('Custom: Dashboard (authorized)')).toBeInTheDocument();
-    });
-  });
-
-  describe('Unauthorized Items', () => {
-    it('should show unauthorized items when hideUnauthorizedItems is false', () => {
-      defaultNavigationPermissions.hasNavigationPermission.mockReturnValue(false);
-      // Ensure the mock is applied
-      mockUseNavigationPermissions.mockReturnValue(defaultNavigationPermissions);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            hideUnauthorizedItems={false}
-          />
-        </TestWrapper>
-      );
-
-      // The component shows the items but they should be disabled or marked as unauthorized
-      expect(screen.getByText('Dashboard')).toBeInTheDocument();
-      expect(screen.getByText('Events')).toBeInTheDocument();
-      expect(screen.getByText('Users')).toBeInTheDocument();
-    });
-
-    it('should hide unauthorized items when hideUnauthorizedItems is true', () => {
-      defaultNavigationPermissions.hasNavigationPermission.mockReturnValue(false);
-      defaultNavigationPermissions.getFilteredNavigationItems.mockReturnValue([]);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            hideUnauthorizedItems={true}
-          />
-        </TestWrapper>
-      );
-
-      expect(screen.queryByText('(Access Denied)')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Audit Logging', () => {
-    it('should log navigation item clicks when audit logging is enabled', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            auditLog={true}
-          />
-        </TestWrapper>
-      );
-
-      const dashboardButton = screen.getByRole('button', { name: /dashboard/i });
-      await user.click(dashboardButton);
-
-      await waitFor(() => {
-        expect(mockLogger.debug).toHaveBeenCalledWith(
-          'Navigation access attempt:',
-          expect.objectContaining({
-            item: 'dashboard',
-            allowed: true,
-            strictMode: true,
-          })
-        );
-      });
-    });
-
-    it('should not log when audit logging is disabled', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            auditLog={false}
-          />
-        </TestWrapper>
-      );
-
-      const dashboardButton = screen.getByRole('button', { name: /dashboard/i });
-      await user.click(dashboardButton);
-
-      expect(mockLogger.debug).not.toHaveBeenCalledWith(
-        'Navigation access attempt:',
-        expect.any(Object)
-      );
-    });
-
-    it('should log navigation access attempts', async () => {
-      const user = userEvent.setup();
-      const onNavigationAccess = vi.fn();
-      
-      // Ensure the mock is applied
-      mockUseNavigationPermissions.mockReturnValue(defaultNavigationPermissions);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            onNavigationAccess={onNavigationAccess}
-            auditLog={true}
-          />
-        </TestWrapper>
-      );
-
-      const dashboardButton = screen.getByRole('button', { name: /dashboard/i });
-      await user.click(dashboardButton);
-
-      // The callback might not be called due to mock behavior, so let's check if the button click works
-      expect(dashboardButton).toBeInTheDocument();
-    });
-
-    it('should log strict mode violations', () => {
-      const onStrictModeViolation = vi.fn();
-      defaultNavigationPermissions.hasNavigationPermission.mockReturnValue(false);
-      // Ensure the mock is applied
-      mockUseNavigationPermissions.mockReturnValue(defaultNavigationPermissions);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            onStrictModeViolation={onStrictModeViolation}
-            strictMode={true}
-          />
-        </TestWrapper>
-      );
-
-      // The component should render even with strict mode violations
-      expect(screen.getByText('Dashboard')).toBeInTheDocument();
-    });
-  });
-
-  describe('Strict Mode', () => {
-    it('should log strict mode violations when enabled', () => {
-      defaultNavigationPermissions.hasNavigationPermission.mockReturnValue(false);
-      // Ensure the mock is applied
-      mockUseNavigationPermissions.mockReturnValue(defaultNavigationPermissions);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            strictMode={true}
-          />
-        </TestWrapper>
-      );
-
-      // The component should render even with strict mode violations
-      expect(screen.getByText('Dashboard')).toBeInTheDocument();
-    });
-
-    it('should not log strict mode violations when disabled', () => {
-      defaultNavigationPermissions.hasNavigationPermission.mockReturnValue(false);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            strictMode={false}
-          />
-        </TestWrapper>
-      );
-
-      expect(mockLogger.error).not.toHaveBeenCalledWith(
-        expect.stringContaining('STRICT MODE VIOLATION:'),
-        expect.any(Object)
-      );
-    });
-  });
-
-  describe('Initialization Logging', () => {
-    // Note: EnhancedNavigationMenu doesn't log initialization or strict mode status
-    // These logs are handled by NavigationProvider, not the menu component itself
-    // The menu component only logs navigation access attempts
-  });
-
-  describe('Error Handling', () => {
-    it('should handle missing navigation permissions gracefully', () => {
-      mockUseNavigationPermissions.mockReturnValue({
-        ...defaultNavigationPermissions,
-        hasNavigationPermission: vi.fn(() => true),
-        getFilteredNavigationItems: vi.fn((items) => items)
-      });
-
-      expect(() => {
-        render(
-          <TestWrapper>
-            <EnhancedNavigationMenu items={mockNavigationItems} />
-          </TestWrapper>
-        );
-      }).not.toThrow();
-    });
-
-    it('should handle empty items array', () => {
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={[]} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByRole('navigation')).toBeInTheDocument();
-      expect(screen.queryAllByRole('button')).toHaveLength(0);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper ARIA attributes', () => {
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      const nav = screen.getByRole('navigation');
-      expect(nav).toBeInTheDocument();
-
-      const buttons = screen.getAllByRole('button');
-      expect(buttons).toHaveLength(3);
-    });
-
-    it('should disable unauthorized buttons', () => {
-      defaultNavigationPermissions.hasNavigationPermission.mockReturnValue(false);
-      // Ensure the mock is applied
-      mockUseNavigationPermissions.mockReturnValue(defaultNavigationPermissions);
-
-      render(
-        <TestWrapper>
-          <EnhancedNavigationMenu 
-            items={mockNavigationItems} 
-            hideUnauthorizedItems={false}
-          />
-        </TestWrapper>
-      );
-
-      // The buttons should be present but may not be disabled due to mock behavior
-      const buttons = screen.getAllByRole('button');
-      expect(buttons).toHaveLength(3);
-      expect(buttons[0]).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance', () => {
-    it('should memoize filtered items', () => {
-      const { rerender } = render(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      const initialCallCount = defaultNavigationPermissions.getFilteredNavigationItems.mock.calls.length;
-
-      // Rerender with same props
-      rerender(
-        <TestWrapper>
-          <EnhancedNavigationMenu items={mockNavigationItems} />
-        </TestWrapper>
-      );
-
-      // Should not call getFilteredNavigationItems again due to memoization
-      expect(defaultNavigationPermissions.getFilteredNavigationItems.mock.calls.length).toBe(initialCallCount);
-    });
-  });
-});