@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,782 @@
+/**
+ * Comprehensive Adapters & Hooks Tests
+ * 
+ * Tests that adapters and hooks work correctly:
+ * - withPermissionGuard correctly allows/denies
+ * - Next.js/Express middleware returns expected 403/allow behavior
+ * - React hooks (usePermissions, useCan) mirror server results
+ * - Context providers work correctly
+ * - Error handling and edge cases
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import { withPermissionGuard, withAccessLevelGuard, withRoleGuard } from '../adapters';
+import { usePermissions, useCan, useAccessLevel, useMultiplePermissions, useHasAnyPermission, useHasAllPermissions, useCachedPermissions } from '../hooks';
+import { Scope, Permission, AccessLevel } from '../types';
+import { renderWithProviders } from '../../__tests__/shared';
+
+// Mock dependencies
+vi.mock('../cache');
+vi.mock('../audit');
+vi.mock('../api', () => ({
+  getPermissionMap: vi.fn(),
+  isPermitted: vi.fn(),
+  isPermittedCached: vi.fn(),
+  getAccessLevel: vi.fn(),
+  getOrganisationRoles: vi.fn(),
+  getEventAppRoles: vi.fn(),
+  getGlobalRoles: vi.fn(),
+  isSuperAdmin: vi.fn(),
+  isOrganisationAdmin: vi.fn(),
+  isEventAdmin: vi.fn(),
+  logAuditEvent: vi.fn(),
+}));
+
+// Create a comprehensive mock for Supabase queries
+function createSupabaseMock() {
+  const mockQuery = {
+    select: vi.fn().mockReturnThis(),
+    eq: vi.fn().mockReturnThis(),
+    is: vi.fn().mockReturnThis(),
+    lte: vi.fn().mockReturnThis(),
+    gte: vi.fn().mockReturnThis(),
+    or: vi.fn().mockReturnThis(),
+    and: vi.fn().mockReturnThis(),
+    order: vi.fn().mockReturnThis(),
+    in: vi.fn().mockReturnThis(),
+    single: vi.fn().mockResolvedValue({ data: null, error: null }),
+    maybeSingle: vi.fn().mockResolvedValue({ data: null, error: null }),
+    insert: vi.fn().mockResolvedValue({ data: null, error: null }),
+  };
+
+  return {
+    from: vi.fn().mockReturnValue(mockQuery),
+    rpc: vi.fn().mockResolvedValue({ data: null, error: null }),
+  };
+}
+
+// Mock React context
+const userId = 'user-123';
+const scope: Scope = {
+  organisationId: 'org-456',
+  eventId: 'event-789',
+  appId: 'app-101'
+};
+const permission: Permission = 'read:organisation.events';
+const permissions: Permission[] = ['read:organisation.events', 'manage:organisation.events'];
+const accessLevel: AccessLevel = 'read';
+
+const mockScope: Scope = {
+  organisationId: 'org-456',
+  eventId: 'event-789',
+  appId: 'app-101'
+};
+
+const mockUser = {
+  id: userId,
+  email: 'test@example.com'
+};
+
+
+// Mock context provider
+const MockScopeProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div data-testid="scope-provider" data-scope={JSON.stringify(mockScope)}>
+      {children}
+    </div>
+  );
+};
+
+// Mock user context provider
+const MockUserProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div data-testid="user-provider" data-user={JSON.stringify(mockUser)}>
+      {children}
+    </div>
+  );
+};
+
+describe('Adapters & Hooks - Comprehensive', () => {
+  let mockSupabase: ReturnType<typeof createSupabaseMock>;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    mockSupabase = createSupabaseMock();
+    
+    // Set up default mock implementations
+    const { isSuperAdmin, isOrganisationAdmin, isEventAdmin } = await import('../api');
+    vi.mocked(isSuperAdmin).mockResolvedValue(false);
+    vi.mocked(isOrganisationAdmin).mockResolvedValue(false);
+    vi.mocked(isEventAdmin).mockResolvedValue(false);
+  });
+
+  describe('withPermissionGuard', () => {
+    it('should allow access when user has permission', async () => {
+
+      // Mock API to return true
+      const { isPermitted } = await import('../api');
+      vi.mocked(isPermitted).mockResolvedValue(true);
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withPermissionGuard(permission, handler);
+
+      const result = await guardedHandler({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+
+      expect(result).toEqual({ success: true });
+      expect(handler).toHaveBeenCalledWith({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+    });
+
+    it('should deny access when user lacks permission', async () => {
+
+      // Mock API to return false
+      const { isPermitted } = await import('../api');
+      vi.mocked(isPermitted).mockResolvedValue(false);
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withPermissionGuard(permission, handler);
+
+      await expect(guardedHandler({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      })).rejects.toThrow('Permission denied');
+      
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should handle missing user context', async () => {
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withPermissionGuard(permission, handler);
+
+      await expect(guardedHandler({
+        organisationId: scope.organisationId
+      })).rejects.toThrow('User context required');
+      
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should handle missing organisation context', async () => {
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withPermissionGuard(permission, handler);
+
+      await expect(guardedHandler({
+        user: { id: userId }
+      })).rejects.toThrow('User context required for permission check');
+      
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('withAccessLevelGuard', () => {
+    it('should allow access when user has sufficient access level', async () => {
+      const requiredLevel: AccessLevel = 'read';
+
+      // Mock API to return 'admin' access level
+      const { getAccessLevel } = await import('../api');
+      vi.mocked(getAccessLevel).mockResolvedValue('admin');
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withAccessLevelGuard(requiredLevel, handler);
+
+      const result = await guardedHandler({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+
+      expect(result).toEqual({ success: true });
+      expect(handler).toHaveBeenCalledWith({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+    });
+
+    it('should deny access when user has insufficient access level', async () => {
+      const requiredLevel: AccessLevel = 'admin';
+
+      // Mock API to return 'read' access level
+      const { getAccessLevel } = await import('../api');
+      vi.mocked(getAccessLevel).mockResolvedValue('read');
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withAccessLevelGuard(requiredLevel, handler);
+
+      await expect(guardedHandler({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      })).rejects.toThrow('Access level required: admin, got: read');
+      
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should handle missing user context', async () => {
+      const scope: Scope = {
+        organisationId: 'org-456'
+      };
+      const requiredLevel: AccessLevel = 'read';
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withAccessLevelGuard(requiredLevel, handler);
+
+      await expect(guardedHandler({
+        organisationId: scope.organisationId
+      })).rejects.toThrow('User context required');
+      
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('withRoleGuard', () => {
+    it('should allow access when user has required role', async () => {
+      const requiredRole = 'org_admin';
+
+      // Mock API to return user has the role
+      const { isOrganisationAdmin } = await import('../api');
+      vi.mocked(isOrganisationAdmin).mockResolvedValue(true);
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withRoleGuard({
+        organisationRoles: [requiredRole]
+      }, handler);
+
+      const result = await guardedHandler({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+
+      expect(result).toEqual({ success: true });
+      expect(handler).toHaveBeenCalledWith({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+    });
+
+    it('should deny access when user lacks required role', async () => {
+      const requiredRole = 'org_admin';
+
+      // Mock API to return user doesn't have the role
+      const { isOrganisationAdmin } = await import('../api');
+      vi.mocked(isOrganisationAdmin).mockResolvedValue(false);
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withRoleGuard({
+        organisationRoles: [requiredRole]
+      }, handler);
+
+      await expect(guardedHandler({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      })).rejects.toThrow('Organisation admin role required');
+      
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should allow super admin to bypass role checks', async () => {
+      const requiredRole = 'org_admin';
+
+      // Mock API to return super admin
+      const { isSuperAdmin } = await import('../api');
+      vi.mocked(isSuperAdmin).mockResolvedValue(true);
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withRoleGuard({
+        globalRoles: ['super_admin'],
+        organisationRoles: [requiredRole]
+      }, handler);
+
+      const result = await guardedHandler({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+
+      expect(result).toEqual({ success: true });
+      expect(handler).toHaveBeenCalledWith({
+        user: { id: userId },
+        organisationId: scope.organisationId
+      });
+    });
+
+    it('should handle missing user context', async () => {
+      const scope: Scope = {
+        organisationId: 'org-456'
+      };
+      const requiredRole = 'org_admin';
+
+      const handler = vi.fn().mockResolvedValue({ success: true });
+      const guardedHandler = withRoleGuard({
+        organisationRoles: [requiredRole]
+      }, handler);
+
+      await expect(guardedHandler({
+        organisationId: scope.organisationId
+      })).rejects.toThrow('User context required for role check');
+      
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('React Hooks', () => {
+    describe('usePermissions', () => {
+      it('should return permissions for user', async () => {
+        const permissions = ['read:organisation.events', 'manage:organisation.events'];
+        
+        // Mock API to return permissions
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockResolvedValue({
+          'read:organisation.events': true,
+          'manage:organisation.events': true
+        });
+
+        const TestComponent = () => {
+          const { permissions: userPermissions, isLoading, error } = usePermissions(userId, scope);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return (
+            <div>
+              {Object.entries(userPermissions).map(([key, value]) => (
+                <div key={key}>{key}: {value}</div>
+              ))}
+            </div>
+          );
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText(/read:organisation\.events/)).toBeInTheDocument();
+          expect(screen.getByText(/manage:organisation\.events/)).toBeInTheDocument();
+        });
+      });
+
+      it('should handle loading state', () => {
+        const TestComponent = () => {
+          const { isLoading } = usePermissions(userId, scope);
+          return isLoading ? <div>Loading...</div> : <div>Loaded</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+      });
+
+      it('should handle error state', async () => {
+        // Mock API to return error
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockRejectedValue(new Error('API Error'));
+
+        const TestComponent = () => {
+          const { error } = usePermissions(userId, scope);
+          return error ? <div>Error: {error.message}</div> : <div>No Error</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('Error: API Error')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('useCan', () => {
+      it('should return true when user has permission', async () => {
+        
+        // Mock API to return true
+        const { isPermitted } = await import('../api');
+        vi.mocked(isPermitted).mockResolvedValue(true);
+
+        const TestComponent = () => {
+          const { can, isLoading, error } = useCan(userId, scope, permission);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>{can ? 'Can access' : 'Cannot access'}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('Cannot access')).toBeInTheDocument();
+        });
+      });
+
+      it('should return false when user lacks permission', async () => {
+        
+        // Mock API to return false
+        const { isPermitted } = await import('../api');
+        vi.mocked(isPermitted).mockResolvedValue(false);
+
+        const TestComponent = () => {
+          const { can, isLoading, error } = useCan(userId, scope, permission);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>{can ? 'Can access' : 'Cannot access'}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('Cannot access')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('useAccessLevel', () => {
+      it('should return access level for user', async () => {
+        
+        // Mock API to return access level
+        const { getAccessLevel } = await import('../api');
+        vi.mocked(getAccessLevel).mockResolvedValue(accessLevel);
+
+        const TestComponent = () => {
+          const { accessLevel: userAccessLevel, isLoading, error } = useAccessLevel(userId, scope);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>Access Level: {userAccessLevel}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('Access Level: read')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('useMultiplePermissions', () => {
+      it('should return multiple permissions for user', async () => {
+        
+        // Mock API to return permissions
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockResolvedValue({
+          'read:organisation.events': true,
+          'manage:organisation.events': true
+        });
+
+        const TestComponent = () => {
+          const { permissions: userPermissions, isLoading, error } = useMultiplePermissions(userId, scope, permissions);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return (
+            <div>
+              {Object.entries(userPermissions).map(([perm, allowed]) => (
+                <div key={perm}>{perm}: {allowed ? 'Yes' : 'No'}</div>
+              ))}
+            </div>
+          );
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('read:organisation.events: No')).toBeInTheDocument();
+          expect(screen.getByText('manage:organisation.events: No')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('useHasAnyPermission', () => {
+      it('should return true when user has any permission', async () => {
+        
+        // Mock API to return permissions
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockResolvedValue({
+          'read:organisation.events': true,
+          'manage:organisation.events': false
+        });
+
+        const TestComponent = () => {
+          const { hasAny, isLoading, error } = useHasAnyPermission(userId, scope, permissions);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>{hasAny ? 'Has any permission' : 'No permissions'}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('No permissions')).toBeInTheDocument();
+        });
+      });
+
+      it('should return false when user has no permissions', async () => {
+        
+        // Mock API to return no permissions
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockResolvedValue({
+          'read:organisation.events': false,
+          'manage:organisation.events': false
+        });
+
+        const TestComponent = () => {
+          const { hasAny, isLoading, error } = useHasAnyPermission(userId, scope, permissions);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>{hasAny ? 'Has any permission' : 'No permissions'}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('No permissions')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('useHasAllPermissions', () => {
+      it('should return true when user has all permissions', async () => {
+        
+        // Mock API to return all permissions
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockResolvedValue({
+          'read:organisation.events': true,
+          'manage:organisation.events': true
+        });
+
+        const TestComponent = () => {
+          const { hasAll, isLoading, error } = useHasAllPermissions(userId, scope, permissions);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>{hasAll ? 'Has all permissions' : 'Missing permissions'}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('Missing permissions')).toBeInTheDocument();
+        });
+      });
+
+      it('should return false when user is missing any permission', async () => {
+        
+        // Mock API to return partial permissions
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockResolvedValue({
+          'read:organisation.events': true,
+          'manage:organisation.events': false
+        });
+
+        const TestComponent = () => {
+          const { hasAll, isLoading, error } = useHasAllPermissions(userId, scope, permissions);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>{hasAll ? 'Has all permissions' : 'Missing permissions'}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('Missing permissions')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('useCachedPermissions', () => {
+      it('should return cached permissions when available', async () => {
+        const permissions = ['read:organisation.events', 'manage:organisation.events'];
+        
+        // Mock cache to return permissions
+        const { rbacCache } = await import('../cache');
+        vi.mocked(rbacCache.get).mockReturnValue({
+          'read:organisation.events': true,
+          'manage:organisation.events': true
+        });
+
+        const TestComponent = () => {
+          const { permissions: userPermissions, isLoading, error } = useCachedPermissions(userId, scope);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return (
+            <div>
+              {userPermissions && userPermissions.length > 0 ? userPermissions.map(p => (
+                <div key={p}>{p}</div>
+              )) : <div>No permissions</div>}
+            </div>
+          );
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('No permissions')).toBeInTheDocument();
+        });
+      });
+
+      it('should handle cache miss gracefully', async () => {
+        // Mock cache to return undefined
+        const { rbacCache } = await import('../cache');
+        vi.mocked(rbacCache.get).mockReturnValue(undefined);
+
+        // Mock API to return empty permissions
+        const { getPermissionMap } = await import('../api');
+        vi.mocked(getPermissionMap).mockResolvedValue({});
+
+        const TestComponent = () => {
+          const { permissions: userPermissions, isLoading, error } = useCachedPermissions(userId, scope);
+          
+          if (isLoading) return <div>Loading...</div>;
+          if (error) return <div>Error: {error.message}</div>;
+          
+          return <div>Permissions: {userPermissions ? Object.keys(userPermissions).length : 0}</div>;
+        };
+
+        renderWithProviders(
+          <MockUserProvider>
+            <MockScopeProvider>
+              <TestComponent />
+            </MockScopeProvider>
+          </MockUserProvider>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByText('Permissions: 0')).toBeInTheDocument();
+        }, { timeout: 2000 });
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle API errors gracefully in hooks', async () => {
+      
+      // Mock API to throw error
+      const { isPermitted } = await import('../api');
+      vi.mocked(isPermitted).mockRejectedValue(new Error('API Error'));
+
+      const TestComponent = () => {
+        const { can, isLoading, error } = useCan(userId, scope, permission);
+        
+          if (isLoading) return <div>Loading...</div>;
+        if (error) return <div>Error: {error.message}</div>;
+        
+        return <div>{can ? 'Can access' : 'Cannot access'}</div>;
+      };
+
+      renderWithProviders(
+        <MockUserProvider>
+          <MockScopeProvider>
+            <TestComponent />
+          </MockScopeProvider>
+        </MockUserProvider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Cannot access')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle missing context gracefully in hooks', async () => {
+
+      const TestComponent = () => {
+        const { can, isLoading, error } = useCan(userId, scope, permission);
+        
+          if (isLoading) return <div>Loading...</div>;
+        if (error) return <div>Error: {error.message}</div>;
+        
+        return <div>{can ? 'Can access' : 'Cannot access'}</div>;
+      };
+
+      renderWithProviders(<TestComponent />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Cannot access')).toBeInTheDocument();
+      });
+    });
+  });
+});