@jmruthers/pace-core 0.2.4

package/src/rbac/__tests__/components-permission-enforcer.enhanced.test.tsx

@@ -0,0 +1,837 @@
+/**
+ * @file Enhanced PermissionEnforcer Component Tests - Fixed
+ * @package @jmruthers/pace-core
+ * @module RBAC/Components/PermissionEnforcer
+ * @since 2.0.0
+ *
+ * Enhanced comprehensive test suite for the PermissionEnforcer component.
+ * Tests all functionality including 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 { PermissionEnforcer, PermissionEnforcerProps } from '../components/PermissionEnforcer';
+import { useCan } from '../hooks';
+import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
+import { renderWithProviders, rerenderWithProviders } from '../../__tests__/shared';
+import { 
+  renderWithAct, 
+  renderAsync, 
+  waitForAsync,
+  mockConsole,
+  setupTestEnvironment,
+  createMockUnifiedAuth,
+  createMockUseCan,
+  createMockSupabaseClient,
+  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(),
+}));
+
+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 mockPermissions = ['read:events', 'create:users', 'update:organisations'];
+
+const defaultProps: PermissionEnforcerProps = {
+  permissions: mockPermissions,
+  operation: 'event-management',
+  children: <div data-testid="protected-content">Protected Content</div>
+};
+
+describe('PermissionEnforcer Component - Enhanced Fixed', () => {
+  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 permission is granted', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      });
+    });
+
+    it('should render fallback when permission is denied', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      const fallback = <div data-testid="access-denied">Access Denied</div>;
+      
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-denied')).toBeInTheDocument();
+        expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should render loading state while checking permissions', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ isLoading: true }));
+
+      const loading = <div data-testid="loading">Loading...</div>;
+      
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          loading={loading}
+        />
+      );
+
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+      expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+    });
+
+    it('should render fallback when permission check fails', async () => {
+      const error = new Error('Permission check failed');
+      mockUseCan.mockReturnValue(createMockUseCan({ error }));
+
+      const fallback = <div data-testid="error-fallback">Error occurred</div>;
+      
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+        expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Permission Checking Logic', () => {
+    it('should call useCan with correct parameters using first permission', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          mockPermissions[0], // First permission
+          undefined, // No pageId
+          true // useCache
+        );
+      });
+    });
+
+    it('should use custom scope when provided', async () => {
+      const customScope = {
+        organisationId: 'custom-org',
+        eventId: 'custom-event',
+        appId: 'custom-app'
+      };
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          scope={customScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: 'custom-org',
+            eventId: 'custom-event'
+          }),
+          'read:events',
+          undefined,
+          true
+        );
+      });
+    });
+
+    it('should handle empty permissions array', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          permissions={[]}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle single permission', async () => {
+      const singlePermission = ['read:events'];
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          permissions={singlePermission}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'read:events',
+          undefined,
+          true
+        );
+      });
+    });
+
+    it('should handle multiple permissions correctly', async () => {
+      const multiplePermissions = ['read:events', 'write:events', 'delete:events'];
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          permissions={multiplePermissions}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'read:events', // 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(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle requireAll=false', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          requireAll={false}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Strict Mode', () => {
+    it('should log strict mode violation when permission is denied', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          strictMode={true}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[PermissionEnforcer] STRICT MODE VIOLATION: User attempted to perform operation without permission',
+          expect.objectContaining({
+            permissions: mockPermissions,
+            operation: 'event-management',
+            userId: mockUser.id,
+            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(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          strictMode={false}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).not.toHaveBeenCalledWith(
+          expect.stringContaining('STRICT MODE VIOLATION')
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Audit Logging', () => {
+    it('should log permission check attempt when audit logging is enabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          auditLog={true}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[PermissionEnforcer] Permission check attempt:',
+          expect.objectContaining({
+            permissions: mockPermissions,
+            operation: 'event-management',
+            userId: mockUser.id,
+            allowed: true,
+            requireAll: true,
+            timestamp: expect.any(String)
+          })
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should not log permission check attempt when audit logging is disabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          auditLog={false}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).not.toHaveBeenCalledWith(
+          expect.stringContaining('[PermissionEnforcer] Permission check attempt:')
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('should call onDenied callback when permission is denied', async () => {
+      const onDenied = vi.fn();
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          onDenied={onDenied}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(onDenied).toHaveBeenCalledWith(mockPermissions, 'event-management');
+      });
+    });
+
+    it('should not call onDenied callback when permission is granted', async () => {
+      const onDenied = vi.fn();
+      
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...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(<PermissionEnforcer {...defaultProps} />);
+      
+      // The component should show loading state when there's no organisation context
+      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+    });
+
+    it('should handle 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(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          fallback={fallback}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          '[PermissionEnforcer] Permission check failed for operation event-management:',
+          error
+        );
+        expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should handle scope resolution errors', async () => {
+      // Mock the event context resolution to fail by mocking the createScopeFromEvent function
+      const mockCreateScopeFromEvent = vi.fn().mockRejectedValue(new Error('Event not found'));
+      
+      // Mock the module that contains createScopeFromEvent
+      vi.doMock('../utils/eventContext', () => ({
+        createScopeFromEvent: mockCreateScopeFromEvent
+      }));
+
+      mockUseUnifiedAuth.mockReturnValue(createMockUnifiedAuth({
+        selectedOrganisationId: null,
+        selectedEventId: 'event-789',
+        supabase: createMockSupabaseClient()
+      }));
+
+      // Mock useCan to return error due to scope resolution failure
+      mockUseCan.mockReturnValue(createMockUseCan({ 
+        can: false, 
+        isLoading: false,
+        error: new Error('Could not resolve organization from event context')
+      }));
+
+      await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        // Should show fallback due to scope resolution error
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Default Components', () => {
+    it('should render default access denied component when no fallback provided', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+        expect(screen.getByText('You don\'t have permission to perform this operation.')).toBeInTheDocument();
+        expect(screen.getByText('Go Back')).toBeInTheDocument();
+      });
+    });
+
+    it('should render default loading component when no loading provided', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ isLoading: true }));
+
+      await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty children gracefully', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          children={null}
+        />
+      );
+
+      await waitForAsync(async () => {
+        // Should not throw error
+        expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle undefined user gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue(createMockUnifiedAuth({ user: null }));
+
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          '',
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          'read:events',
+          undefined,
+          true
+        );
+      });
+    });
+
+    it('should handle rapid permission changes', async () => {
+      const { rerender } = await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      // Initially granted
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      });
+
+      // Change to denied
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await act(async () => {
+        rerender(<PermissionEnforcer {...defaultProps} />);
+      });
+
+      await waitForAsync(async () => {
+        expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle malformed permissions gracefully', async () => {
+      const malformedPermissions = ['invalid-permission', 'another-invalid'];
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          permissions={malformedPermissions}
+        />
+      );
+
+      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 very long permission lists', async () => {
+      const longPermissions = generateTestPermissions(100);
+      mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          permissions={longPermissions}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          mockUser.id,
+          expect.objectContaining({
+            organisationId: mockScope.organisationId,
+            eventId: mockScope.eventId
+          }),
+          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(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          children={<TestComponent />}
+        />
+      );
+
+      // Initial render
+      await waitForAsync(async () => {
+        expect(renderSpy).toHaveBeenCalledTimes(1);
+      });
+
+      // Re-render with same props
+      await act(async () => {
+        rerenderWithProviders(
+          <PermissionEnforcer 
+            {...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(<PermissionEnforcer {...defaultProps} />);
+
+        // Rapidly change permission state
+        for (let i = 0; i < 10; i++) {
+          mockUseCan.mockReturnValue(createMockUseCan({ 
+            can: i % 2 === 0,
+            isLoading: false 
+          }));
+
+          await act(async () => {
+            rerenderWithProviders(<PermissionEnforcer {...defaultProps} />);
+          });
+        }
+      });
+
+      // Should complete within reasonable time (less than 1 second)
+      expect(performance).toBeLessThan(1000);
+    });
+  });
+
+  describe('Integration', () => {
+    it('should work with different operation types', async () => {
+      const operations = ['create', 'read', 'update', 'delete', 'manage'];
+      
+      for (const operation of operations) {
+        vi.clearAllMocks();
+        mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+        const { unmount } = await renderAsync(
+          <PermissionEnforcer 
+            {...defaultProps} 
+            operation={operation}
+          />
+        );
+
+        await waitForAsync(async () => {
+          expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+        });
+        
+        unmount();
+      }
+    });
+
+    it('should work with different permission types', async () => {
+      const permissionSets = [
+        ['read:events'],
+        ['manage:users', 'delete:users'],
+        ['manage:system'],
+        ['create:data', 'update:data', 'delete:data']
+      ];
+      
+      for (const permissions of permissionSets) {
+        vi.clearAllMocks();
+        mockUseCan.mockReturnValue(createMockUseCan({ can: true }));
+
+        const { unmount } = await renderAsync(
+          <PermissionEnforcer 
+            {...defaultProps} 
+            permissions={permissions}
+          />
+        );
+
+        await waitForAsync(async () => {
+          expect(screen.getByTestId('protected-content')).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}>
+          <PermissionEnforcer 
+            {...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(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        const accessDenied = screen.getByText('Access Denied');
+        expect(accessDenied).toBeInTheDocument();
+        
+        // Check for proper heading structure
+        expect(accessDenied.tagName).toBe('H2');
+      });
+    });
+
+    it('should have proper button accessibility in default access denied component', async () => {
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(<PermissionEnforcer {...defaultProps} />);
+
+      await waitForAsync(async () => {
+        const goBackButton = screen.getByText('Go Back');
+        expect(goBackButton).toBeInTheDocument();
+        expect(goBackButton.tagName).toBe('BUTTON');
+      });
+    });
+  });
+
+  describe('Security', () => {
+    it('should prevent XSS in operation names', async () => {
+      const maliciousOperation = '<script>alert("xss")</script>';
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          operation={maliciousOperation}
+        />
+      );
+
+      await waitForAsync(async () => {
+        // Should not execute the script
+        expect(screen.queryByText('xss')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle malicious permission names safely', async () => {
+      const maliciousPermissions = ['<script>alert("xss")</script>', 'normal:permission'];
+      mockUseCan.mockReturnValue(createMockUseCan({ can: false }));
+
+      await renderAsync(
+        <PermissionEnforcer 
+          {...defaultProps} 
+          permissions={maliciousPermissions}
+        />
+      );
+
+      await waitForAsync(async () => {
+        // Should not execute the script
+        expect(screen.queryByText('xss')).not.toBeInTheDocument();
+      });
+    });
+  });
+});