@jmruthers/pace-core 0.5.181 → 0.5.182

package/src/components/PaceAppLayout/{__tests__/PaceAppLayout.integration.test.tsx → PaceAppLayout.integration.test.tsx}

@@ -17,30 +17,9 @@ vi.mock('react-router-dom', async () => {
   };
 });
 
-// Mock UnifiedAuthProvider
-const mockSignOut = vi.fn().mockResolvedValue({ error: null });
-const mockUpdatePassword = vi.fn().mockResolvedValue({ error: null });
-const mockUser = {
-  id: 'test-user-id',
-  email: 'test@example.com',
-  user_metadata: { 
-    display_name: 'Test User',
-    organisationId: 'test-org-123',
-    eventId: 'test-event-456',
-    appId: 'test-app-789'
-  }
-};
-
-vi.mock('../../../providers/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: () => ({
-    user: mockUser,
-    signOut: mockSignOut,
-    updatePassword: mockUpdatePassword
-  })
-}));
-
-// Mock OrganisationProvider
-const mockOrganisation = {
+// Mock OrganisationProvider - Hoist organisation object since it's used in hoisted functions
+// Create a factory function that returns the organisation object
+const mockOrganisationObj = vi.hoisted(() => () => ({
   id: 'test-org-id',
   name: 'Test Organisation',
   display_name: 'Test Organisation',
@@ -50,11 +29,14 @@ const mockOrganisation = {
   is_active: true,
   created_at: '2023-01-01T00:00:00Z',
   updated_at: '2023-01-01T00:00:00Z'
-};
+}));
 
-const mockOrganisationContext = {
-  selectedOrganisation: mockOrganisation,
-  organisations: [mockOrganisation],
+// Hoist the context object factory
+const mockOrganisationContext = vi.hoisted(() => {
+  const org = mockOrganisationObj();
+  const contextObj = {
+    selectedOrganisation: org,
+    organisations: [org],
   userMemberships: [{
     id: 'test-membership-id',
     user_id: 'test-user-id',
@@ -72,54 +54,230 @@ const mockOrganisationContext = {
   switchOrganisation: vi.fn().mockResolvedValue(undefined),
   getUserRole: vi.fn().mockReturnValue('member'),
   validateOrganisationAccess: vi.fn().mockReturnValue(true),
-  ensureOrganisationContext: vi.fn().mockReturnValue(mockOrganisation),
+  ensureOrganisationContext: vi.fn().mockReturnValue(org),
   refreshOrganisations: vi.fn().mockResolvedValue(undefined),
-  getPrimaryOrganisation: vi.fn().mockReturnValue(mockOrganisation),
+  getPrimaryOrganisation: vi.fn().mockReturnValue(org),
   isOrganisationSecure: vi.fn().mockReturnValue(true)
-};
+  };
+  return () => contextObj;
+});
 
-vi.mock('../../../hooks/useOrganisations', () => ({
-  useOrganisations: () => mockOrganisationContext
+// Mock UnifiedAuthProvider - Use hoisted mocks to ensure they're available when the module is imported
+const mockSignOut = vi.hoisted(() => {
+  const fn = vi.fn().mockResolvedValue({ error: null });
+  return () => fn;
+});
+const mockUpdatePassword = vi.hoisted(() => {
+  const fn = vi.fn().mockResolvedValue({ error: null });
+  return () => fn;
+});
+const mockUser = vi.hoisted(() => () => ({
+  id: 'test-user-id',
+  email: 'test@example.com',
+  user_metadata: { 
+    display_name: 'Test User',
+    organisationId: 'test-org-123',
+    eventId: 'test-event-456',
+    appId: 'test-app-789'
+  }
 }));
 
-// Mock useEvents hook (used by useEventTheme)
-vi.mock('../../../hooks/useEvents', () => ({
-  useEvents: vi.fn(() => ({
-    selectedEvent: { event_id: 'event-123' },
-    events: [],
+const mockUseUnifiedAuthFn = vi.hoisted(() => vi.fn(() => {
+  const user = mockUser();
+  const signOutFn = mockSignOut();
+  const updatePasswordFn = mockUpdatePassword();
+  return {
+    user,
+    signOut: signOutFn,
+    updatePassword: updatePasswordFn,
+    supabase: {},
+    selectedOrganisation: mockOrganisationObj(),
+    selectedEvent: null,
     isLoading: false,
     error: null,
-  })),
+    isAuthenticated: true,
+    selectedOrganisationId: 'test-org-id',
+    selectedEventId: null,
+    appName: 'test-app',
+    session: null,
+  };
+}));
+
+vi.mock('../../providers/services/UnifiedAuthProvider', () => {
+  return {
+    useUnifiedAuth: mockUseUnifiedAuthFn,
+    UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+
+// Mock useOrganisationService FIRST (used internally by useOrganisations)
+vi.mock('../../hooks/services/useOrganisationService', () => ({
+  useOrganisationService: () => ({
+    getSelectedOrganisation: () => mockOrganisationObj(),
+    getOrganisations: () => [mockOrganisationObj()],
+    getUserMemberships: () => mockOrganisationContext().userMemberships,
+    isLoading: () => false,
+    getError: () => null,
+    hasValidOrganisationContext: () => true,
+    setSelectedOrganisation: vi.fn(),
+    switchOrganisation: vi.fn().mockResolvedValue(undefined),
+    getUserRole: vi.fn().mockReturnValue('member'),
+    validateOrganisationAccess: vi.fn().mockReturnValue(true),
+    ensureOrganisationContext: vi.fn().mockReturnValue(mockOrganisationObj()),
+    refreshOrganisations: vi.fn().mockResolvedValue(undefined),
+    getPrimaryOrganisation: vi.fn().mockReturnValue(mockOrganisationObj()),
+    isOrganisationSecure: vi.fn().mockReturnValue(true),
+  })
+}));
+
+// Mock useOrganisations AFTER useOrganisationService
+// Use the same path pattern as PaceAppLayout.test.tsx
+vi.mock('../../hooks/useOrganisations', () => ({
+  useOrganisations: vi.fn(() => mockOrganisationContext())
 }));
 
+// Mock useEventService hook FIRST (it's imported by useEvents)
+// Must be hoisted to be available when useEvents tries to import it
+const mockUseEventService = vi.hoisted(() => vi.fn(() => ({
+  getEvent: vi.fn(),
+  getEvents: vi.fn(() => []),
+  createEvent: vi.fn(),
+  updateEvent: vi.fn(),
+  deleteEvent: vi.fn(),
+  getSelectedEvent: vi.fn(() => null),
+  setSelectedEvent: vi.fn(),
+  isLoading: vi.fn(() => false),
+  getError: vi.fn(() => null),
+  refreshEvents: vi.fn(),
+  clearEventSelection: vi.fn(),
+  subscribe: vi.fn(() => vi.fn()),
+})));
+
+// Mock useEventService hook - path is ../../hooks/services/useEventService from PaceAppLayout
+vi.mock('../../hooks/services/useEventService', () => ({
+  useEventService: mockUseEventService,
+}));
+
+// Mock useEvents hook (used by useEventTheme and EventSelector)
+// Use the hoisted mockUseEventService so useEvents can work properly
+// But also provide a direct mock for components that import useEvents directly
+const mockUseEvents = vi.hoisted(() => vi.fn(() => ({
+  selectedEvent: { event_id: 'event-123' },
+  events: [],
+  isLoading: false,
+  error: null,
+  setSelectedEvent: vi.fn(),
+  refreshEvents: vi.fn(),
+  clearEventSelection: vi.fn(),
+})));
+
+// Don't mock useEvents - let it use the mocked useEventService
+// The real useEvents will work because useEventService is mocked
+// vi.mock('../../../hooks/useEvents', () => ({
+//   useEvents: mockUseEvents,
+// }));
+
 // Mock useEventTheme to avoid EventServiceProvider requirement
-vi.mock('../../../hooks/useEventTheme', () => ({
+vi.mock('../../hooks/useEventTheme', () => ({
   useEventTheme: vi.fn(),
 }));
 
-// Mock the new RBAC system
-const mockIsSuperAdmin = vi.fn().mockResolvedValue(false);
+// Mock logger - define inside factory to avoid hoisting issues
+vi.mock('../../utils/core/logger', () => {
+  const mockLogger = {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    createScopedLogger: vi.fn(() => mockLogger),
+    configure: vi.fn(),
+  };
+  
+  return {
+    logger: mockLogger,
+    createLogger: () => mockLogger,
+    Logger: {
+      debug: vi.fn(),
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+      configure: vi.fn(),
+      createScopedLogger: vi.fn(() => mockLogger),
+    },
+    LogLevel: {
+      DEBUG: 0,
+      INFO: 1,
+      WARN: 2,
+      ERROR: 3,
+    },
+  };
+});
 
-vi.mock('../../../rbac/api', () => ({
-  isPermitted: vi.fn().mockImplementation((input) => {
-    return Promise.resolve(true);
-  }),
-  getPermissionMap: vi.fn().mockResolvedValue({}),
-  getAccessLevel: vi.fn().mockResolvedValue('viewer'),
-  isSuperAdmin: (...args: any[]) => mockIsSuperAdmin(...args),
-  setupRBAC: vi.fn()
-}));
+// Mock EventServiceProvider to avoid context requirement
+// Must also export EventServiceContext so useEventService can use it
+vi.mock('../../providers/services/EventServiceProvider', () => {
+  const React = require('react');
+  const mockContextValue = {
+    eventService: mockUseEventService(),
+  };
+  
+  return {
+    EventServiceProvider: ({ children }: { children: React.ReactNode }) => {
+      const MockContext = React.createContext(mockContextValue);
+      return React.createElement(MockContext.Provider, { value: mockContextValue }, children);
+    },
+    EventServiceContext: {
+      Provider: ({ children, value }: any) => React.createElement('div', { 'data-testid': 'event-service-provider' }, children),
+      Consumer: ({ children }: any) => children(mockContextValue),
+    },
+    useEventService: mockUseEventService,
+  };
+});
 
-// Mock RBAC hooks
-const mockHasPermissionRBAC = vi.fn().mockResolvedValue(true);
-const mockUseCan = vi.fn(() => ({
+// Define mocks using vi.hoisted() so they're available in hoisted vi.mock factories
+// Note: Cannot export hoisted variables directly, so we define them and access via vi.mocked() in tests
+const mockHasPermissionRBAC = vi.hoisted(() => vi.fn().mockResolvedValue(true));
+const mockUseCan = vi.hoisted(() => vi.fn(() => ({
   can: true,
   isLoading: false,
   error: null,
   refetch: vi.fn().mockResolvedValue(undefined),
+})));
+const mockIsSuperAdmin = vi.hoisted(() => vi.fn().mockResolvedValue(false));
+
+// Mock Supabase client for RBAC engine
+// Note: Must define mock inside factory to avoid hoisting issues
+vi.mock('@supabase/supabase-js', () => {
+  const createMockQueryBuilder = () => ({
+    select: vi.fn().mockReturnThis(),
+    eq: vi.fn().mockReturnThis(),
+    single: vi.fn().mockResolvedValue({ data: null, error: null }),
+  });
+
+  const mockSupabaseClient = {
+    from: vi.fn(() => createMockQueryBuilder()),
+    rpc: vi.fn().mockResolvedValue({ data: null, error: null }),
+  };
+
+  return {
+    createClient: vi.fn(() => mockSupabaseClient),
+  };
+});
+
+// Mock the new RBAC system
+// Reference hoisted mock for isSuperAdmin
+vi.mock('../../rbac/api', () => ({
+  isPermitted: vi.fn().mockResolvedValue(true),
+  isPermittedCached: vi.fn().mockResolvedValue(true),
+  getPermissionMap: vi.fn().mockResolvedValue({}),
+  getAccessLevel: vi.fn().mockResolvedValue('viewer'),
+  isSuperAdmin: mockIsSuperAdmin,
+  setupRBAC: vi.fn()
 }));
 
-vi.mock('../../../rbac/hooks', () => ({
+// Mock RBAC hooks
+// Reference hoisted mocks - they're available when factory runs
+vi.mock('../../rbac/hooks', () => ({
   useRBAC: vi.fn(() => ({
     hasPermission: mockHasPermissionRBAC,
     isLoading: false,
@@ -132,7 +290,7 @@ vi.mock('../../../rbac/hooks', () => ({
     eventRoles: [],
     permissionMap: {},
   })),
-  useCan: (...args: any[]) => mockUseCan(...args),
+  useCan: mockUseCan,
   useResolvedScope: vi.fn(() => ({
     resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
     isLoading: false,
@@ -140,8 +298,27 @@ vi.mock('../../../rbac/hooks', () => ({
   })),
 }));
 
-// Mock child components with more realistic behavior
-vi.mock('../../Header', () => ({
+// Mock EventSelector to avoid useEventService requirement
+// Mock both the component file and the index file
+vi.mock('../../EventSelector/EventSelector', () => ({
+  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'event-selector'} className={className}>
+      {placeholder || 'Select event'}
+    </div>
+  ))
+}));
+
+vi.mock('../../EventSelector', () => ({
+  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'event-selector'} className={className}>
+      {placeholder || 'Select event'}
+    </div>
+  ))
+}));
+
+// Mock Header component - PaceAppLayout imports from '../Header'
+// From PaceAppLayout.integration.test.tsx (same dir as PaceAppLayout.tsx), path is '../Header'
+vi.mock('../Header', () => ({
   Header: vi.fn(({ 
     user, 
     onSignOut, 
@@ -161,8 +338,11 @@ vi.mock('../../Header', () => ({
       <div data-testid="app-name">{logoUrl ? 'Test App' : 'Complex App'}</div>
       <div data-testid="user-info">{user?.user_metadata?.display_name || user?.email}</div>
       <div data-testid="nav-items-count">{navItems?.length || 0}</div>
+      {actions && actions}
       <div data-testid="has-actions">{actions ? 'true' : 'false'}</div>
+      {userMenu && userMenu}
       <div data-testid="has-custom-user-menu">{userMenu ? 'true' : 'false'}</div>
+      {logo && logo}
       <div data-testid="has-custom-logo">{logo ? 'true' : 'false'}</div>
       <div data-testid="logo-url">{logoUrl || 'default'}</div>
       <div data-testid="show-user-menu">{showUserMenu !== false ? 'true' : 'false'}</div>
@@ -210,9 +390,6 @@ vi.mock('../../Header', () => ({
           </>
         )}
       </nav>
-      {logo && logo}
-      {userMenu && userMenu}
-      {actions && actions}
       <button 
         data-testid="sign-out-button" 
         onClick={() => onSignOut()}
@@ -231,7 +408,7 @@ vi.mock('../../Header', () => ({
   ))
 }));
 
-vi.mock('../../Footer', () => ({
+vi.mock('../Footer', () => ({
   Footer: vi.fn(() => <footer data-testid="mock-footer" role="contentinfo">Mock Footer</footer>)
 }));
 
@@ -257,10 +434,28 @@ describe('PaceAppLayout Integration', () => {
 
   beforeEach(async () => {
     vi.clearAllMocks();
-    mockSignOut.mockResolvedValue({ error: null });
-    mockUpdatePassword.mockResolvedValue({ error: null });
+    mockSignOut().mockResolvedValue({ error: null });
+    mockUpdatePassword().mockResolvedValue({ error: null });
+    
+    // Reset the mock return value
+    mockUseUnifiedAuthFn.mockReturnValue({
+      user: mockUser(),
+      signOut: mockSignOut(),
+      updatePassword: mockUpdatePassword(),
+      supabase: {},
+      selectedOrganisation: mockOrganisationObj(),
+      selectedEvent: null,
+      isLoading: false,
+      error: null,
+      isAuthenticated: true,
+      selectedOrganisationId: 'test-org-id',
+      selectedEventId: null,
+      appName: 'test-app',
+      session: null,
+    });
     
     // Reset RBAC hook mocks
+    // Access hoisted mocks directly (they're available in this scope)
     mockHasPermissionRBAC.mockClear();
     mockHasPermissionRBAC.mockResolvedValue(true);
     mockUseCan.mockReturnValue({
@@ -271,7 +466,7 @@ describe('PaceAppLayout Integration', () => {
     });
     
     // Get the mocked functions
-    const { isPermitted } = await import('../../../rbac/api');
+    const { isPermitted } = await import('../../rbac/api');
     mockIsPermitted = vi.mocked(isPermitted);
     
     // Reset super admin mock (use module-level mockIsSuperAdmin)
@@ -283,8 +478,8 @@ describe('PaceAppLayout Integration', () => {
       return Promise.resolve(true);
     });
     
-    mockSignOut.mockClear();
-    mockUpdatePassword.mockClear();
+    mockSignOut().mockClear();
+    mockUpdatePassword().mockClear();
     mockNavigate.mockClear();
     mockIsPermitted.mockClear();
     
@@ -459,7 +654,7 @@ describe('PaceAppLayout Integration', () => {
       fireEvent.click(screen.getByTestId('sign-out-button'));
       
       await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalledTimes(1);
+        expect(mockSignOut()).toHaveBeenCalledTimes(1);
       }, { timeout: 2000 });
     });
 
@@ -473,13 +668,13 @@ describe('PaceAppLayout Integration', () => {
       fireEvent.click(screen.getByTestId('change-password-button'));
       
       await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
+        expect(mockUpdatePassword()).toHaveBeenCalledWith('newpassword123');
       }, { timeout: 2000 });
     });
 
     it('handles authentication errors gracefully', async () => {
-      mockSignOut.mockResolvedValue({ error: { message: 'Sign out failed' } });
-      mockUpdatePassword.mockResolvedValue({ error: { message: 'Password update failed' } });
+      mockSignOut().mockResolvedValue({ error: { message: 'Sign out failed' } });
+      mockUpdatePassword().mockResolvedValue({ error: { message: 'Password update failed' } });
       
       render(
         <TestWrapper>
@@ -490,13 +685,13 @@ describe('PaceAppLayout Integration', () => {
       // Test sign out error
       fireEvent.click(screen.getByTestId('sign-out-button'));
       await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalled();
+        expect(mockSignOut()).toHaveBeenCalled();
       }, { timeout: 2000 });
       
       // Test password change error
       fireEvent.click(screen.getByTestId('change-password-button'));
       await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
+        expect(mockUpdatePassword()).toHaveBeenCalledWith('newpassword123');
       }, { timeout: 2000 });
     });
   });
@@ -540,7 +735,7 @@ describe('PaceAppLayout Integration', () => {
       };
       
       // Get the mocked isPermitted and update it to deny 'private' page access
-      const rbacApi = await import('../../../rbac/api');
+      const rbacApi = await import('../../rbac/api');
       
       render(
         <TestWrapper>
@@ -548,7 +743,7 @@ describe('PaceAppLayout Integration', () => {
             appName="Test App" 
             navItems={stablePermissionNavItems}
             enforcePermissions={false} // Disable enforcement to test filtering only
-            filterNavigationByPermissions={false} // Disable filtering for now - navigation filtering logic is complex
+            // Permission filtering is always enabled
             routePermissions={routePermissions}
           />
         </TestWrapper>
@@ -699,7 +894,7 @@ describe('PaceAppLayout Integration', () => {
       // 2. User changes password
       fireEvent.click(screen.getByTestId('change-password-button'));
       await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
+        expect(mockUpdatePassword()).toHaveBeenCalledWith('newpassword123');
       }, { timeout: 2000 });
       
       // 3. User navigates back to home
@@ -709,7 +904,7 @@ describe('PaceAppLayout Integration', () => {
       // 4. User signs out
       fireEvent.click(screen.getByTestId('sign-out-button'));
       await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalledTimes(1);
+        expect(mockSignOut()).toHaveBeenCalledTimes(1);
       }, { timeout: 2000 });
     });
 
@@ -781,7 +976,6 @@ describe('PaceAppLayout Integration', () => {
             appName="Test App" 
             navItems={stableComplexNavItems}
             enforcePermissions={true}
-            filterNavigationByPermissions={true}
             routePermissions={routePermissions}
           />
         </TestWrapper>
@@ -863,7 +1057,6 @@ describe('PaceAppLayout Integration', () => {
             defaultPermission="update"
             routePermissions={routePermissions}
             pageIdMapping={pageIdMapping}
-            filterNavigationByPermissions={false}
           />
         </TestWrapper>
       );