@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,979 @@
+/**
+ * @file Enhanced RBAC Hooks Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Hooks
+ * @since 2.0.0
+ *
+ * Enhanced comprehensive test suite for RBAC hooks.
+ * Tests all functionality including permission checking, error handling,
+ * caching, performance, and edge cases 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 { useCan, usePermissions, useAccessLevel } from '../hooks';
+import { renderWithProviders } from '../../__tests__/shared';
+import { 
+  renderWithAct, 
+  renderAsync, 
+  waitForAsync,
+  mockConsole,
+  setupTestEnvironment,
+  createMockUnifiedAuth,
+  generateTestUser,
+  generateTestScope,
+  generateTestPermissions,
+  measurePerformance,
+  TestErrorBoundary
+} from './test-utils-enhanced';
+
+// 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(),
+  },
+}));
+
+// Mock the hooks
+vi.mock('../hooks', () => ({
+  useCan: vi.fn(),
+  usePermissions: vi.fn(),
+  useAccessLevel: vi.fn(),
+}));
+
+import { isPermitted, isPermittedCached, getPermissionMap, getAccessLevel } from '../api';
+
+const mockIsPermitted = vi.mocked(isPermitted);
+const mockIsPermittedCached = vi.mocked(isPermittedCached);
+const mockGetPermissionMap = vi.mocked(getPermissionMap);
+const mockGetAccessLevel = vi.mocked(getAccessLevel);
+
+// Mock the hooks
+const mockUseCan = vi.mocked(useCan);
+const mockUsePermissions = vi.mocked(usePermissions);
+const mockUseAccessLevel = vi.mocked(useAccessLevel);
+
+// Test data
+const mockUser = generateTestUser();
+const mockScope = generateTestScope();
+const mockPermissions = generateTestPermissions(5);
+
+describe('RBAC Hooks - Enhanced', () => {
+  setupTestEnvironment();
+  mockConsole();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Default mock implementations
+    mockUseCan.mockReturnValue({
+      can: false,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn()
+    });
+    
+    mockUsePermissions.mockReturnValue({
+      permissions: {},
+      isLoading: false,
+      error: null,
+      refetch: vi.fn()
+    });
+    
+    mockUseAccessLevel.mockReturnValue({
+      accessLevel: 'member',
+      isLoading: false,
+      error: null,
+      refetch: vi.fn()
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('useCan Hook', () => {
+    const TestComponent = ({ 
+      userId, 
+      scope, 
+      permission, 
+      pageId, 
+      useCache = true 
+    }: {
+      userId: string;
+      scope: any;
+      permission: string;
+      pageId?: string;
+      useCache?: boolean;
+    }) => {
+      const { can, isLoading, error, refetch } = useCan(userId, scope, permission, pageId, useCache);
+      
+      return (
+        <div>
+          <div data-testid="can">{can ? 'true' : 'false'}</div>
+          <div data-testid="loading">{isLoading ? 'true' : 'false'}</div>
+          <div data-testid="error">{error?.message || 'none'}</div>
+          <button data-testid="refetch" onClick={refetch}>Refetch</button>
+        </div>
+      );
+    };
+
+    it('should return loading state initially', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+        />
+      );
+
+      // Initially should be loading
+      expect(screen.getByTestId('loading')).toHaveTextContent('true');
+    });
+
+    it('should return permission result when loaded', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('true');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+        expect(screen.getByTestId('error')).toHaveTextContent('none');
+      });
+    });
+
+    it('should handle permission denied', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('false');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Permission check failed');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: error,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('error')).toHaveTextContent('Permission check failed');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should call refetch when refetch button is clicked', async () => {
+      const mockRefetch = vi.fn();
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('true');
+      });
+
+      // Click refetch
+      await act(async () => {
+        screen.getByTestId('refetch').click();
+      });
+
+      // Should call the refetch function
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle empty userId gracefully', async () => {
+      await renderAsync(
+        <TestComponent 
+          userId=""
+          scope={mockScope}
+          permission="read:events"
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('false');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should handle missing scope gracefully', async () => {
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={{}}
+          permission="read:events"
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('false');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should use cache when useCache is true', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+          useCache={true}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('true');
+      });
+    });
+
+    it('should not use cache when useCache is false', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+          useCache={false}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('true');
+      });
+    });
+
+    it('should handle rapid permission changes', async () => {
+      // Initially granted
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      const { rerender } = await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+          permission="read:events"
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('true');
+      });
+
+      // Change to denied
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await act(async () => {
+        rerender(
+          <TestComponent 
+            userId={mockUser.id}
+            scope={mockScope}
+            permission="read:events"
+          />
+        );
+      });
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('false');
+      });
+    });
+  });
+
+  describe('usePermissions Hook', () => {
+    const TestComponent = ({ 
+      userId, 
+      scope 
+    }: {
+      userId: string;
+      scope: any;
+    }) => {
+      const { permissions, isLoading, error, refetch } = usePermissions(userId, scope);
+      
+      return (
+        <div>
+          <div data-testid="permissions">{JSON.stringify(permissions)}</div>
+          <div data-testid="loading">{isLoading ? 'true' : 'false'}</div>
+          <div data-testid="error">{error?.message || 'none'}</div>
+          <button data-testid="refetch" onClick={refetch}>Refetch</button>
+        </div>
+      );
+    };
+
+    it('should return loading state initially', async () => {
+      mockUsePermissions.mockReturnValue({
+        permissions: {},
+        isLoading: true,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      // Initially should be loading
+      expect(screen.getByTestId('loading')).toHaveTextContent('true');
+    });
+
+    it('should return permissions when loaded', async () => {
+      const mockPermissionMap = {
+        'page-1': ['read', 'update'],
+        'page-2': ['read'],
+        'admin': ['manage']
+      };
+      mockUsePermissions.mockReturnValue({
+        permissions: mockPermissionMap,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('permissions')).toHaveTextContent(JSON.stringify(mockPermissionMap));
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+        expect(screen.getByTestId('error')).toHaveTextContent('none');
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Failed to fetch permissions');
+      mockUsePermissions.mockReturnValue({
+        permissions: {},
+        isLoading: false,
+        error: error,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('error')).toHaveTextContent('Failed to fetch permissions');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should call refetch when refetch button is clicked', async () => {
+      const mockPermissionMap = { 'page-1': ['read'] };
+      const mockRefetch = vi.fn();
+      mockUsePermissions.mockReturnValue({
+        permissions: mockPermissionMap,
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('permissions')).toHaveTextContent(JSON.stringify(mockPermissionMap));
+      });
+
+      // Click refetch
+      await act(async () => {
+        screen.getByTestId('refetch').click();
+      });
+
+      // Should call the refetch function
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle empty userId gracefully', async () => {
+      await renderAsync(
+        <TestComponent 
+          userId=""
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('permissions')).toHaveTextContent('{}');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should handle missing scope gracefully', async () => {
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={{}}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('permissions')).toHaveTextContent('{}');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should handle rapid scope changes', async () => {
+      const { rerender } = await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      // Initially empty
+      mockUsePermissions.mockReturnValue({
+        permissions: {},
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('permissions')).toHaveTextContent('{}');
+      });
+
+      // Change scope
+      const newScope = generateTestScope({ organisationId: 'new-org' });
+      const newPermissions = { 'page-1': ['read', 'write'] };
+      mockUsePermissions.mockReturnValue({
+        permissions: newPermissions,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await act(async () => {
+        rerender(
+          <TestComponent 
+            userId={mockUser.id}
+            scope={newScope}
+          />
+        );
+      });
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('permissions')).toHaveTextContent(JSON.stringify(newPermissions));
+      });
+    });
+  });
+
+  describe('useAccessLevel Hook', () => {
+    const TestComponent = ({ 
+      userId, 
+      scope 
+    }: {
+      userId: string;
+      scope: any;
+    }) => {
+      const { accessLevel, isLoading, error, refetch } = useAccessLevel(userId, scope);
+      
+      return (
+        <div>
+          <div data-testid="access-level">{accessLevel || 'none'}</div>
+          <div data-testid="loading">{isLoading ? 'true' : 'false'}</div>
+          <div data-testid="error">{error?.message || 'none'}</div>
+          <button data-testid="refetch" onClick={refetch}>Refetch</button>
+        </div>
+      );
+    };
+
+    it('should return loading state initially', async () => {
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'member',
+        isLoading: true,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      // Initially should be loading
+      expect(screen.getByTestId('loading')).toHaveTextContent('true');
+    });
+
+    it('should return access level when loaded', async () => {
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'admin',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-level')).toHaveTextContent('admin');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+        expect(screen.getByTestId('error')).toHaveTextContent('none');
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Failed to fetch access level');
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'member',
+        isLoading: false,
+        error: error,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('error')).toHaveTextContent('Failed to fetch access level');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should call refetch when refetch button is clicked', async () => {
+      const mockRefetch = vi.fn();
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'admin',
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-level')).toHaveTextContent('admin');
+      });
+
+      // Click refetch
+      await act(async () => {
+        screen.getByTestId('refetch').click();
+      });
+
+      // Should call the refetch function
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle empty userId gracefully', async () => {
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'none',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId=""
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-level')).toHaveTextContent('none');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should handle missing scope gracefully', async () => {
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'none',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={{}}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-level')).toHaveTextContent('none');
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+
+    it('should handle rapid scope changes', async () => {
+      // Initially admin
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'admin',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      const { rerender } = await renderAsync(
+        <TestComponent 
+          userId={mockUser.id}
+          scope={mockScope}
+        />
+      );
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-level')).toHaveTextContent('admin');
+      });
+
+      // Change scope
+      const newScope = generateTestScope({ organisationId: 'new-org' });
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'member',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await act(async () => {
+        rerender(
+          <TestComponent 
+            userId={mockUser.id}
+            scope={newScope}
+          />
+        );
+      });
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('access-level')).toHaveTextContent('member');
+      });
+    });
+  });
+
+  describe('Performance', () => {
+    it('should handle rapid permission changes efficiently', async () => {
+      const performance = await measurePerformance(async () => {
+        const TestComponent = () => {
+          const { can } = useCan(mockUser.id, mockScope, 'read:events');
+          return <div data-testid="can">{can ? 'true' : 'false'}</div>;
+        };
+
+        const { rerender } = await renderAsync(<TestComponent />);
+
+        // Rapidly change permission state
+        for (let i = 0; i < 10; i++) {
+          mockIsPermittedCached.mockResolvedValue(i % 2 === 0);
+
+          await act(async () => {
+            rerender(<TestComponent />);
+          });
+        }
+      });
+
+      // Should complete within reasonable time (less than 1 second)
+      expect(performance).toBeLessThan(1000);
+    });
+
+    it('should handle multiple concurrent permission checks', async () => {
+      const TestComponent = () => {
+        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>
+            <div data-testid="can1">{can1.can ? 'true' : 'false'}</div>
+            <div data-testid="can2">{can2.can ? 'true' : 'false'}</div>
+            <div data-testid="can3">{can3.can ? 'true' : 'false'}</div>
+          </div>
+        );
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(<TestComponent />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can1')).toHaveTextContent('true');
+        expect(screen.getByTestId('can2')).toHaveTextContent('true');
+        expect(screen.getByTestId('can3')).toHaveTextContent('true');
+      });
+
+      // Should have called the hook for each permission
+      expect(mockUseCan).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle network errors gracefully', async () => {
+      const TestComponent = () => {
+        const { can, error } = useCan(mockUser.id, mockScope, 'read:events');
+        return (
+          <div>
+            <div data-testid="can">{can ? 'true' : 'false'}</div>
+            <div data-testid="error">{error?.message || 'none'}</div>
+          </div>
+        );
+      };
+
+      const networkError = new Error('Network error');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: networkError,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(<TestComponent />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('false');
+        expect(screen.getByTestId('error')).toHaveTextContent('Network error');
+      });
+    });
+
+    it('should handle timeout errors gracefully', async () => {
+      const TestComponent = () => {
+        const { can, error } = useCan(mockUser.id, mockScope, 'read:events');
+        return (
+          <div>
+            <div data-testid="can">{can ? 'true' : 'false'}</div>
+            <div data-testid="error">{error?.message || 'none'}</div>
+          </div>
+        );
+      };
+
+      const timeoutError = new Error('Request timeout');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: timeoutError,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(<TestComponent />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('false');
+        expect(screen.getByTestId('error')).toHaveTextContent('Request timeout');
+      });
+    });
+
+    it('should handle malformed responses gracefully', async () => {
+      const TestComponent = () => {
+        const { can, error } = useCan(mockUser.id, mockScope, 'read:events');
+        return (
+          <div>
+            <div data-testid="can">{can ? 'true' : 'false'}</div>
+            <div data-testid="error">{error?.message || 'none'}</div>
+          </div>
+        );
+      };
+
+      // Mock a malformed response
+      mockIsPermittedCached.mockResolvedValue(null as any);
+
+      await renderAsync(<TestComponent />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('false');
+      });
+    });
+  });
+
+  describe('Integration', () => {
+    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');
+      };
+
+      const TestComponent = () => {
+        const { can } = useCan(mockUser.id, mockScope, 'read:events');
+        return can ? <ErrorComponent /> : <div>No permission</div>;
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(
+        <TestErrorBoundary onError={onError}>
+          <TestComponent />
+        </TestErrorBoundary>
+      );
+
+      await waitForAsync(async () => {
+        expect(onError).toHaveBeenCalledWith(expect.any(Error));
+        expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+      });
+    });
+
+    it('should work with multiple hooks in same component', async () => {
+      const TestComponent = () => {
+        const { can } = useCan(mockUser.id, mockScope, 'read:events');
+        const { permissions } = usePermissions(mockUser.id, mockScope);
+        const { accessLevel } = useAccessLevel(mockUser.id, mockScope);
+        
+        return (
+          <div>
+            <div data-testid="can">{can ? 'true' : 'false'}</div>
+            <div data-testid="permissions">{Object.keys(permissions).length}</div>
+            <div data-testid="access-level">{accessLevel || 'none'}</div>
+          </div>
+        );
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+      mockUsePermissions.mockReturnValue({
+        permissions: { 'page-1': ['read'] },
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+      mockUseAccessLevel.mockReturnValue({
+        accessLevel: 'admin',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
+
+      await renderAsync(<TestComponent />);
+
+      await waitForAsync(async () => {
+        expect(screen.getByTestId('can')).toHaveTextContent('true');
+        expect(screen.getByTestId('permissions')).toHaveTextContent('1');
+        expect(screen.getByTestId('access-level')).toHaveTextContent('admin');
+      });
+    });
+  });
+});