@jmruthers/pace-core 0.2.4

package/src/rbac/__tests__/integration.enhanced.test.tsx

@@ -0,0 +1,824 @@
+/**
+ * @file Enhanced RBAC Integration Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Integration
+ * @since 2.0.0
+ *
+ * Enhanced comprehensive integration test suite for RBAC workflows.
+ * Tests end-to-end scenarios including permission checking, component integration,
+ * error handling, performance, and real-world usage patterns with proper
+ * React act() handling.
+ */
+
+import React from 'react';
+import { screen, waitFor, act, fireEvent } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { PermissionEnforcer } from '../components/PermissionEnforcer';
+import { NavigationGuard } from '../components/NavigationGuard';
+import { PagePermissionGuard } from '../components/PagePermissionGuard';
+import { useCan, usePermissions, useAccessLevel } from '../hooks';
+import { renderWithProviders } from '../../__tests__/shared';
+import { 
+  renderWithAct, 
+  renderAsync, 
+  waitForAsync,
+  mockConsole,
+  setupTestEnvironment,
+  createMockUnifiedAuth,
+  createMockUseCan,
+  generateTestUser,
+  generateTestScope,
+  generateTestPermissions,
+  measurePerformance,
+  TestErrorBoundary,
+  createMockSupabaseClient
+} from './test-utils-enhanced';
+
+// Mock the hooks
+vi.mock('../hooks', () => ({
+  useCan: vi.fn(),
+  usePermissions: vi.fn(),
+  useAccessLevel: vi.fn(),
+}));
+
+vi.mock('../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(),
+}));
+
+// Mock the API functions
+vi.mock('../api', () => ({
+  isPermitted: vi.fn(),
+  isPermittedCached: vi.fn(),
+  getPermissionMap: vi.fn(),
+  getAccessLevel: vi.fn(),
+}));
+
+// Mock the cache
+vi.mock('../cache', () => ({
+  Cache: vi.fn().mockImplementation(() => ({
+    get: vi.fn(),
+    set: vi.fn(),
+    delete: vi.fn(),
+    clear: vi.fn(),
+  })),
+}));
+
+// Mock the audit system
+vi.mock('../audit', () => ({
+  auditManager: {
+    logPermissionCheck: vi.fn(),
+    logPermissionDenied: vi.fn(),
+  },
+}));
+
+import { isPermitted, isPermittedCached, getPermissionMap, getAccessLevel } from '../api';
+import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
+
+const mockUseCan = vi.mocked(useCan);
+const mockUsePermissions = vi.mocked(usePermissions);
+const mockUseAccessLevel = vi.mocked(useAccessLevel);
+const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
+const mockIsPermitted = vi.mocked(isPermitted);
+const mockIsPermittedCached = vi.mocked(isPermittedCached);
+const mockGetPermissionMap = vi.mocked(getPermissionMap);
+const mockGetAccessLevel = vi.mocked(getAccessLevel);
+
+// Test data
+const mockUser = generateTestUser();
+const mockScope = generateTestScope();
+const mockPermissions = generateTestPermissions(5);
+
+describe('RBAC Integration Tests - Enhanced', () => {
+  setupTestEnvironment();
+  mockConsole();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Default mock implementations
+    mockUseUnifiedAuth.mockReturnValue(createMockUnifiedAuth());
+    mockUseCan.mockReturnValue(createMockUseCan());
+    mockUsePermissions.mockReturnValue({
+      permissions: { 'page-1': ['read', 'update'] },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    mockUseAccessLevel.mockReturnValue({
+      accessLevel: 'admin',
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Complete RBAC Workflow', () => {
+    it('should handle complete user authentication and permission flow', async () => {
+      const TestApp = () => {
+        const { can } = useCan(mockUser.id, mockScope, 'read:events');
+        const { permissions } = usePermissions(mockUser.id, mockScope);
+        const { accessLevel } = useAccessLevel(mockUser.id, mockScope);
+        
+        return (
+          <div>
+            <h1>Dashboard</h1>
+            {can && (
+              <PermissionEnforcer
+                permissions={['read:events']}
+                operation="view-events"
+              >
+                <div data-testid="events-section">Events Section</div>
+              </PermissionEnforcer>
+            )}
+            {permissions['page-1']?.includes('update') && (
+              <button data-testid="update-button">Update</button>
+            )}
+            {accessLevel === 'admin' && (
+              <div data-testid="admin-panel">Admin Panel</div>
+            )}
+          </div>
+        );
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+      mockUsePermissions.mockReturnValue({
+        permissions: { 'page-1': ['read', 'update'] },
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'admin',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByText('Dashboard')).toBeInTheDocument();
+        expect(screen.getByTestId('events-section')).toBeInTheDocument();
+        expect(screen.getByTestId('update-button')).toBeInTheDocument();
+        expect(screen.getByTestId('admin-panel')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle permission denied flow', async () => {
+      const TestApp = () => {
+        const { can } = useCan(mockUser.id, mockScope, 'read:events');
+        
+        return (
+          <div>
+            <h1>Dashboard</h1>
+            {can ? (
+              <PermissionEnforcer
+                permissions={['read:events']}
+                operation="view-events"
+              >
+                <div data-testid="events-section">Events Section</div>
+              </PermissionEnforcer>
+            ) : (
+              <div data-testid="access-denied">Access Denied</div>
+            )}
+          </div>
+        );
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByText('Dashboard')).toBeInTheDocument();
+        expect(screen.getByTestId('access-denied')).toBeInTheDocument();
+        expect(screen.queryByTestId('events-section')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle loading states across components', async () => {
+      const TestApp = () => {
+        const { can, isLoading: canLoading } = useCan(mockUser.id, mockScope, 'read:events');
+        const { permissions, isLoading: permissionsLoading } = usePermissions(mockUser.id, mockScope);
+        const { accessLevel, isLoading: accessLevelLoading } = useAccessLevel(mockUser.id, mockScope);
+        
+        if (canLoading || permissionsLoading || accessLevelLoading) {
+          return <div data-testid="loading">Loading...</div>;
+        }
+        
+        return (
+          <div>
+            <h1>Dashboard</h1>
+            <div data-testid="permissions-loaded">Permissions loaded</div>
+          </div>
+        );
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ isLoading: true }));
+      mockUsePermissions.mockReturnValue({
+        permissions: {},
+        isLoading: true,
+        error: null,
+        refetch: vi.fn(),
+      });
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: null,
+        isLoading: true,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      await renderAsync(<TestApp />);
+
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('should integrate PermissionEnforcer with NavigationGuard', async () => {
+      const TestApp = () => {
+        return (
+          <div>
+            <NavigationGuard
+              navigationItem={{
+                id: 'dashboard',
+                label: 'Dashboard',
+                href: '/dashboard',
+                permissions: ['read:dashboard']
+              }}
+            >
+              <PermissionEnforcer
+                permissions={['read:dashboard']}
+                operation="view-dashboard"
+              >
+                <div data-testid="dashboard-content">Dashboard Content</div>
+              </PermissionEnforcer>
+            </NavigationGuard>
+          </div>
+        );
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('dashboard-content')).toBeInTheDocument();
+      });
+    });
+
+    it('should integrate multiple PermissionEnforcer components', async () => {
+      const TestApp = () => {
+        return (
+          <div>
+            <PermissionEnforcer
+              permissions={['read:events']}
+              operation="view-events"
+            >
+              <div data-testid="events-section">Events</div>
+            </PermissionEnforcer>
+            <PermissionEnforcer
+              permissions={['manage:users']}
+              operation="manage-users"
+            >
+              <div data-testid="users-section">Users</div>
+            </PermissionEnforcer>
+            <PermissionEnforcer
+              permissions={['manage:system']}
+              operation="admin-system"
+            >
+              <div data-testid="admin-section">Admin</div>
+            </PermissionEnforcer>
+          </div>
+        );
+      };
+
+      // Mock different permission results based on permission string
+      mockUseCan.mockImplementation((userId, scope, permission) => {
+        if (permission === 'read:events') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'manage:users') {
+          return createMockUseCan({ can: false });
+        } else if (permission === 'manage:system') {
+          return createMockUseCan({ can: true });
+        }
+        return createMockUseCan({ can: false });
+      });
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('events-section')).toBeInTheDocument();
+        expect(screen.queryByTestId('users-section')).not.toBeInTheDocument();
+        expect(screen.getByTestId('admin-section')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle nested permission components', async () => {
+      const TestApp = () => {
+        return (
+          <PermissionEnforcer
+            permissions={['read:events']}
+            operation="view-events"
+          >
+            <div data-testid="events-container">
+              <PermissionEnforcer
+                permissions={['manage:events']}
+                operation="manage-events"
+              >
+                <div data-testid="event-management">Event Management</div>
+              </PermissionEnforcer>
+              <PermissionEnforcer
+                permissions={['delete:events']}
+                operation="delete-events"
+              >
+                <div data-testid="event-deletion">Event Deletion</div>
+              </PermissionEnforcer>
+            </div>
+          </PermissionEnforcer>
+        );
+      };
+
+      mockUseCan.mockImplementation((userId, scope, permission) => {
+        if (permission === 'read:events') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'manage:events') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'delete:events') {
+          return createMockUseCan({ can: false });
+        }
+        return createMockUseCan({ can: false });
+      });
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('events-container')).toBeInTheDocument();
+        expect(screen.getByTestId('event-management')).toBeInTheDocument();
+        expect(screen.queryByTestId('event-deletion')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Error Handling Integration', () => {
+    it('should handle API errors across components', async () => {
+      const TestApp = () => {
+        const { can, error } = useCan(mockUser.id, mockScope, 'read:events');
+        
+        if (error) {
+          return <div data-testid="error-message">Error: {error.message}</div>;
+        }
+        
+        return (
+          <PermissionEnforcer
+            permissions={['read:events']}
+            operation="view-events"
+          >
+            <div data-testid="events-section">Events Section</div>
+          </PermissionEnforcer>
+        );
+      };
+
+      const apiError = new Error('API Error');
+      mockUseCan.mockReturnValue(createMockUseCan({ 
+        can: false, 
+        error: apiError 
+      }));
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('error-message')).toHaveTextContent('Error: API Error');
+        expect(screen.queryByTestId('events-section')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle network failures gracefully', async () => {
+      const TestApp = () => {
+        const { can, isLoading, error } = useCan(mockUser.id, mockScope, 'read:events');
+        
+        if (isLoading) {
+          return <div data-testid="loading">Loading...</div>;
+        }
+        
+        if (error) {
+          return <div data-testid="error">Network Error</div>;
+        }
+        
+        return (
+          <PermissionEnforcer
+            permissions={['read:events']}
+            operation="view-events"
+          >
+            <div data-testid="events-section">Events Section</div>
+          </PermissionEnforcer>
+        );
+      };
+
+      const networkError = new Error('Network Error');
+      mockUseCan.mockReturnValue(createMockUseCan({ 
+        can: false, 
+        error: networkError,
+        isLoading: false
+      }));
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('error')).toHaveTextContent('Network Error');
+        expect(screen.queryByTestId('events-section')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle component errors with error boundary', async () => {
+      const onError = vi.fn();
+      
+      const ErrorComponent = () => {
+        throw new Error('Component Error');
+      };
+
+      const TestApp = () => {
+        const { can } = useCan(mockUser.id, mockScope, 'read:events');
+        
+        return (
+          <PermissionEnforcer
+            permissions={['read:events']}
+            operation="view-events"
+          >
+            {can ? <ErrorComponent /> : <div>No permission</div>}
+          </PermissionEnforcer>
+        );
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <TestErrorBoundary onError={onError}>
+          <TestApp />
+        </TestErrorBoundary>
+      );
+
+      await waitForAsync(async () => {
+        expect(onError).toHaveBeenCalledWith(expect.any(Error));
+        expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Performance Integration', () => {
+    it('should handle rapid permission changes efficiently', async () => {
+      const TestApp = () => {
+        const { can } = useCan(mockUser.id, mockScope, 'read:events');
+        
+        return (
+          <div>
+            <PermissionEnforcer
+              permissions={['read:events']}
+              operation="view-events"
+            >
+              <div data-testid="events-section">Events Section</div>
+            </PermissionEnforcer>
+            <div data-testid="permission-status">{can ? 'granted' : 'denied'}</div>
+          </div>
+        );
+      };
+
+      const performance = await measurePerformance(async () => {
+        const { rerender } = await renderAsync(<TestApp />);
+
+        // Rapidly change permission state
+        for (let i = 0; i < 20; i++) {
+          mockUseCan.mockReturnValue(createMockUseCan({ 
+            can: i % 2 === 0,
+            isLoading: false 
+          }));
+
+          await act(async () => {
+            rerender(<TestApp />);
+          });
+        }
+      });
+
+      // Should complete within reasonable time (less than 2 seconds)
+      expect(performance).toBeLessThan(2000);
+    });
+
+    it('should handle multiple concurrent permission checks', async () => {
+      const TestApp = () => {
+        const can1 = useCan(mockUser.id, mockScope, 'read:events');
+        const can2 = useCan(mockUser.id, mockScope, 'write:events');
+        const can3 = useCan(mockUser.id, mockScope, 'delete:events');
+        
+        return (
+          <div>
+            <PermissionEnforcer
+              permissions={['read:events']}
+              operation="view-events"
+            >
+              <div data-testid="events-read">Events Read</div>
+            </PermissionEnforcer>
+            <PermissionEnforcer
+              permissions={['write:events']}
+              operation="write-events"
+            >
+              <div data-testid="events-write">Events Write</div>
+            </PermissionEnforcer>
+            <PermissionEnforcer
+              permissions={['delete:events']}
+              operation="delete-events"
+            >
+              <div data-testid="events-delete">Events Delete</div>
+            </PermissionEnforcer>
+          </div>
+        );
+      };
+
+      mockUseCan.mockImplementation((userId, scope, permission) => {
+        if (permission === 'read:events') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'write:events') {
+          return createMockUseCan({ can: false });
+        } else if (permission === 'delete:events') {
+          return createMockUseCan({ can: true });
+        }
+        return createMockUseCan({ can: false });
+      });
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('events-read')).toBeInTheDocument();
+        expect(screen.queryByTestId('events-write')).not.toBeInTheDocument();
+        expect(screen.getByTestId('events-delete')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle large permission sets efficiently', async () => {
+      const largePermissions = generateTestPermissions(100);
+      
+      const TestApp = () => {
+        return (
+          <PermissionEnforcer
+            permissions={largePermissions}
+            operation="large-permission-set"
+          >
+            <div data-testid="large-permission-content">Large Permission Content</div>
+          </PermissionEnforcer>
+        );
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      const performance = await measurePerformance(async () => {
+        await renderAsync(<TestApp />);
+      });
+
+      // Should complete within reasonable time (less than 1 second)
+      expect(performance).toBeLessThan(1000);
+      
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('large-permission-content')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Real-world Scenarios', () => {
+    it('should handle admin dashboard scenario', async () => {
+      const AdminDashboard = () => {
+        const { can: canManageUsers } = useCan(mockUser.id, mockScope, 'manage:users');
+        const { can: canManageEvents } = useCan(mockUser.id, mockScope, 'manage:events');
+        const { can: canAdminSystem } = useCan(mockUser.id, mockScope, 'manage:system');
+        const { accessLevel } = useAccessLevel(mockUser.id, mockScope);
+        
+        return (
+          <div>
+            <h1>Admin Dashboard</h1>
+            {accessLevel === 'admin' && (
+              <div data-testid="admin-welcome">Welcome, Admin!</div>
+            )}
+            <PermissionEnforcer
+              permissions={['manage:users']}
+              operation="user-management"
+            >
+              <div data-testid="user-management">User Management</div>
+            </PermissionEnforcer>
+            <PermissionEnforcer
+              permissions={['manage:events']}
+              operation="event-management"
+            >
+              <div data-testid="event-management">Event Management</div>
+            </PermissionEnforcer>
+            <PermissionEnforcer
+              permissions={['manage:system']}
+              operation="system-administration"
+            >
+              <div data-testid="system-admin">System Administration</div>
+            </PermissionEnforcer>
+          </div>
+        );
+      };
+
+      mockUseCan.mockImplementation((userId, scope, permission) => {
+        if (permission === 'manage:users') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'manage:events') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'manage:system') {
+          return createMockUseCan({ can: false });
+        }
+        return createMockUseCan({ can: false });
+      });
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'admin',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      await renderAsync(<AdminDashboard />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByText('Admin Dashboard')).toBeInTheDocument();
+        expect(screen.getByTestId('admin-welcome')).toBeInTheDocument();
+        expect(screen.getByTestId('user-management')).toBeInTheDocument();
+        expect(screen.getByTestId('event-management')).toBeInTheDocument();
+        expect(screen.queryByTestId('system-admin')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle member dashboard scenario', async () => {
+      const MemberDashboard = () => {
+        const { can: canReadEvents } = useCan(mockUser.id, mockScope, 'read:events');
+        const { can: canCreateEvents } = useCan(mockUser.id, mockScope, 'create:events');
+        const { accessLevel } = useAccessLevel(mockUser.id, mockScope);
+        
+        return (
+          <div>
+            <h1>Member Dashboard</h1>
+            {accessLevel === 'member' && (
+              <div data-testid="member-welcome">Welcome, Member!</div>
+            )}
+            <PermissionEnforcer
+              permissions={['read:events']}
+              operation="view-events"
+            >
+              <div data-testid="view-events">View Events</div>
+            </PermissionEnforcer>
+            <PermissionEnforcer
+              permissions={['create:events']}
+              operation="create-events"
+            >
+              <div data-testid="create-events">Create Events</div>
+            </PermissionEnforcer>
+          </div>
+        );
+      };
+
+      mockUseCan.mockImplementation((userId, scope, permission) => {
+        if (permission === 'read:events') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'create:events') {
+          return createMockUseCan({ can: false });
+        }
+        return createMockUseCan({ can: false });
+      });
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'member',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      await renderAsync(<MemberDashboard />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByText('Member Dashboard')).toBeInTheDocument();
+        expect(screen.getByTestId('member-welcome')).toBeInTheDocument();
+        expect(screen.getByTestId('view-events')).toBeInTheDocument();
+        expect(screen.queryByTestId('create-events')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle event-based app scenario', async () => {
+      const EventApp = () => {
+        const { can: canViewEvent } = useCan(mockUser.id, mockScope, 'read:event');
+        const { can: canManageEvent } = useCan(mockUser.id, mockScope, 'manage:event');
+        
+        return (
+          <div>
+            <h1>Event App</h1>
+            <NavigationGuard
+              navigationItem={{
+                id: 'event-dashboard',
+                label: 'Event Dashboard',
+                href: '/event/dashboard',
+                permissions: ['read:event']
+              }}
+            >
+              <PermissionEnforcer
+                permissions={['read:event']}
+                operation="view-event"
+              >
+                <div data-testid="event-dashboard">Event Dashboard</div>
+              </PermissionEnforcer>
+            </NavigationGuard>
+            <PermissionEnforcer
+              permissions={['manage:event']}
+              operation="manage-event"
+            >
+              <div data-testid="event-management">Event Management</div>
+            </PermissionEnforcer>
+          </div>
+        );
+      };
+
+      mockUseCan
+        .mockReturnValueOnce(createMockUseCan({ can: true }))  // read:event
+        .mockReturnValueOnce(createMockUseCan({ can: true })); // manage:event
+
+      await renderAsync(<EventApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByText('Event App')).toBeInTheDocument();
+        expect(screen.getByTestId('event-dashboard')).toBeInTheDocument();
+        expect(screen.getByTestId('event-management')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Security Integration', () => {
+    it('should prevent permission bypassing attempts', async () => {
+      const TestApp = () => {
+        const { can } = useCan(mockUser.id, mockScope, 'read:events');
+        
+        return (
+          <div>
+            {/* Attempt to bypass permission check */}
+            {can && (
+              <div data-testid="bypass-attempt">
+                <PermissionEnforcer
+                  permissions={['manage:system']}
+                  operation="admin-bypass"
+                  strictMode={true}
+                >
+                  <div data-testid="admin-content">Admin Content</div>
+                </PermissionEnforcer>
+              </div>
+            )}
+          </div>
+        );
+      };
+
+      mockUseCan.mockImplementation((userId, scope, permission) => {
+        if (permission === 'read:events') {
+          return createMockUseCan({ can: true });
+        } else if (permission === 'manage:system') {
+          return createMockUseCan({ can: false });
+        }
+        return createMockUseCan({ can: false });
+      });
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('bypass-attempt')).toBeInTheDocument();
+        expect(screen.queryByTestId('admin-content')).not.toBeInTheDocument();
+        expect(consoleSpy).toHaveBeenCalledWith(
+          expect.stringContaining('STRICT MODE VIOLATION'),
+          expect.any(Object)
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should handle malicious input safely', async () => {
+      const TestApp = () => {
+        return (
+          <PermissionEnforcer
+            permissions={['<script>alert("xss")</script>', 'normal:permission']}
+            operation="<script>alert('xss')</script>"
+          >
+            <div data-testid="protected-content">Protected Content</div>
+          </PermissionEnforcer>
+        );
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<TestApp />);
+
+      await waitForAsync(async () => {
+        // Should not execute the script
+        expect(screen.queryByText('xss')).not.toBeInTheDocument();
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+  });
+});