@jmruthers/pace-core 0.5.53 → 0.5.55

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

@@ -0,0 +1,559 @@
+/**
+ * @file Enhanced Navigation Menu Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Components/EnhancedNavigationMenu
+ * @since 2.0.0
+ * 
+ * Comprehensive tests for the EnhancedNavigationMenu component covering all critical functionality.
+ */
+
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { EnhancedNavigationMenu } from './EnhancedNavigationMenu';
+import { useNavigationPermissions, NavigationItem } from './NavigationProvider';
+import { UUID, Scope, Permission } from '../types';
+
+// Mock the navigation provider
+vi.mock('./NavigationProvider', () => ({
+  useNavigationPermissions: vi.fn(),
+  NavigationProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
+}));
+
+// Mock the navigation guard
+vi.mock('./NavigationGuard', () => ({
+  default: ({ children, navigationItem, onDenied }: { 
+    children: React.ReactNode; 
+    navigationItem: NavigationItem;
+    onDenied?: (item: NavigationItem) => void;
+  }) => {
+    // Simulate NavigationGuard behavior - call onDenied if user doesn't have permission
+    React.useEffect(() => {
+      if (onDenied) {
+        onDenied(navigationItem);
+      }
+    }, [onDenied, navigationItem]);
+    
+    return <div data-testid={`nav-guard-${navigationItem.id}`}>{children}</div>;
+  }
+}));
+
+// Mock data
+const mockScope: Scope = {
+  organisationId: 'org-123' as UUID,
+  eventId: 'event-456',
+  appId: 'app-789' as UUID
+};
+
+const mockNavigationItems: NavigationItem[] = [
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    path: '/dashboard',
+    permissions: ['read:dashboard'] as Permission[],
+    pageId: 'page-dashboard',
+    meta: {
+      icon: 'dashboard-icon',
+      description: 'Main dashboard',
+      order: 1
+    }
+  },
+  {
+    id: 'users',
+    label: 'Users',
+    path: '/users',
+    permissions: ['read:users'] as Permission[],
+    pageId: 'page-users',
+    meta: {
+      icon: 'users-icon',
+      description: 'User management',
+      order: 2
+    }
+  },
+  {
+    id: 'admin',
+    label: 'Admin',
+    path: '/admin',
+    permissions: ['manage:admin'] as Permission[],
+    pageId: 'page-admin',
+    accessLevel: 'admin',
+    meta: {
+      icon: 'admin-icon',
+      description: 'Administration',
+      order: 3
+    }
+  }
+];
+
+describe('EnhancedNavigationMenu', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useNavigationPermissions).mockReturnValue({
+      hasNavigationPermission: vi.fn().mockReturnValue(true),
+      getNavigationPermissions: vi.fn().mockReturnValue({}),
+      getFilteredNavigationItems: vi.fn().mockImplementation((items) => items), // Return items as-is by default
+      getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+      clearNavigationAccessHistory: vi.fn(),
+      isEnabled: true,
+      isStrictMode: true,
+      isAuditLogEnabled: true
+    } as any);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders navigation items correctly', () => {
+      render(
+        <EnhancedNavigationMenu items={mockNavigationItems} />
+      );
+
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      expect(screen.getByText('Users')).toBeInTheDocument();
+      expect(screen.getByText('Admin')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const { container } = render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems} 
+          className="custom-nav-menu"
+        />
+      );
+
+      expect(container.firstChild).toHaveClass('custom-nav-menu');
+    });
+
+    it('renders with custom item className', () => {
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          itemClassName="custom-nav-item"
+        />
+      );
+
+      const navItems = screen.getAllByRole('button');
+      navItems.forEach(item => {
+        expect(item).toHaveClass('custom-nav-item');
+      });
+    });
+
+    it('renders with custom active item className', () => {
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          activeItemClassName="custom-active-item"
+          activePath="/dashboard"
+        />
+      );
+
+      const activeItem = screen.getByText('Dashboard').closest('button');
+      expect(activeItem).toHaveClass('custom-active-item');
+    });
+
+    it('renders with custom disabled item className', () => {
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(false),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue(mockNavigationItems),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          disabledItemClassName="custom-disabled-item"
+        />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toHaveClass('custom-disabled-item');
+      });
+    });
+  });
+
+  describe('Permission Filtering', () => {
+    it('filters navigation items based on permissions', () => {
+      const filteredItems = [mockNavigationItems[0], mockNavigationItems[1]]; // Only dashboard and users
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(true),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue(filteredItems),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu items={mockNavigationItems} />
+      );
+
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      expect(screen.getByText('Users')).toBeInTheDocument();
+      expect(screen.queryByText('Admin')).not.toBeInTheDocument();
+    });
+
+    it('hides unauthorized items when hideUnauthorizedItems is true', () => {
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn()
+          .mockReturnValueOnce(true)  // dashboard
+          .mockReturnValueOnce(true)  // users
+          .mockReturnValueOnce(false), // admin
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockImplementation((items) => 
+          items.filter(item => item.id !== 'admin') // Filter out admin item
+        ),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          hideUnauthorizedItems={true}
+        />
+      );
+
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      expect(screen.getByText('Users')).toBeInTheDocument();
+      expect(screen.queryByText('Admin')).not.toBeInTheDocument();
+    });
+
+    it('shows unauthorized items as disabled when hideUnauthorizedItems is false', () => {
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn()
+          .mockReturnValueOnce(true)  // dashboard
+          .mockReturnValueOnce(true)  // users
+          .mockReturnValueOnce(false), // admin
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue(mockNavigationItems),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          hideUnauthorizedItems={false}
+        />
+      );
+
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      expect(screen.getByText('Users')).toBeInTheDocument();
+      expect(screen.getByText('Admin')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Rendering', () => {
+    it('uses custom render function for navigation items', () => {
+      const customRenderItem = vi.fn((item: NavigationItem, isAuthorized: boolean) => (
+        <div key={item.id} data-testid={`custom-${item.id}`}>
+          {item.label} - {isAuthorized ? 'Authorized' : 'Unauthorized'}
+        </div>
+      ));
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          renderItem={customRenderItem}
+        />
+      );
+
+      expect(customRenderItem).toHaveBeenCalledTimes(3);
+      expect(screen.getByTestId('custom-dashboard')).toBeInTheDocument();
+      expect(screen.getByTestId('custom-users')).toBeInTheDocument();
+      expect(screen.getByTestId('custom-admin')).toBeInTheDocument();
+    });
+
+    it('passes correct parameters to custom render function', () => {
+      const customRenderItem = vi.fn((item: NavigationItem, isAuthorized: boolean) => (
+        <div key={item.id}>{item.label}</div>
+      ));
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          renderItem={customRenderItem}
+        />
+      );
+
+      expect(customRenderItem).toHaveBeenCalledWith(mockNavigationItems[0], true);
+      expect(customRenderItem).toHaveBeenCalledWith(mockNavigationItems[1], true);
+      expect(customRenderItem).toHaveBeenCalledWith(mockNavigationItems[2], true);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('calls onItemClick when navigation item is clicked', () => {
+      const onItemClick = vi.fn();
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          onItemClick={onItemClick}
+        />
+      );
+
+      const dashboardLink = screen.getByText('Dashboard').closest('button');
+      fireEvent.click(dashboardLink!);
+
+      expect(onItemClick).toHaveBeenCalledWith(mockNavigationItems[0]);
+    });
+
+    it('calls onNavigationAccess when navigation access is attempted', () => {
+      const onNavigationAccess = vi.fn();
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(true),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue(mockNavigationItems),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          onNavigationAccess={onNavigationAccess}
+        />
+      );
+
+      // Click on a navigation item to trigger the event
+      const dashboardButton = screen.getByText('Dashboard').closest('button');
+      fireEvent.click(dashboardButton!);
+
+      expect(onNavigationAccess).toHaveBeenCalled();
+    });
+
+    it('calls onStrictModeViolation when strict mode is violated', () => {
+      const onStrictModeViolation = vi.fn();
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(false),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue(mockNavigationItems),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          onStrictModeViolation={onStrictModeViolation}
+          strictMode={true}
+        />
+      );
+
+      // The NavigationGuard should be configured with the onStrictModeViolation handler
+      // Since the user doesn't have permission, the button should be disabled
+      const dashboardButton = screen.getByText('Dashboard').closest('button');
+      expect(dashboardButton).toBeDisabled();
+      
+      // The NavigationGuard should call onStrictModeViolation when it detects unauthorized access
+      // This happens during the component render, not on click
+      expect(onStrictModeViolation).toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading and Error States', () => {
+    it('renders loading state when permissions are being checked', () => {
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(false),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue([]),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+        />
+      );
+
+      // When no items are returned, the component renders an empty nav
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+    });
+
+    it('renders error state when permission check fails', () => {
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockImplementation(() => {
+          throw new Error('Permission check failed');
+        }),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue([]),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+        />
+      );
+
+      // When permission check fails, the component should still render
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+    });
+
+    it('renders empty state when no navigation items are available', () => {
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(false),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue([]),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu 
+          items={[]}
+        />
+      );
+
+      // When no items are provided, the component renders an empty nav
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('renders navigation with proper ARIA attributes', () => {
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+        />
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('renders navigation items with proper accessibility attributes', () => {
+      render(
+        <EnhancedNavigationMenu items={mockNavigationItems} />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).not.toBeDisabled();
+      });
+    });
+
+    it('handles keyboard navigation correctly', () => {
+      const onItemClick = vi.fn();
+
+      render(
+        <EnhancedNavigationMenu 
+          items={mockNavigationItems}
+          onItemClick={onItemClick}
+        />
+      );
+
+      const dashboardLink = screen.getByText('Dashboard').closest('button');
+      fireEvent.click(dashboardLink!);
+
+      expect(onItemClick).toHaveBeenCalledWith(mockNavigationItems[0]);
+    });
+  });
+
+  describe('Performance', () => {
+    it('memoizes filtered navigation items', () => {
+      const getFilteredNavigationItems = vi.fn().mockReturnValue(mockNavigationItems);
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(true),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems,
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      const { rerender } = render(
+        <EnhancedNavigationMenu items={mockNavigationItems} />
+      );
+
+      const initialCallCount = getFilteredNavigationItems.mock.calls.length;
+
+      // Re-render with same props
+      rerender(
+        <EnhancedNavigationMenu items={mockNavigationItems} />
+      );
+
+      // Should not call filterNavigationItems again due to memoization
+      expect(getFilteredNavigationItems).toHaveBeenCalledTimes(initialCallCount);
+    });
+  });
+
+  describe('Integration with NavigationProvider', () => {
+    it('integrates with useNavigationPermissions hook', () => {
+      render(
+        <EnhancedNavigationMenu items={mockNavigationItems} />
+      );
+
+      expect(vi.mocked(useNavigationPermissions)).toHaveBeenCalled();
+    });
+
+    it('uses filtered navigation items from provider', () => {
+      const filteredItems = [mockNavigationItems[0]];
+      vi.mocked(useNavigationPermissions).mockReturnValue({
+        hasNavigationPermission: vi.fn().mockReturnValue(true),
+        getNavigationPermissions: vi.fn().mockReturnValue({}),
+        getFilteredNavigationItems: vi.fn().mockReturnValue(filteredItems),
+        validateNavigationItem: vi.fn().mockReturnValue(true),
+        getNavigationAccessHistory: vi.fn().mockReturnValue([]),
+        clearNavigationAccessHistory: vi.fn(),
+        isEnabled: true,
+        isStrictMode: true,
+        isAuditLogEnabled: true
+      } as any);
+
+      render(
+        <EnhancedNavigationMenu items={mockNavigationItems} />
+      );
+
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      expect(screen.queryByText('Users')).not.toBeInTheDocument();
+      expect(screen.queryByText('Admin')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/rbac/components/EnhancedNavigationMenu.tsx

@@ -141,29 +141,6 @@ export function EnhancedNavigationMenu({
     return getFilteredNavigationItems(items);
   }, [isEnabled, items, getFilteredNavigationItems]);
 
-  // Handle navigation item click
-  const handleItemClick = useCallback((item: NavigationItem) => {
-    if (onItemClick) {
-      onItemClick(item);
-    }
-    
-    // Record navigation attempt
-    if (auditLog) {
-      console.log(`[EnhancedNavigationMenu] Navigation item clicked:`, {
-        item: item.id,
-        path: item.path,
-        permissions: item.permissions,
-        timestamp: new Date().toISOString()
-      });
-    }
-    
-    // Add to navigation history
-    setNavigationHistory(prev => {
-      const newHistory = [item, ...prev.filter(i => i.id !== item.id)];
-      return newHistory.slice(0, 10); // Keep last 10 items
-    });
-  }, [onItemClick, auditLog]);
-
   // Handle navigation access attempt
   const handleNavigationAccess = useCallback((item: NavigationItem, allowed: boolean) => {
     if (onNavigationAccess) {
@@ -196,6 +173,35 @@ export function EnhancedNavigationMenu({
     }
   }, [onStrictModeViolation, strictMode]);
 
+  // Handle navigation item click
+  const handleItemClick = useCallback((item: NavigationItem) => {
+    // Check if user has permission for this item
+    const isAuthorized = hasNavigationPermission(item);
+    
+    // Call navigation access handler
+    handleNavigationAccess(item, isAuthorized);
+    
+    if (onItemClick) {
+      onItemClick(item);
+    }
+    
+    // Record navigation attempt
+    if (auditLog) {
+      console.log(`[EnhancedNavigationMenu] Navigation item clicked:`, {
+        item: item.id,
+        path: item.path,
+        permissions: item.permissions,
+        timestamp: new Date().toISOString()
+      });
+    }
+    
+    // Add to navigation history
+    setNavigationHistory(prev => {
+      const newHistory = [item, ...prev.filter(i => i.id !== item.id)];
+      return newHistory.slice(0, 10); // Keep last 10 items
+    });
+  }, [onItemClick, auditLog, hasNavigationPermission, handleNavigationAccess]);
+
   // Default render function for navigation items
   const defaultRenderItem = useCallback((item: NavigationItem, isAuthorized: boolean) => {
     const isActive = activePath === item.path;