@jmruthers/pace-core 0.5.54 → 0.5.56

package/src/rbac/components/__tests__/PagePermissionGuard.race-condition.test.tsx

@@ -1,478 +1,207 @@
 /**
- * @file PagePermissionGuard Race Condition Tests
+ * @file PagePermissionGuard Simplified Tests
  * @package @jmruthers/pace-core
- * @module RBAC/Components/PagePermissionGuard/RaceConditionTests
+ * @module RBAC/Components/PagePermissionGuard
  * @since 2.0.0
  *
- * Comprehensive tests to verify that PagePermissionGuard properly handles
- * race conditions and UI state transitions without infinite loops.
+ * Simplified tests for PagePermissionGuard component.
  */
 
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import { vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { PagePermissionGuard } from '../PagePermissionGuard';
-import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
-import { useCan } from '../../hooks/usePermissions';
-
-// Mock the hooks
-vi.mock('../../../providers/UnifiedAuthProvider');
-vi.mock('../../hooks/usePermissions');
-
-const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
-const mockUseCan = vi.mocked(useCan);
-
-// Mock console.log to track render cycles
-const originalConsoleLog = console.log;
-let renderCount = 0;
-let consoleLogs: string[] = [];
-
-beforeEach(() => {
-  renderCount = 0;
-  consoleLogs = [];
-  console.log = (...args: any[]) => {
-    consoleLogs.push(args.join(' '));
-    originalConsoleLog(...args);
-  };
-});
-
-afterEach(() => {
-  console.log = originalConsoleLog;
-});
-
-describe('PagePermissionGuard Race Condition Tests', () => {
-  const mockUser = { id: 'user-123', email: 'test@example.com' };
-  const mockScope = {
-    organisationId: 'org-123',
-    eventId: 'event-123',
-    appId: 'app-123'
-  };
+import { useCan } from '../../hooks';
+
+// Mock the hooks with simple implementations
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => ({
+    user: { id: 'user-123', email: 'test@example.com' },
+    isAuthenticated: true,
+    isLoading: false,
+    selectedOrganisationId: 'org-123',
+    selectedEventId: undefined,
+    supabase: {
+      from: vi.fn(() => ({
+        select: vi.fn(() => ({
+          eq: vi.fn(() => ({
+            single: vi.fn(() => Promise.resolve({ data: { id: 'app-123', name: 'test-app', is_active: true }, error: null }))
+          }))
+        }))
+      }))
+    }
+  })
+}));
+
+vi.mock('../../hooks', () => ({
+  useCan: vi.fn()
+}));
+
+// Mock the app name resolver
+vi.mock('../../../utils/appNameResolver', () => ({
+  getCurrentAppName: () => 'test-app'
+}));
+
+describe('PagePermissionGuard Simplified Tests', () => {
+  const mockUseCan = vi.mocked(useCan);
 
   beforeEach(() => {
-    // Reset mocks
     vi.clearAllMocks();
     
-    // Default mock implementations
-    mockUseUnifiedAuth.mockReturnValue({
-      user: mockUser,
-      selectedOrganisationId: 'org-123',
-      selectedEventId: 'event-123',
-      supabase: {} as any,
-      isAuthenticated: true,
+    // Set up default mock behavior
+    mockUseCan.mockReturnValue({
+      can: false,
       isLoading: false,
       error: null,
-      signOut: vi.fn(),
-      refreshSession: vi.fn(),
-      hasPermission: vi.fn(),
-      hasRole: vi.fn(),
-      hasAccessLevel: vi.fn(),
-      validatePermission: vi.fn(),
-      canAccess: vi.fn(),
-      setSelectedEventId: vi.fn(),
-      appName: 'test-app',
-      hasErrors: false
     });
   });
 
-  describe('Race Condition: Initial Loading to Permission Granted', () => {
-    it('should handle the exact production scenario: loading → permission granted', async () => {
-      // Simulate the exact scenario from the user's logs
-      let canValue = false;
-      let isLoadingValue = true;
-      let callCount = 0;
-
-      mockUseCan.mockImplementation(() => {
-        callCount++;
-        console.log(`[TEST] useCan call #${callCount}: can=${canValue}, isLoading=${isLoadingValue}`);
-        
-        // Simulate the race condition: first call returns false, second call returns true
-        if (callCount === 1) {
-          canValue = false;
-          isLoadingValue = false;
-        } else if (callCount === 2) {
-          canValue = true;
-          isLoadingValue = false;
-        }
-        
-        return {
-          can: canValue,
-          isLoading: isLoadingValue,
-          error: null
-        };
+  describe('Basic Rendering', () => {
+    it('renders children when permission is granted', () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
       });
-
-      const TestComponent = () => {
-        renderCount++;
-        console.log(`[TEST] Component render #${renderCount}`);
-        
-        return (
-          <PagePermissionGuard pageName="meals" operation="read">
-            <div data-testid="protected-content">Protected Content</div>
-          </PagePermissionGuard>
-        );
-      };
-
-      const { rerender } = render(<TestComponent />);
-
-      // Initial render should show loading (or content if scope resolves immediately)
-      // Note: In test environment, scope resolution may be synchronous
-      const hasLoading = screen.queryByText('Checking permissions...');
-      const hasContent = screen.queryByTestId('protected-content');
       
-      // Either loading or content should be visible, but not both
-      expect(hasLoading || hasContent).toBeTruthy();
+      render(
+        <PagePermissionGuard 
+          pageName="users"
+          operation="read"
+          scope={{ organisationId: 'org-123' }}
+        >
+          <div data-testid="protected-content">Protected Content</div>
+        </PagePermissionGuard>
+      );
 
-      // Wait for content to appear (mock may not be applied in test environment)
-      await waitFor(() => {
-        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-      });
-
-      // Simulate the second permission check (this is where the race condition occurred)
-      act(() => {
-        // Trigger a re-render to simulate the second useCan call
-        rerender(<TestComponent />);
-      });
-
-      // Wait for content to be stable (mock may not be applied in test environment)
-      await waitFor(() => {
-        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-      });
-
-      // Now the content should be visible
-      await waitFor(() => {
-        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-        expect(screen.queryByText('Checking permissions...')).not.toBeInTheDocument();
-        expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
-      });
-
-      // Verify we didn't have infinite loops
-      expect(callCount).toBeLessThanOrEqual(3); // Should be exactly 2 calls, but allow some tolerance
-      expect(renderCount).toBeLessThanOrEqual(5); // Should be reasonable number of renders
-      
-      // Verify that the component rendered correctly without infinite loops
-      // The main goal is to ensure no infinite loops and proper final state
+      expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      expect(screen.getByText('Protected Content')).toBeInTheDocument();
     });
 
-    it('should handle rapid state changes without infinite loops', async () => {
-      let canValue = false;
-      let isLoadingValue = true;
-      let callCount = 0;
-
-      mockUseCan.mockImplementation(() => {
-        callCount++;
-        
-        // Simulate rapid state changes
-        if (callCount <= 2) {
-          canValue = false;
-          isLoadingValue = true;
-        } else if (callCount <= 4) {
-          canValue = false;
-          isLoadingValue = false;
-        } else {
-          canValue = true;
-          isLoadingValue = false;
-        }
-        
-        return {
-          can: canValue,
-          isLoading: isLoadingValue,
-          error: null
-        };
-      });
-
-      const TestComponent = () => {
-        renderCount++;
-        return (
-          <PagePermissionGuard pageName="meals" operation="read">
-            <div data-testid="protected-content">Protected Content</div>
-          </PagePermissionGuard>
-        );
-      };
-
-      const { rerender } = render(<TestComponent />);
-
-      // Simulate multiple rapid re-renders
-      for (let i = 0; i < 5; i++) {
-        act(() => {
-          rerender(<TestComponent />);
-        });
-        await new Promise(resolve => setTimeout(resolve, 10)); // Small delay
-      }
-
-      // Wait for final state
-      await waitFor(() => {
-        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-      });
-
-      // Verify no infinite loops
-      expect(callCount).toBeLessThanOrEqual(6); // Should be reasonable
-      expect(renderCount).toBeLessThanOrEqual(10); // Should be reasonable
+    it('renders access denied when permission is not granted', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+      });
+
+      render(
+        <PagePermissionGuard 
+          pageName="users"
+          operation="delete"
+          scope={{ organisationId: 'org-123' }}
+        >
+          <div data-testid="protected-content">Protected Content</div>
+        </PagePermissionGuard>
+      );
+
+      expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
     });
 
-    it('should handle scope resolution race conditions', async () => {
-      let scopeResolved = false;
-      let callCount = 0;
-
-      // Mock scope resolution that takes time
-      mockUseUnifiedAuth.mockImplementation(() => {
-        if (!scopeResolved) {
-          // Simulate scope not yet resolved
-          return {
-            user: mockUser,
-            selectedOrganisationId: null,
-            selectedEventId: null,
-            supabase: {} as any,
-            isAuthenticated: true,
-            isLoading: true,
-            error: null,
-            signOut: vi.fn(),
-            refreshSession: vi.fn(),
-            hasPermission: vi.fn(),
-            hasRole: vi.fn(),
-            hasAccessLevel: vi.fn(),
-            validatePermission: vi.fn(),
-            canAccess: vi.fn(),
-            setSelectedEventId: vi.fn(),
-            appName: 'test-app',
-            hasErrors: false
-          };
-        } else {
-          // Scope is resolved
-          return {
-            user: mockUser,
-            selectedOrganisationId: 'org-123',
-            selectedEventId: 'event-123',
-            supabase: {} as any,
-            isAuthenticated: true,
-            isLoading: false,
-            error: null,
-            signOut: vi.fn(),
-            refreshSession: vi.fn(),
-            hasPermission: vi.fn(),
-            hasRole: vi.fn(),
-            hasAccessLevel: vi.fn(),
-            validatePermission: vi.fn(),
-            canAccess: vi.fn(),
-            setSelectedEventId: vi.fn(),
-            appName: 'test-app',
-            hasErrors: false
-          };
-        }
+    it('renders loading state when checking permissions', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: true,
+        error: null,
       });
 
-      mockUseCan.mockImplementation(() => {
-        callCount++;
-        return {
-          can: scopeResolved,
-          isLoading: !scopeResolved,
-          error: null
-        };
-      });
-
-      const TestComponent = () => {
-        renderCount++;
-        return (
-          <PagePermissionGuard pageName="meals" operation="read">
-            <div data-testid="protected-content">Protected Content</div>
-          </PagePermissionGuard>
-        );
-      };
+      render(
+        <PagePermissionGuard 
+          pageName="users"
+          operation="read"
+          scope={{ organisationId: 'org-123' }}
+        >
+          <div data-testid="protected-content">Protected Content</div>
+        </PagePermissionGuard>
+      );
 
-      const { rerender } = render(<TestComponent />);
-
-      // Initial state: scope not resolved
+      // Should show loading state
       expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
-
-      // Simulate scope resolution
-      act(() => {
-        scopeResolved = true;
-        rerender(<TestComponent />);
-      });
-
-      // Wait for content to appear
-      await waitFor(() => {
-        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-      });
-
-      // Verify no infinite loops
-      expect(callCount).toBeLessThanOrEqual(3);
-      expect(renderCount).toBeLessThanOrEqual(5);
+      expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
     });
   });
 
-  describe('UI State Transition Verification', () => {
-    it('should properly transition through all UI states', async () => {
-      const stateSequence = [
-        { can: false, isLoading: true, expectedUI: 'loading' },
-        { can: false, isLoading: false, expectedUI: 'denied' },
-        { can: true, isLoading: false, expectedUI: 'content' }
-      ];
-
-      let currentStateIndex = 0;
-
-      mockUseCan.mockImplementation(() => {
-        const currentState = stateSequence[currentStateIndex] || stateSequence[stateSequence.length - 1];
-        return {
-          can: currentState.can,
-          isLoading: currentState.isLoading,
-          error: null
-        };
-      });
-
-      const TestComponent = () => {
-        renderCount++;
-        return (
-          <PagePermissionGuard pageName="meals" operation="read">
-            <div data-testid="protected-content">Protected Content</div>
-          </PagePermissionGuard>
-        );
-      };
-
-      const { rerender } = render(<TestComponent />);
-
-      // Test each state transition
-      for (let i = 0; i < stateSequence.length; i++) {
-        act(() => {
-          currentStateIndex = i;
-          rerender(<TestComponent />);
-        });
-
-        const expectedState = stateSequence[i];
-        
-        if (expectedState.expectedUI === 'loading') {
-          // In test environment, scope resolution may be synchronous
-          const hasLoading = screen.queryByText('Checking permissions...');
-          const hasContent = screen.queryByTestId('protected-content');
-          expect(hasLoading || hasContent).toBeTruthy();
-        } else if (expectedState.expectedUI === 'denied') {
-          // In test environment, mock may not be applied, so check for content instead
-          expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-        } else if (expectedState.expectedUI === 'content') {
-          expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-        }
-      }
-
-      // Verify final state is correct
-      expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-      expect(screen.queryByText('Loading organisation context...')).not.toBeInTheDocument();
-      expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
+  describe('Error Handling', () => {
+    it('handles permission check errors gracefully', () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: new Error('Permission check failed'),
+      });
+
+      render(
+        <PagePermissionGuard 
+          pageName="users"
+          operation="read"
+          scope={{ organisationId: 'org-123' }}
+        >
+          <div data-testid="protected-content">Protected Content</div>
+        </PagePermissionGuard>
+      );
+
+      expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
     });
   });
 
-  describe('Performance and Stability Tests', () => {
-    it('should not create infinite loops with changing supabase reference', async () => {
-      let supabaseRef = { id: 1 };
-      let callCount = 0;
-
-      mockUseUnifiedAuth.mockImplementation(() => {
-        // Simulate supabase reference changing on every render
-        supabaseRef = { id: Math.random() };
-        
-        return {
-          user: mockUser,
-          selectedOrganisationId: 'org-123',
-          selectedEventId: 'event-123',
-          supabase: supabaseRef as any,
-          isAuthenticated: true,
-          isLoading: false,
-          error: null,
-          signOut: vi.fn(),
-          refreshSession: vi.fn(),
-          hasPermission: vi.fn(),
-          hasRole: vi.fn(),
-          hasAccessLevel: vi.fn(),
-          validatePermission: vi.fn(),
-          canAccess: vi.fn(),
-          setSelectedEventId: vi.fn(),
-          appName: 'test-app',
-          hasErrors: false
-        };
-      });
-
-      mockUseCan.mockImplementation(() => {
-        callCount++;
-        return {
-          can: true,
-          isLoading: false,
-          error: null
-        };
+  describe('Props Validation', () => {
+    it('handles different permission formats', () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
       });
-
-      const TestComponent = () => {
-        renderCount++;
-        return (
-          <PagePermissionGuard pageName="meals" operation="read">
-            <div data-testid="protected-content">Protected Content</div>
+      
+      const testCases = [
+        { pageName: 'users', operation: 'read' as const },
+        { pageName: 'events', operation: 'create' as const },
+        { pageName: 'organisations', operation: 'update' as const }
+      ];
+      
+      testCases.forEach(({ pageName, operation }) => {
+        const { unmount } = render(
+          <PagePermissionGuard 
+            pageName={pageName}
+            operation={operation}
+            scope={{ organisationId: 'org-123' }}
+          >
+            <div data-testid={`content-${operation}:${pageName}`}>Content for {operation}:{pageName}</div>
           </PagePermissionGuard>
         );
-      };
-
-      const { rerender } = render(<TestComponent />);
-
-      // Simulate many re-renders with changing supabase reference
-      for (let i = 0; i < 10; i++) {
-        act(() => {
-          rerender(<TestComponent />);
-        });
-      }
 
-      // Wait for final state
-      await waitFor(() => {
-        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+        expect(screen.getByTestId(`content-${operation}:${pageName}`)).toBeInTheDocument();
+        unmount();
       });
-
-      // Verify no infinite loops despite changing supabase reference
-      expect(callCount).toBeLessThanOrEqual(5); // Should be very few calls
-      expect(renderCount).toBeLessThanOrEqual(15); // Should be reasonable
     });
 
-    it('should handle multiple rapid permission changes', async () => {
-      let canValue = true;
-      let callCount = 0;
-
-      mockUseCan.mockImplementation(() => {
-        callCount++;
-        // Toggle permission on each call
-        canValue = !canValue;
-        return {
-          can: canValue,
-          isLoading: false,
-          error: null
-        };
+    it('handles different scope configurations', () => {
+      mockUseCan.mockReturnValue({
+        can: true,
+        isLoading: false,
+        error: null,
       });
-
-      const TestComponent = () => {
-        renderCount++;
-        return (
-          <PagePermissionGuard pageName="meals" operation="read">
-            <div data-testid="protected-content">Protected Content</div>
+      
+      const scopes = [
+        { organisationId: 'org-123' },
+        { organisationId: 'org-123', eventId: 'event-456' },
+        { organisationId: 'org-123', eventId: 'event-456', appId: 'app-789' },
+      ];
+      
+      scopes.forEach((scope, index) => {
+        const { unmount } = render(
+          <PagePermissionGuard 
+            pageName="users"
+            operation="read"
+            scope={scope}
+          >
+            <div data-testid={`content-${index}`}>Content {index}</div>
           </PagePermissionGuard>
         );
-      };
-
-      const { rerender } = render(<TestComponent />);
 
-      // Simulate rapid permission changes
-      for (let i = 0; i < 8; i++) {
-        act(() => {
-          rerender(<TestComponent />);
-        });
-        await new Promise(resolve => setTimeout(resolve, 5));
-      }
-
-      // Should eventually stabilize
-      await waitFor(() => {
-        // Either content or denied should be visible, not loading
-        const hasContent = screen.queryByTestId('protected-content');
-        const hasDenied = screen.queryByText('Access Denied');
-        const hasLoading = screen.queryByText('Checking permissions...');
-        
-        expect(hasContent || hasDenied).toBeTruthy();
-        expect(hasLoading).not.toBeInTheDocument();
+        expect(screen.getByTestId(`content-${index}`)).toBeInTheDocument();
+        unmount();
       });
-
-      // Verify reasonable number of calls
-      expect(callCount).toBeLessThanOrEqual(10);
     });
   });
-});
+});

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

@@ -409,9 +409,8 @@ describe('PagePermissionGuard Component', () => {
     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';
+      // Mock import.meta.env.MODE for production using vi.stubEnv
+      vi.stubEnv('MODE', 'production');
 
       render(
         <PagePermissionGuard
@@ -427,8 +426,8 @@ describe('PagePermissionGuard Component', () => {
         expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
       });
 
-      // Restore NODE_ENV
-      process.env.NODE_ENV = originalEnv;
+      // Restore environment
+      vi.unstubAllEnvs();
     });
 
     it('validates app ID format in production', async () => {