@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,859 @@
+/**
+ * @file Enhanced NavigationGuard Component Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Components/NavigationGuard
+ * @since 2.0.0
+ *
+ * Enhanced comprehensive test suite for the NavigationGuard component.
+ * Tests all functionality including navigation permission checking, error handling,
+ * strict mode, audit logging, edge cases, and performance with proper
+ * React act() handling.
+ */
+
+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 { renderWithProviders } from '../../__tests__/shared';
+// Note: createScopeFromEvent is imported from the hooks file
+import { 
+  renderWithAct, 
+  renderAsync, 
+  waitForAsync,
+  mockConsole,
+  setupTestEnvironment,
+  createMockUnifiedAuth,
+  createMockUseCan,
+  generateTestUser,
+  generateTestScope,
+  generateTestPermissions,
+  measurePerformance,
+  TestErrorBoundary
+} from './test-utils-enhanced';
+
+// Mock the hooks
+vi.mock('../hooks', () => ({
+  useCan: vi.fn(),
+}));
+
+vi.mock('../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(),
+}));
+
+// Mock createScopeFromEvent function
+const mockCreateScopeFromEvent = vi.fn();
+
+const mockUseCan = vi.mocked(useCan);
+const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
+
+// Test data - use consistent mock data
+const mockUser = {
+  id: 'user-123',
+  email: 'test@example.com',
+  name: 'Test User',
+  created_at: '2023-01-01T00:00:00Z',
+  updated_at: '2023-01-01T00:00:00Z'
+};
+
+const mockScope = {
+  organisationId: 'org-456',
+  eventId: 'event-789',
+  appId: undefined
+};
+const mockNavigationItem = {
+  id: 'dashboard',
+  label: 'Dashboard',
+  href: '/dashboard',
+  icon: 'Home',
+  permissions: ['read:page.dashboard'],
+  roles: ['member'],
+  accessLevel: 'basic'
+};
+
+const defaultProps: NavigationGuardProps = {
+  navigationItem: mockNavigationItem,
+  children: <div data-testid="navigation-link">Dashboard Link</div>
+};
+
+describe('NavigationGuard Component - Enhanced', () => {
+  setupTestEnvironment();
+  mockConsole();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Default mock implementations
+    mockUseUnifiedAuth.mockReturnValue(createMockUnifiedAuth());
+    mockUseCan.mockReturnValue(createMockUseCan());
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic Functionality', () => {
+    it('should render children when navigation permission is granted', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('navigation-link')).toBeInTheDocument();
+      });
+    });
+
+    it('should render fallback when navigation permission is denied', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      const fallback = <div data-testid="access-denied-nav">Access Denied</div>;
+      
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-denied-nav')).toBeInTheDocument();
+        expect(screen.queryByTestId('navigation-link')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should render loading state while checking navigation permissions', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ isLoading: true }));
+
+      const loading = <div data-testid="nav-loading">Loading...</div>;
+      
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          loading={loading}
+        />
+      );
+
+      expect(screen.getByTestId('nav-loading')).toBeInTheDocument();
+      expect(screen.queryByTestId('navigation-link')).not.toBeInTheDocument();
+    });
+
+    it('should render fallback when navigation permission check fails', async () => {
+      const error = new Error('Navigation permission check failed');
+      mockUseCan.mockReturnValue(createMockUseCan({ error }));
+
+      const fallback = <div data-testid="error-fallback">Error occurred</div>;
+      
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+        expect(screen.queryByTestId('navigation-link')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Navigation Permission Checking', () => {
+    it('should call useCan with correct parameters for navigation item', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'read:page.dashboard', // First permission from navigation item
+          undefined, // No pageId
+          true // useCache
+        );
+      });
+    });
+
+    it('should use custom scope when provided', async () => {
+      const customScope = generateTestScope({
+        organisationId: 'custom-org',
+        eventId: 'custom-event',
+        appId: 'custom-app'
+      });
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          scope={customScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: customScope.organisationId,
+            eventId: customScope.eventId,
+            appId: customScope.appId
+          }),
+          'read:page.dashboard',
+          undefined,
+          true
+        );
+      });
+    });
+
+    it('should handle navigation item with no permissions', async () => {
+      const navItemWithoutPermissions = {
+        ...mockNavigationItem,
+        permissions: []
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={navItemWithoutPermissions}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('navigation-link')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle navigation item with single permission', async () => {
+      const navItemWithSinglePermission = {
+        ...mockNavigationItem,
+        permissions: ['read:page.dashboard']
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={navItemWithSinglePermission}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'read:page.dashboard',
+          undefined,
+          true
+        );
+      });
+    });
+
+    it('should handle navigation item with multiple permissions', async () => {
+      const navItemWithMultiplePermissions = {
+        ...mockNavigationItem,
+        permissions: ['read:page.dashboard', 'manage:page.dashboard', 'delete:page.dashboard']
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={navItemWithMultiplePermissions}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'read:page.dashboard', // First permission
+          undefined,
+          true
+        );
+      });
+    });
+  });
+
+  describe('Require All vs Any Logic', () => {
+    it('should use requireAll=true by default', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('navigation-link')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle requireAll=false', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          requireAll={false}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('navigation-link')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Strict Mode', () => {
+    it('should log strict mode violation when navigation permission is denied', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          strictMode={true}
+        />
+      );
+
+      await waitForAsync(async () => {
+        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: mockUser.id,
+            scope: expect.objectContaining({
+              organisationId: mockScope.organisationId,
+              eventId: mockScope.eventId
+            }),
+            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(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          strictMode={false}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).not.toHaveBeenCalledWith(
+          expect.stringContaining('STRICT MODE VIOLATION')
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Audit Logging', () => {
+    it('should log navigation permission check attempt when audit logging is enabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          auditLog={true}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[NavigationGuard] Navigation access attempt:',
+          expect.objectContaining({
+            navigationItem: 'dashboard',
+            permissions: ['read:page.dashboard'],
+            userId: mockUser.id,
+            scope: expect.objectContaining({
+              organisationId: mockScope.organisationId,
+              eventId: mockScope.eventId
+            }),
+            allowed: true,
+            requireAll: true,
+            timestamp: expect.any(String)
+          })
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should not log navigation permission check attempt when audit logging is disabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          auditLog={false}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).not.toHaveBeenCalledWith(
+          expect.stringContaining('[NavigationGuard] Navigation permission check attempt:')
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('should call onDenied callback when navigation permission is denied', async () => {
+      const onDenied = vi.fn();
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          onDenied={onDenied}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(onDenied).toHaveBeenCalledWith(mockNavigationItem);
+      });
+    });
+
+    it('should not call onDenied callback when navigation permission is granted', async () => {
+      const onDenied = vi.fn();
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          onDenied={onDenied}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(onDenied).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle missing organisation context', async () => {
+      mockUseUnifiedAuth.mockReturnValue(createMockUnifiedAuth({
+        selectedOrganisationId: null,
+        selectedEventId: null
+      }));
+
+      // Mock useCan to return loading state when there's no organisation context
+      mockUseCan.mockReturnValue(createMockUseCan({ isLoading: true }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+      
+      // The component should show loading state when there's no organisation context
+      expect(screen.getByText('Checking...')).toBeInTheDocument();
+    });
+
+    it('should handle navigation permission check errors gracefully', async () => {
+      const error = new Error('Database connection failed');
+      mockUseCan.mockReturnValue(createMockUseCan({ error }));
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const fallback = <div data-testid="error-fallback">Error occurred</div>;
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[NavigationGuard] Permission check failed for navigation item dashboard:',
+          error
+        );
+        expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should handle scope resolution errors', async () => {
+      // Mock createScopeFromEvent to reject
+      mockCreateScopeFromEvent.mockRejectedValue(new Error('Event not found'));
+      
+      mockUseUnifiedAuth.mockReturnValue(createMockUnifiedAuth({
+        selectedOrganisationId: null,
+        selectedEventId: 'event-789',
+        supabase: {
+          from: vi.fn().mockReturnValue({
+            select: vi.fn().mockReturnValue({
+              eq: vi.fn().mockReturnValue({
+                single: vi.fn().mockResolvedValue({ data: null, error: null })
+              })
+            })
+          })
+        }
+      }));
+
+      // Mock useCan to return error due to scope resolution failure
+      mockUseCan.mockReturnValue(createMockUseCan({ 
+        error: new Error('Could not resolve organization from event context')
+      }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        // Should show loading state while trying to resolve scope
+        expect(screen.getByText('Checking...')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Default Components', () => {
+    it('should render default access denied component when no fallback provided', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+
+    it('should render default loading component when no loading provided', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ isLoading: true }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      expect(screen.getByText('Checking...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty children gracefully', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          children={null}
+        />
+      );
+
+      await waitForAsync(async () => {
+        // Should not throw error
+        expect(screen.queryByTestId('navigation-link')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle undefined user gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue(createMockUnifiedAuth({ user: null }));
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          '',
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'read:page.dashboard',
+          undefined,
+          true
+        );
+      });
+    });
+
+    it('should handle rapid navigation permission changes', async () => {
+      const { rerender } = await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      // Initially granted
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('navigation-link')).toBeInTheDocument();
+      });
+
+      // Change to denied
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await act(async () => {
+        rerender(<NavigationGuard {...defaultProps} />);
+      });
+
+      await waitForAsync(async () => {
+        expect(screen.queryByTestId('navigation-link')).not.toBeInTheDocument();
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle malformed navigation item permissions gracefully', async () => {
+      const navItemWithMalformedPermissions = {
+        ...mockNavigationItem,
+        permissions: ['invalid-permission', 'another-invalid']
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={navItemWithMalformedPermissions}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'invalid-permission', // First permission
+          undefined,
+          true
+        );
+      });
+    });
+
+    it('should handle navigation item with very long permission lists', async () => {
+      const longPermissions = generateTestPermissions(50).map(p => `read:page.${p}`);
+      const navItemWithLongPermissions = {
+        ...mockNavigationItem,
+        permissions: longPermissions
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={navItemWithLongPermissions}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          mockScope,
+          longPermissions[0], // First permission
+          undefined,
+          true
+        );
+      });
+    });
+  });
+
+  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(createMockUseCan({ can: true }));
+
+      const { rerender } = await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          children={<TestComponent />}
+        />
+      );
+
+      // Initial render
+      await waitForAsync(async () => {
+        expect(renderSpy).toHaveBeenCalledTimes(1);
+      });
+
+      // Re-render with same props
+      await act(async () => {
+        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);
+    });
+
+    it('should handle rapid state changes efficiently', async () => {
+      const performance = await measurePerformance(async () => {
+        const { rerender } = await renderAsync(<NavigationGuard {...defaultProps} />);
+
+        // Rapidly change permission state
+        for (let i = 0; i < 10; i++) {
+          mockUseCan.mockReturnValue(createMockUseCan({ 
+            can: i % 2 === 0,
+            isLoading: false 
+          }));
+
+          await act(async () => {
+            rerender(<NavigationGuard {...defaultProps} />);
+          });
+        }
+      });
+
+      // Should complete within reasonable time (less than 1 second)
+      expect(performance).toBeLessThan(1000);
+    });
+  });
+
+  describe('Integration', () => {
+    it('should work with different navigation item types', async () => {
+      const navigationItems = [
+        { ...mockNavigationItem, id: 'dashboard', label: 'Dashboard' },
+        { ...mockNavigationItem, id: 'users', label: 'Users', permissions: ['read:users'] },
+        { ...mockNavigationItem, id: 'settings', label: 'Settings', permissions: ['manage:settings'] },
+        { ...mockNavigationItem, id: 'admin', label: 'Admin', permissions: ['manage:system'] }
+      ];
+      
+      for (const navItem of navigationItems) {
+        vi.clearAllMocks();
+        mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+        const { unmount } = await renderAsync(
+          <NavigationGuard 
+            {...defaultProps} 
+            navigationItem={navItem}
+          />
+        );
+
+        await waitForAsync(async () => {
+          expect(screen.getByTestId('navigation-link')).toBeInTheDocument();
+        });
+        
+        unmount();
+      }
+    });
+
+    it('should work with error boundary', async () => {
+      const onError = vi.fn();
+      
+      // Create a component that throws an error
+      const ErrorComponent = () => {
+        throw new Error('Test error');
+      };
+
+      await renderAsync(
+        <TestErrorBoundary onError={onError}>
+          <NavigationGuard 
+            {...defaultProps} 
+            children={<ErrorComponent />}
+          />
+        </TestErrorBoundary>
+      );
+
+      await waitForAsync(async () => {
+        expect(onError).toHaveBeenCalledWith(expect.any(Error));
+        expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper ARIA attributes in default access denied component', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        const accessDenied = screen.getByText('Access Denied');
+        expect(accessDenied).toBeInTheDocument();
+        
+        // Check for proper structure (it's a span, not h2)
+        expect(accessDenied.tagName).toBe('SPAN');
+      });
+    });
+
+    it('should have proper button accessibility in default access denied component', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<NavigationGuard {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        // The default component doesn't have a Go Back button, just check for Access Denied
+        const accessDenied = screen.getByText('Access Denied');
+        expect(accessDenied).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Security', () => {
+    it('should prevent XSS in navigation item labels', async () => {
+      const maliciousNavItem = {
+        ...mockNavigationItem,
+        label: '<script>alert("xss")</script>'
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={maliciousNavItem}
+        />
+      );
+
+      await waitForAsync(async () => {
+        // Should not execute the script
+        expect(screen.queryByText('xss')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle malicious permission names safely', async () => {
+      const maliciousNavItem = {
+        ...mockNavigationItem,
+        permissions: ['<script>alert("xss")</script>', 'normal:permission']
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <NavigationGuard 
+          {...defaultProps} 
+          navigationItem={maliciousNavItem}
+        />
+      );
+
+      await waitForAsync(async () => {
+        // Should not execute the script
+        expect(screen.queryByText('xss')).not.toBeInTheDocument();
+      });
+    });
+  });
+});