@jmruthers/pace-core 0.2.4

package/src/rbac/__tests__/adapters.comprehensive.test.tsx

@@ -0,0 +1,963 @@
+/**
+ * RBAC Adapters Comprehensive Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Adapters/ComprehensiveTests
+ * @since 1.0.0
+ * 
+ * Comprehensive tests for React components and server adapters.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithProviders, rerenderWithProviders } from '../../__tests__/shared';
+import { 
+  PermissionGuard, 
+  AccessLevelGuard,
+  withPermissionGuard,
+  withAccessLevelGuard,
+  hasPermissionCached,
+  hasAnyPermissionCached,
+  createRBACMiddleware,
+  createRBACExpressMiddleware
+} from '../adapters.tsx';
+import { setupRBAC, isPermitted, getAccessLevel } from '../api';
+import { useCan, useAccessLevel } from '../hooks';
+import { rbacCache } from '../cache';
+
+// Mock the API functions
+vi.mock('../api', () => ({
+  setupRBAC: vi.fn(),
+  getAccessLevel: vi.fn(),
+  isPermitted: vi.fn(),
+}));
+
+// Mock the hooks
+vi.mock('../hooks', () => ({
+  useCan: vi.fn(),
+  useAccessLevel: vi.fn(),
+}));
+
+// Mock the cache
+vi.mock('../cache', () => ({
+  rbacCache: {
+    get: vi.fn(),
+    set: vi.fn(),
+    delete: vi.fn(),
+    clear: vi.fn(),
+    invalidate: vi.fn(),
+    constructor: {
+      generatePermissionKey: vi.fn().mockReturnValue('test-key'),
+      generateAccessLevelKey: vi.fn().mockReturnValue('test-key'),
+      generatePermissionMapKey: vi.fn().mockReturnValue('test-key'),
+    },
+  },
+  RBACCache: {
+    generatePermissionKey: vi.fn().mockReturnValue('test-key'),
+    generateAccessLevelKey: vi.fn().mockReturnValue('test-key'),
+    generatePermissionMapKey: vi.fn().mockReturnValue('test-key'),
+  },
+}));
+
+// Mock Supabase client
+const mockSupabase = {
+  from: vi.fn(),
+  rpc: vi.fn(),
+} as any;
+
+describe('RBAC Adapters Comprehensive Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupRBAC(mockSupabase);
+    
+    // Set up default mocks
+    useCan.mockReturnValue({
+      can: false,
+      isLoading: false,
+      error: null,
+    });
+    
+    useAccessLevel.mockReturnValue({
+      accessLevel: 'viewer',
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('PermissionGuard', () => {
+    it('should render children when permission is granted', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.getByTestId('admin-panel')).toBeInTheDocument();
+    });
+
+    it('should render fallback when permission is denied', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+          fallback={<div data-testid="access-denied">Access Denied</div>}
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.getByTestId('access-denied')).toBeInTheDocument();
+      expect(screen.queryByTestId('admin-panel')).not.toBeInTheDocument();
+    });
+
+    it('should render loading state when checking permissions', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+    });
+
+    it('should render fallback when error occurs', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: new Error('Permission check failed'),
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+          fallback={<div data-testid="error-fallback">Error</div>}
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+    });
+
+    it('should call onDenied when permission is denied', async () => {
+      const onDenied = vi.fn();
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+          onDenied={onDenied}
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(onDenied).toHaveBeenCalled();
+    });
+
+    it('should handle page-specific permissions', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+          pageId="page-789"
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(useCan).toHaveBeenCalledWith('user-123', { organisationId: 'org-456' }, 'manage:events', 'page-789');
+    });
+
+    it('should handle event-app scope', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ 
+            organisationId: 'org-456',
+            eventId: 'event-789',
+            appId: 'app-101'
+          }}
+          permission="manage:events"
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(useCan).toHaveBeenCalledWith('user-123', { 
+        organisationId: 'org-456',
+        eventId: 'event-789',
+        appId: 'app-101'
+      }, 'manage:events', undefined);
+    });
+
+    it('should handle multiple children', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+        >
+          <div data-testid="child-1">Child 1</div>
+          <div data-testid="child-2">Child 2</div>
+          <div data-testid="child-3">Child 3</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.getByTestId('child-1')).toBeInTheDocument();
+      expect(screen.getByTestId('child-2')).toBeInTheDocument();
+      expect(screen.getByTestId('child-3')).toBeInTheDocument();
+    });
+
+    it('should handle null children gracefully', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+        >
+          {null}
+        </PermissionGuard>
+      );
+
+      // Should not crash
+      expect(screen.queryByTestId('admin-panel')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('AccessLevelGuard', () => {
+    it('should render children when access level is sufficient', async () => {
+      // useAccessLevel is already imported
+      useAccessLevel.mockReturnValue({
+        accessLevel: 'admin',
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <AccessLevelGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          minLevel="admin"
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </AccessLevelGuard>
+      );
+
+      expect(screen.getByTestId('admin-panel')).toBeInTheDocument();
+    });
+
+    it('should render fallback when access level is insufficient', async () => {
+      // useAccessLevel is already imported
+      useAccessLevel.mockReturnValue({
+        accessLevel: 'viewer',
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <AccessLevelGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          minLevel="admin"
+          fallback={<div data-testid="access-denied">Access Denied</div>}
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </AccessLevelGuard>
+      );
+
+      expect(screen.getByTestId('access-denied')).toBeInTheDocument();
+      expect(screen.queryByTestId('admin-panel')).not.toBeInTheDocument();
+    });
+
+    it('should handle access level hierarchy correctly', async () => {
+      // useAccessLevel is already imported
+      useAccessLevel.mockReturnValue({
+        accessLevel: 'planner',
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <AccessLevelGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          minLevel="participant"
+        >
+          <div data-testid="planner-panel">Planner Panel</div>
+        </AccessLevelGuard>
+      );
+
+      expect(screen.getByTestId('planner-panel')).toBeInTheDocument();
+    });
+
+    it('should render loading state when checking access level', async () => {
+      // useAccessLevel is already imported
+      useAccessLevel.mockReturnValue({
+        accessLevel: null,
+        isLoading: true,
+        error: null,
+      });
+
+      renderWithProviders(
+        <AccessLevelGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          minLevel="admin"
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </AccessLevelGuard>
+      );
+
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.getByText('Checking access level...')).toBeInTheDocument();
+    });
+
+    it('should handle all access levels', async () => {
+      // useAccessLevel is already imported
+      const accessLevels = ['viewer', 'participant', 'planner', 'admin', 'super'];
+
+      for (const level of accessLevels) {
+        useAccessLevel.mockReturnValue({
+          accessLevel: level,
+          isLoading: false,
+          error: null,
+        });
+
+        const { unmount } = renderWithProviders(
+          <AccessLevelGuard
+            userId="user-123"
+            scope={{ organisationId: 'org-456' }}
+            minLevel="viewer"
+          >
+            <div data-testid={`${level}-panel`}>{level} Panel</div>
+          </AccessLevelGuard>
+        );
+
+        expect(screen.getByTestId(`${level}-panel`)).toBeInTheDocument();
+        unmount();
+      }
+    });
+
+    it('should handle null access level', async () => {
+      // useAccessLevel is already imported
+      useAccessLevel.mockReturnValue({
+        accessLevel: null,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <AccessLevelGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          minLevel="viewer"
+          fallback={<div data-testid="no-access">No Access</div>}
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </AccessLevelGuard>
+      );
+
+      expect(screen.getByTestId('no-access')).toBeInTheDocument();
+    });
+  });
+
+  describe('Server Adapters', () => {
+    describe('withPermissionGuard', () => {
+      it('should execute handler when permission is granted', async () => {
+        // isPermitted is already imported
+        isPermitted.mockResolvedValue(true);
+
+        const handler = vi.fn().mockResolvedValue({ success: true });
+        const protectedHandler = withPermissionGuard(
+          { permission: 'manage:events' },
+          handler
+        );
+
+        const req = {
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        const result = await protectedHandler(req);
+
+        expect(isPermitted).toHaveBeenCalledWith({
+          userId: 'user-123',
+          scope: { organisationId: 'org-456' },
+          permission: 'manage:events',
+        });
+        expect(handler).toHaveBeenCalledWith(req);
+        expect(result).toEqual({ success: true });
+      });
+
+      it('should throw error when permission is denied', async () => {
+        // isPermitted is already imported
+        isPermitted.mockResolvedValue(false);
+
+        const handler = vi.fn();
+        const protectedHandler = withPermissionGuard(
+          { permission: 'manage:events' },
+          handler
+        );
+
+        const req = {
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        await expect(protectedHandler(req)).rejects.toThrow('Permission denied: manage:events');
+        expect(handler).not.toHaveBeenCalled();
+      });
+
+      it('should throw error when user context is missing', async () => {
+        const handler = vi.fn();
+        const protectedHandler = withPermissionGuard(
+          { permission: 'manage:events' },
+          handler
+        );
+
+        const req = {};
+
+        await expect(protectedHandler(req)).rejects.toThrow('User context required for permission check');
+        expect(handler).not.toHaveBeenCalled();
+      });
+
+      it('should handle page-specific permissions', async () => {
+        // isPermitted is already imported
+        isPermitted.mockResolvedValue(true);
+
+        const handler = vi.fn().mockResolvedValue({ success: true });
+        const protectedHandler = withPermissionGuard(
+          { permission: 'manage:events', pageId: 'page-789' },
+          handler
+        );
+
+        const req = {
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        await protectedHandler(req);
+
+        expect(isPermitted).toHaveBeenCalledWith({
+          userId: 'user-123',
+          scope: { organisationId: 'org-456' },
+          permission: 'manage:events',
+          pageId: 'page-789',
+        });
+      });
+
+      it('should handle event-app scope', async () => {
+        // isPermitted is already imported
+        isPermitted.mockResolvedValue(true);
+
+        const handler = vi.fn().mockResolvedValue({ success: true });
+        const protectedHandler = withPermissionGuard(
+          { permission: 'manage:events' },
+          handler
+        );
+
+        const req = {
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+          eventId: 'event-789',
+          appId: 'app-101',
+        };
+
+        await protectedHandler(req);
+
+        expect(isPermitted).toHaveBeenCalledWith({
+          userId: 'user-123',
+          scope: { 
+            organisationId: 'org-456',
+            eventId: 'event-789',
+            appId: 'app-101'
+          },
+          permission: 'manage:events',
+        });
+      });
+    });
+
+    describe('withAccessLevelGuard', () => {
+      it('should execute handler when access level is sufficient', async () => {
+        // getAccessLevel is already imported
+        getAccessLevel.mockResolvedValue('admin');
+
+        const handler = vi.fn().mockResolvedValue({ success: true });
+        const protectedHandler = withAccessLevelGuard('admin', handler);
+
+        const req = {
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        const result = await protectedHandler(req);
+
+        expect(getAccessLevel).toHaveBeenCalledWith({
+          userId: 'user-123',
+          scope: { organisationId: 'org-456' },
+        });
+        expect(handler).toHaveBeenCalledWith(req);
+        expect(result).toEqual({ success: true });
+      });
+
+      it('should throw error when access level is insufficient', async () => {
+        // getAccessLevel is already imported
+        getAccessLevel.mockResolvedValue('viewer');
+
+        const handler = vi.fn();
+        const protectedHandler = withAccessLevelGuard('admin', handler);
+
+        const req = {
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        await expect(protectedHandler(req)).rejects.toThrow('Access level required: admin, got: viewer');
+        expect(handler).not.toHaveBeenCalled();
+      });
+
+      it('should handle all access levels', async () => {
+        // getAccessLevel is already imported
+        const accessLevels = ['viewer', 'participant', 'planner', 'admin', 'super'];
+
+        for (const level of accessLevels) {
+          getAccessLevel.mockResolvedValue(level);
+
+          const handler = vi.fn().mockResolvedValue({ success: true });
+          const protectedHandler = withAccessLevelGuard(level, handler);
+
+          const req = {
+            user: { id: 'user-123' },
+            organisationId: 'org-456',
+          };
+
+          await protectedHandler(req);
+          expect(handler).toHaveBeenCalledWith(req);
+        }
+      });
+    });
+  });
+
+  describe('Utility Functions', () => {
+    describe('hasPermissionCached', () => {
+      it('should return cached permission result', () => {
+        // rbacCache is already imported
+        rbacCache.get.mockReturnValue(true);
+
+        const result = hasPermissionCached(
+          'user-123',
+          { organisationId: 'org-456' },
+          'manage:events'
+        );
+
+        expect(result).toBe(true);
+        expect(rbacCache.get).toHaveBeenCalled();
+      });
+
+      it('should return false when permission is not cached', () => {
+        // rbacCache is already imported
+        rbacCache.get.mockReturnValue(null);
+
+        const result = hasPermissionCached(
+          'user-123',
+          { organisationId: 'org-456' },
+          'manage:events'
+        );
+
+        expect(result).toBe(false);
+      });
+
+      it('should handle different scopes', () => {
+        // rbacCache is already imported
+        rbacCache.get.mockReturnValue(true);
+
+        hasPermissionCached(
+          'user-123',
+          { organisationId: 'org-456', eventId: 'event-789', appId: 'app-101' },
+          'manage:events'
+        );
+
+        expect(rbacCache.get).toHaveBeenCalled();
+      });
+    });
+
+    describe('hasAnyPermissionCached', () => {
+      it('should return true when any permission is cached and granted', () => {
+        // rbacCache is already imported
+        rbacCache.get
+          .mockReturnValueOnce(false) // read:events
+          .mockReturnValueOnce(true); // manage:events
+
+        const result = hasAnyPermissionCached(
+          'user-123',
+          { organisationId: 'org-456' },
+          ['read:events', 'manage:events']
+        );
+
+        expect(result).toBe(true);
+      });
+
+      it('should return false when no permissions are cached and granted', () => {
+        // rbacCache is already imported
+        rbacCache.get
+          .mockReturnValueOnce(false) // read:events
+          .mockReturnValueOnce(false); // manage:events
+
+        const result = hasAnyPermissionCached(
+          'user-123',
+          { organisationId: 'org-456' },
+          ['read:events', 'manage:events']
+        );
+
+        expect(result).toBe(false);
+      });
+
+      it('should handle empty permissions array', () => {
+        const result = hasAnyPermissionCached(
+          'user-123',
+          { organisationId: 'org-456' },
+          []
+        );
+
+        expect(result).toBe(false);
+      });
+    });
+  });
+
+  describe('Middleware', () => {
+    describe('createRBACMiddleware', () => {
+      it('should create middleware with protected routes', () => {
+        const middleware = createRBACMiddleware({
+          protectedRoutes: [
+            { path: '/admin', permission: 'manage:admin' },
+            { path: '/events', permission: 'read:events' },
+          ],
+          fallbackUrl: '/unauthorized',
+        });
+
+        expect(middleware).toBeDefined();
+        expect(typeof middleware).toBe('function');
+      });
+
+      it('should handle requests to protected routes', async () => {
+        // isPermitted is already imported
+        isPermitted.mockResolvedValue(true);
+
+        const middleware = createRBACMiddleware({
+          protectedRoutes: [
+            { path: '/admin', permission: 'manage:admin' },
+          ],
+        });
+
+        const req = {
+          url: '/admin',
+          nextUrl: { pathname: '/admin' },
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        const res = {
+          redirect: vi.fn(),
+        };
+
+        const next = vi.fn();
+
+        await middleware(req, res, next);
+
+        expect(isPermitted).toHaveBeenCalledWith({
+          userId: 'user-123',
+          scope: { organisationId: 'org-456' },
+          permission: 'manage:admin',
+        });
+        expect(next).toHaveBeenCalled();
+      });
+
+      it('should redirect when permission is denied', async () => {
+        // isPermitted is already imported
+        isPermitted.mockResolvedValue(false);
+
+        const middleware = createRBACMiddleware({
+          protectedRoutes: [
+            { path: '/admin', permission: 'manage:admin' },
+          ],
+          fallbackUrl: '/unauthorized',
+        });
+
+        const req = {
+          url: '/admin',
+          nextUrl: { pathname: '/admin' },
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        const res = {
+          redirect: vi.fn(),
+        };
+
+        const next = vi.fn();
+
+        await middleware(req, res, next);
+
+        expect(res.redirect).toHaveBeenCalledWith('/unauthorized');
+        expect(next).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('createRBACExpressMiddleware', () => {
+      it('should create Express middleware', () => {
+        const middleware = createRBACExpressMiddleware({
+          protectedRoutes: [
+            { path: '/admin', permission: 'manage:admin' },
+          ],
+        });
+
+        expect(middleware).toBeDefined();
+        expect(typeof middleware).toBe('function');
+      });
+
+      it('should handle Express request/response objects', async () => {
+        // isPermitted is already imported
+        isPermitted.mockResolvedValue(true);
+
+        const middleware = createRBACExpressMiddleware({
+          protectedRoutes: [
+            { path: '/admin', permission: 'manage:admin' },
+          ],
+        });
+
+        const req = {
+          path: '/admin',
+          user: { id: 'user-123' },
+          organisationId: 'org-456',
+        };
+
+        const res = {
+          status: vi.fn().mockReturnThis(),
+          json: vi.fn(),
+          redirect: vi.fn(),
+        };
+
+        const next = vi.fn();
+
+        await middleware(req, res, next);
+
+        expect(isPermitted).toHaveBeenCalled();
+        expect(next).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle API errors gracefully', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: new Error('API Error'),
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+          fallback={<div data-testid="error-fallback">Error</div>}
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.getByTestId('error-fallback')).toBeInTheDocument();
+    });
+
+    it('should handle server adapter errors', async () => {
+      // isPermitted is already imported
+      isPermitted.mockRejectedValue(new Error('Database error'));
+
+      const handler = vi.fn();
+      const protectedHandler = withPermissionGuard(
+        { permission: 'manage:events' },
+        handler
+      );
+
+      const req = {
+        user: { id: 'user-123' },
+        organisationId: 'org-456',
+      };
+
+      await expect(protectedHandler(req)).rejects.toThrow('Database error');
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Performance', () => {
+    it('should handle rapid permission changes efficiently', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+      });
+
+      const { rerender } = renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      const startTime = performance.now();
+
+      // Rapidly change permissions
+      for (let i = 0; i < 100; i++) {
+        rerenderWithProviders(
+          <PermissionGuard
+            userId="user-123"
+            scope={{ organisationId: 'org-456' }}
+            permission={`manage:events-${i}` as any}
+          >
+            <div data-testid="admin-panel">Admin Panel</div>
+          </PermissionGuard>
+        );
+      }
+
+      const endTime = performance.now();
+      expect(endTime - startTime).toBeLessThan(1000); // Should complete in < 1 second
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle null/undefined props gracefully', () => {
+      renderWithProviders(
+        <PermissionGuard
+          userId={null as any}
+          scope={undefined as any}
+          permission={null as any}
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.queryByTestId('admin-panel')).not.toBeInTheDocument();
+    });
+
+    it('should handle empty children', () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="manage:events"
+        >
+          {''}
+        </PermissionGuard>
+      );
+
+      // Should not crash
+    });
+
+    it('should handle invalid permission formats', async () => {
+      // useCan is already imported
+      useCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(
+        <PermissionGuard
+          userId="user-123"
+          scope={{ organisationId: 'org-456' }}
+          permission="invalid-permission" as any
+        >
+          <div data-testid="admin-panel">Admin Panel</div>
+        </PermissionGuard>
+      );
+
+      expect(screen.queryByTestId('admin-panel')).not.toBeInTheDocument();
+    });
+  });
+});