@jmruthers/pace-core 0.5.3 → 0.5.5

package/src/rbac/components/__tests__/PagePermissionGuard.test.tsx

@@ -0,0 +1,1007 @@
+/**
+ * @file PagePermissionGuard Component Tests
+ * @package @jmruthers/pace-core
+ * @module RBAC/Components/PagePermissionGuard
+ * @since 2.0.0
+ * 
+ * Comprehensive tests for the PagePermissionGuard component covering all critical functionality.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { ReactNode } from 'react';
+import { PagePermissionGuard } from '../PagePermissionGuard';
+import { useCan } from '../../hooks';
+import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
+
+// Mock the RBAC hooks
+vi.mock('../../hooks', () => ({
+  useCan: vi.fn()
+}));
+
+// Mock the auth provider
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn()
+}));
+
+// Mock the event context utility
+vi.mock('../../utils/eventContext', () => ({
+  createScopeFromEvent: vi.fn()
+}));
+
+// Mock the app name resolver
+vi.mock('../../../utils/appNameResolver', () => ({
+  getCurrentAppName: vi.fn()
+}));
+
+import { createScopeFromEvent } from '../../utils/eventContext';
+import { getCurrentAppName } from '../../../utils/appNameResolver';
+
+// Mock data
+const mockUser = {
+  id: 'user-123',
+  email: 'test@example.com'
+};
+
+const mockScope = {
+  organisationId: 'org-123',
+  eventId: 'event-123',
+  appId: 'app-123'
+};
+
+const mockPageName = 'dashboard';
+const mockOperation = 'read' as const;
+
+// Test component
+const TestComponent = ({ children }: { children: ReactNode }) => (
+  <div data-testid="test-component">{children}</div>
+);
+
+const TestFallback = () => (
+  <div data-testid="test-fallback">Access Denied</div>
+);
+
+const TestLoading = () => (
+  <div data-testid="test-loading">Loading...</div>
+);
+
+describe('PagePermissionGuard Component', () => {
+  const mockUseCan = vi.mocked(useCan);
+  const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
+  const mockCreateScopeFromEvent = vi.mocked(createScopeFromEvent);
+  const mockGetCurrentAppName = vi.mocked(getCurrentAppName);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Default mock implementations
+    mockUseUnifiedAuth.mockReturnValue({
+      user: mockUser,
+      selectedOrganisationId: 'org-123',
+      selectedEventId: 'event-123',
+      supabase: {
+        from: vi.fn().mockReturnValue({
+          select: vi.fn().mockReturnValue({
+            eq: vi.fn().mockReturnValue({
+              eq: vi.fn().mockReturnValue({
+                single: vi.fn().mockResolvedValue({
+                  data: { id: 'app-123', name: 'test-app', is_active: true },
+                  error: null
+                })
+              })
+            })
+          })
+        })
+      } as any
+    });
+    
+    mockGetCurrentAppName.mockReturnValue('test-app');
+    
+    mockUseCan.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders children when permission is granted', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+        expect(screen.getByText('Protected Page')).toBeInTheDocument();
+      });
+    });
+
+    it('renders fallback when permission is denied', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-fallback')).toBeInTheDocument();
+        expect(screen.queryByTestId('test-component')).not.toBeInTheDocument();
+      });
+    });
+
+    it('shows loading state during permission check', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          loading={<TestLoading />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      expect(screen.getByTestId('test-loading')).toBeInTheDocument();
+      expect(screen.queryByTestId('test-component')).not.toBeInTheDocument();
+    });
+
+    it('uses default fallback when none provided', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Access Denied')).toBeInTheDocument();
+        expect(screen.getByText('You don\'t have permission to access this page.')).toBeInTheDocument();
+      });
+    });
+
+    it('uses default loading when none provided', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Permission Checking', () => {
+    it('builds correct permission string', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123',
+          appId: 'app-123'
+        }),
+        'read:page.dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('uses custom pageId when provided', async () => {
+      const customPageId = 'custom-dashboard';
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          pageId={customPageId}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123',
+          appId: 'app-123'
+        }),
+        'read:page.dashboard',
+        customPageId,
+        true
+      );
+    });
+
+    it('handles different operations correctly', async () => {
+      const operations = ['create', 'update', 'delete'] as const;
+      
+      for (const operation of operations) {
+        vi.clearAllMocks();
+        
+        mockUseCan.mockReturnValue({
+          can: true,
+          isLoading: false,
+          error: null
+        });
+
+        const { unmount } = render(
+          <PagePermissionGuard
+            pageName={mockPageName}
+            operation={operation}
+          >
+            <TestComponent>Protected Page</TestComponent>
+          </PagePermissionGuard>
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('test-component')).toBeInTheDocument();
+        });
+
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          expect.objectContaining({
+            organisationId: 'org-123',
+            eventId: 'event-123',
+            appId: 'app-123'
+          }),
+          `${operation}:page.dashboard`,
+          'dashboard',
+          true
+        );
+
+        unmount();
+      }
+    });
+
+    it('handles permission checking errors gracefully', async () => {
+      const error = new Error('Permission check failed');
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('App ID Resolution', () => {
+    it('resolves app ID from database', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockGetCurrentAppName).toHaveBeenCalled();
+    });
+
+    it('handles app resolution errors in test environment', async () => {
+      mockGetCurrentAppName.mockReturnValue(null);
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      // Set NODE_ENV to test
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'test';
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      // Restore NODE_ENV
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('handles app resolution errors in production', async () => {
+      mockGetCurrentAppName.mockReturnValue(null);
+      
+      // Set NODE_ENV to production
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      // Restore NODE_ENV
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('validates app ID format in production', async () => {
+      mockGetCurrentAppName.mockReturnValue('test-app');
+      
+      // Mock database returning invalid app ID
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: 'org-123',
+        selectedEventId: 'event-123',
+        supabase: {
+          from: vi.fn().mockReturnValue({
+            select: vi.fn().mockReturnValue({
+              eq: vi.fn().mockReturnValue({
+                eq: vi.fn().mockReturnValue({
+                  single: vi.fn().mockResolvedValue({
+                    data: { id: 'invalid-app-id', name: 'test-app', is_active: true },
+                    error: null
+                  })
+                })
+              })
+            })
+          })
+        } as any
+      });
+
+      // Set NODE_ENV to production
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      // Restore NODE_ENV
+      process.env.NODE_ENV = originalEnv;
+    });
+  });
+
+  describe('Scope Resolution', () => {
+    it('uses provided scope when available', async () => {
+      const customScope = {
+        organisationId: 'custom-org',
+        eventId: 'custom-event',
+        appId: 'custom-app'
+      };
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          scope={customScope}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        customScope,
+        'read:page.dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('resolves scope from organisation and event context', async () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123',
+          appId: 'app-123'
+        }),
+        'read:page.dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('resolves scope from organisation only', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: 'org-123',
+        selectedEventId: null,
+        supabase: {
+          from: vi.fn().mockReturnValue({
+            select: vi.fn().mockReturnValue({
+              eq: vi.fn().mockReturnValue({
+                eq: vi.fn().mockReturnValue({
+                  single: vi.fn().mockResolvedValue({
+                    data: { id: 'app-123', name: 'test-app', is_active: true },
+                    error: null
+                  })
+                })
+              })
+            })
+          })
+        } as any
+      });
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: undefined,
+          appId: 'app-123'
+        }),
+        'read:page.dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('resolves scope from event context when organisation not available', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: 'event-123',
+        supabase: {
+          from: vi.fn().mockReturnValue({
+            select: vi.fn().mockReturnValue({
+              eq: vi.fn().mockReturnValue({
+                eq: vi.fn().mockReturnValue({
+                  single: vi.fn().mockResolvedValue({
+                    data: { id: 'app-123', name: 'test-app', is_active: true },
+                    error: null
+                  })
+                })
+              })
+            })
+          })
+        } as any
+      });
+
+      mockCreateScopeFromEvent.mockResolvedValue({
+        organisationId: 'resolved-org',
+        eventId: 'event-123',
+        appId: 'resolved-app'
+      });
+
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(mockCreateScopeFromEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        'event-123'
+      );
+      expect(mockUseCan).toHaveBeenCalledWith(
+        'user-123',
+        expect.objectContaining({
+          organisationId: 'resolved-org',
+          eventId: 'event-123',
+          appId: 'app-123'
+        }),
+        'read:page.dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('handles scope resolution errors', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: 'event-123',
+        supabase: {} as any
+      });
+
+      const error = new Error('Could not resolve organisation from event');
+      mockCreateScopeFromEvent.mockRejectedValue(error);
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+    });
+
+    it('handles missing context gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: null,
+        selectedEventId: null,
+        supabase: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Security Features', () => {
+    it('prevents bypassing in strict mode', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          strictMode={true}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('STRICT MODE VIOLATION'),
+        expect.objectContaining({
+          pageName: mockPageName,
+          operation: mockOperation,
+          userId: 'user-123'
+        })
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('logs page access attempts for audit', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          auditLog={true}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Page access attempt'),
+        expect.objectContaining({
+          pageName: mockPageName,
+          operation: mockOperation,
+          userId: 'user-123',
+          allowed: false
+        })
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('calls onDenied callback when access is denied', async () => {
+      const onDeniedSpy = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          onDenied={onDeniedSpy}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      expect(onDeniedSpy).toHaveBeenCalledWith(mockPageName, mockOperation);
+    });
+
+    it('does not call onDenied when access is granted', async () => {
+      const onDeniedSpy = vi.fn();
+      
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          onDenied={onDeniedSpy}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('test-component')).toBeInTheDocument();
+      });
+
+      expect(onDeniedSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Configuration Options', () => {
+    it('respects strictMode setting', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          strictMode={false}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('STRICT MODE VIOLATION')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('respects auditLog setting', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          auditLog={false}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      expect(consoleSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('Page access attempt')
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing user gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: null,
+        selectedOrganisationId: 'org-123',
+        selectedEventId: 'event-123',
+        supabase: {
+          from: vi.fn().mockReturnValue({
+            select: vi.fn().mockReturnValue({
+              eq: vi.fn().mockReturnValue({
+                eq: vi.fn().mockReturnValue({
+                  single: vi.fn().mockResolvedValue({
+                    data: { id: 'app-123', name: 'test-app', is_active: true },
+                    error: null
+                  })
+                })
+              })
+            })
+          })
+        } as any
+      });
+
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null
+      });
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      expect(mockUseCan).toHaveBeenCalledWith(
+        '',
+        expect.objectContaining({
+          organisationId: 'org-123',
+          eventId: 'event-123',
+          appId: 'app-123'
+        }),
+        'read:page.dashboard',
+        'dashboard',
+        true
+      );
+    });
+
+    it('handles database errors during app resolution', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: mockUser,
+        selectedOrganisationId: 'org-123',
+        selectedEventId: 'event-123',
+        supabase: {
+          from: vi.fn().mockReturnValue({
+            select: vi.fn().mockReturnValue({
+              eq: vi.fn().mockReturnValue({
+                eq: vi.fn().mockReturnValue({
+                  single: vi.fn().mockResolvedValue({
+                    data: null,
+                    error: { message: 'Database error' }
+                  })
+                })
+              })
+            })
+          })
+        } as any
+      });
+
+      // Set NODE_ENV to production
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+
+      render(
+        <PagePermissionGuard
+          pageName={mockPageName}
+          operation={mockOperation}
+          fallback={<TestFallback />}
+        >
+          <TestComponent>Protected Page</TestComponent>
+        </PagePermissionGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      });
+
+      // Restore NODE_ENV
+      process.env.NODE_ENV = originalEnv;
+    });
+  });
+});