@jmruthers/pace-core 0.5.180 → 0.5.182

package/src/components/PaceAppLayout/__tests__/PaceAppLayout.unit.test.tsx

@@ -1,1078 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest';
-import '@testing-library/jest-dom';
-import { BrowserRouter } from 'react-router-dom';
-
-// Mock React Router hooks
-const mockNavigate = vi.fn();
-const mockLocation = { pathname: '/test-path' };
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual('react-router-dom');
-  return {
-    ...actual,
-    useNavigate: () => mockNavigate,
-    useLocation: () => mockLocation,
-    Outlet: () => <div data-testid="mock-outlet">Mock Outlet Content</div>
-  };
-});
-
-// 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 = {
-  id: 'test-org-id',
-  name: 'Test Organisation',
-  display_name: 'Test Organisation',
-  description: 'Test organisation for testing',
-  subscription_tier: 'basic',
-  settings: {},
-  is_active: true,
-  created_at: '2023-01-01T00:00:00Z',
-  updated_at: '2023-01-01T00:00:00Z'
-};
-
-const mockOrganisationContext = {
-  selectedOrganisation: mockOrganisation,
-  organisations: [mockOrganisation],
-  userMemberships: [{
-    id: 'test-membership-id',
-    user_id: 'test-user-id',
-    organisation_id: 'test-org-id',
-    role: 'org_admin',
-    granted_at: '2023-01-01T00:00:00Z',
-    status: 'active' as const,
-    created_at: '2023-01-01T00:00:00Z',
-    updated_at: '2023-01-01T00:00:00Z'
-  }],
-  isLoading: false,
-  error: 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(mockOrganisation),
-  refreshOrganisations: vi.fn().mockResolvedValue(undefined),
-  getPrimaryOrganisation: vi.fn().mockReturnValue(mockOrganisation),
-  isOrganisationSecure: vi.fn().mockReturnValue(true)
-};
-
-vi.mock('../../../hooks/useOrganisations', () => ({
-  useOrganisations: () => mockOrganisationContext
-}));
-
-// Mock useEvents hook (used by useEventTheme)
-vi.mock('../../../hooks/useEvents', () => ({
-  useEvents: vi.fn(() => ({
-    selectedEvent: { event_id: 'event-123' },
-    events: [],
-    isLoading: false,
-    error: null,
-  })),
-}));
-
-// Mock useEventTheme to avoid EventServiceProvider requirement
-vi.mock('../../../hooks/useEventTheme', () => ({
-  useEventTheme: vi.fn(),
-}));
-
-// Mock the new RBAC system
-const mockIsPermitted = vi.fn().mockImplementation((input) => {
-  return Promise.resolve(true);
-});
-
-const mockIsSuperAdmin = vi.fn().mockResolvedValue(false);
-
-vi.mock('../../../rbac/api', () => ({
-  isPermitted: mockIsPermitted,
-  getPermissionMap: vi.fn().mockResolvedValue({}),
-  getAccessLevel: vi.fn().mockResolvedValue('viewer'),
-  isSuperAdmin: (...args: any[]) => mockIsSuperAdmin(...args),
-  setupRBAC: vi.fn()
-}));
-
-// Mock RBAC hooks
-const mockHasPermissionRBAC = vi.fn().mockResolvedValue(true);
-const mockUseRBAC = vi.fn(() => ({
-  hasPermission: mockHasPermissionRBAC,
-  isLoading: false,
-  error: null,
-  hasGlobalPermission: vi.fn().mockResolvedValue(true),
-  hasOrganisationPermission: vi.fn().mockResolvedValue(true),
-  hasEventPermission: vi.fn().mockResolvedValue(true),
-  globalRole: null,
-  organisationRoles: [],
-  eventRoles: [],
-  permissionMap: {},
-}));
-
-const mockUseCan = vi.fn(() => ({
-  can: true,
-  isLoading: false,
-  error: null,
-  refetch: vi.fn().mockResolvedValue(undefined),
-}));
-
-vi.mock('../../../rbac/hooks', () => ({
-  useRBAC: () => mockUseRBAC(),
-  useCan: (...args: any[]) => mockUseCan(...args),
-  useResolvedScope: vi.fn(() => ({
-    resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
-    isLoading: false,
-    error: null,
-  })),
-}));
-
-// Mock Footer (static, doesn't depend on props)
-vi.mock('../../Footer', () => ({
-  Footer: vi.fn(() => <footer data-testid="mock-footer" role="contentinfo">Mock Footer</footer>)
-}));
-
-// Mock window.location
-Object.defineProperty(window, 'location', {
-  value: {
-    pathname: '/test-path'
-  },
-  writable: true
-});
-
-// Wrapper component to provide Router context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <BrowserRouter>
-    {children}
-  </BrowserRouter>
-);
-
-describe('PaceAppLayout Component', () => {
-  let PaceAppLayout: any;
-
-  beforeEach(() => {
-    // Reset mocks before each test
-    mockUseCan.mockClear();
-    mockIsSuperAdmin.mockClear();
-    mockIsSuperAdmin.mockResolvedValue(false);
-    // Default to allowing access unless test overrides
-    mockUseCan.mockReturnValue({
-      can: true,
-      isLoading: false,
-      error: null,
-      refetch: vi.fn().mockResolvedValue(undefined),
-    });
-  });
-
-  beforeAll(async () => {
-    // Set up mocks before importing the component
-    vi.doMock('../../Header', () => ({
-      Header: vi.fn(({ 
-        logoAlt, 
-        user, 
-        onSignOut, 
-        onChangePassword, 
-        onNavigate, 
-        currentPath, 
-        showEventSelector,
-        showUserMenu,
-        className,
-        navItems,
-        actions,
-        userMenu,
-        logo,
-        logoUrl
-      }) => (
-        <header data-testid="mock-header" role="banner" className={className}>
-          <div data-testid="app-name" aria-label="Application name">{logoAlt}</div>
-          <div data-testid="user-info">{user?.user_metadata?.display_name || user?.email}</div>
-          <div data-testid="nav-items-count">{navItems?.length || 0}</div>
-          <div data-testid="has-actions">{actions ? 'true' : 'false'}</div>
-          <div data-testid="has-custom-user-menu">{userMenu ? 'true' : 'false'}</div>
-          <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>
-          {logo && <div data-testid="custom-logo">{logo}</div>}
-          {userMenu && <div data-testid="custom-user-menu">{userMenu}</div>}
-          {actions && <div data-testid="header-actions">{actions}</div>}
-          <button 
-            data-testid="sign-out-button" 
-            onClick={() => onSignOut()}
-          >
-            Sign Out
-          </button>
-          <button 
-            data-testid="change-password-button" 
-            onClick={() => onChangePassword('newpassword123')}
-          >
-            Change Password
-          </button>
-          <button 
-            data-testid="navigate-button" 
-            onClick={() => onNavigate({ id: 'home', label: 'Home', href: '/' })}
-          >
-            Navigate
-          </button>
-          <div data-testid="current-path">{currentPath}</div>
-          <div data-testid="show-event-selector">{showEventSelector !== false ? 'true' : 'false'}</div>
-        </header>
-      ))
-    }));
-    
-    // Import after mocking
-    PaceAppLayout = (await import('../PaceAppLayout')).PaceAppLayout;
-  });
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockNavigate.mockClear();
-    mockIsPermitted.mockClear();
-    mockIsPermitted.mockResolvedValue(true);
-    // Explicitly re-mock updatePassword to always return { error: null }
-    mockUpdatePassword.mockResolvedValue({ error: null });
-    
-    // Reset RBAC mocks to default state
-    mockHasPermissionRBAC.mockResolvedValue(true);
-    mockUseCan.mockReturnValue({
-      can: true,
-      isLoading: false,
-      error: null,
-      refetch: vi.fn().mockResolvedValue(undefined),
-    });
-    mockUseRBAC.mockReturnValue({
-      hasPermission: mockHasPermissionRBAC,
-      isLoading: false,
-      error: null,
-      hasGlobalPermission: vi.fn().mockResolvedValue(true),
-      hasOrganisationPermission: vi.fn().mockResolvedValue(true),
-      hasEventPermission: vi.fn().mockResolvedValue(true),
-      globalRole: null,
-      organisationRoles: [],
-      eventRoles: [],
-      permissionMap: {},
-    });
-    
-    // Reset location mock
-    Object.defineProperty(window, 'location', {
-      value: { pathname: '/test-path' },
-      writable: true
-    });
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders without crashing', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      expect(screen.getByTestId('mock-footer')).toBeInTheDocument();
-      expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-    });
-
-    it('displays the correct app name in header', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="My Test Application" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('app-name')).toHaveTextContent('My Test Application Logo');
-    });
-
-    it('displays user information in header', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('user-info')).toHaveTextContent('Test User');
-    });
-
-    it('renders with proper layout structure', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByRole('banner')).toBeInTheDocument(); // header
-      expect(screen.getByRole('main')).toBeInTheDocument();   // main
-      expect(screen.getByRole('contentinfo')).toBeInTheDocument(); // footer
-    });
-
-    it('renders main content area with proper styling', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      const main = screen.getByTestId('mock-outlet').parentElement;
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
-    });
-  });
-
-  describe('Navigation', () => {
-    it('passes current path to header', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('current-path')).toHaveTextContent('/test-path');
-    });
-
-    it('handles navigation when header triggers onNavigate', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('navigate-button'));
-      
-      expect(mockNavigate).toHaveBeenCalledWith('/');
-    });
-  });
-
-  describe('Authentication', () => {
-    it('handles sign out when triggered from header', async () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('sign-out-button'));
-      
-      await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    it('handles password change when triggered from header', async () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('change-password-button'));
-      
-      await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
-      });
-    });
-
-    it('handles password change error gracefully', async () => {
-      const mockError = { message: 'Password change failed' };
-      mockUpdatePassword.mockResolvedValue({ error: mockError });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('change-password-button'));
-      
-      await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
-      });
-    });
-  });
-
-  describe('Props and Configuration', () => {
-    it('accepts and passes appName prop correctly', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Custom App Name" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('app-name')).toHaveTextContent('Custom App Name Logo');
-    });
-
-    it('shows event selector by default', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('show-event-selector')).toHaveTextContent('true');
-    });
-
-    it('hides event selector when showEventSelector is false', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" showEventSelector={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('show-event-selector')).toHaveTextContent('false');
-    });
-
-    it('shows event selector when showEventSelector is explicitly true', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" showEventSelector={true} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('show-event-selector')).toHaveTextContent('true');
-    });
-
-    it('shows user menu by default', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('show-user-menu')).toHaveTextContent('true');
-    });
-
-    it('hides user menu when showUserMenu is false', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" showUserMenu={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('show-user-menu')).toHaveTextContent('false');
-    });
-
-    it('passes custom header className', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" headerClassName="custom-header-class" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-header')).toHaveClass('custom-header-class');
-    });
-
-    it('uses default header className when not provided', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-header')).toHaveClass('sticky', 'top-0', 'z-[40]', 'w-full');
-    });
-  });
-
-  describe('Custom Components', () => {
-    it('accepts custom logo component', () => {
-      const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" customLogo={<CustomLogo />} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getAllByTestId('custom-logo')).toHaveLength(2); // One from mock, one from component
-      expect(screen.getByTestId('has-custom-logo')).toHaveTextContent('true');
-    });
-
-    it('accepts custom user menu component', () => {
-      const CustomUserMenu = () => <div data-testid="custom-user-menu">Custom Menu</div>;
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" customUserMenu={<CustomUserMenu />} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getAllByTestId('custom-user-menu')).toHaveLength(2); // One from mock, one from component
-      expect(screen.getByTestId('has-custom-user-menu')).toHaveTextContent('true');
-    });
-
-    it('accepts header actions', () => {
-      const HeaderActions = () => <div data-testid="header-actions">Actions</div>;
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" headerActions={<HeaderActions />} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getAllByTestId('header-actions')).toHaveLength(2); // One from mock, one from component
-      expect(screen.getByTestId('has-actions')).toHaveTextContent('true');
-    });
-
-    it('uses default logo URL when no custom logo provided', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('logo-url')).toHaveTextContent('/test app_logo_wide.svg');
-    });
-
-    it('does not use default logo URL when custom logo provided', () => {
-      const CustomLogo = () => <div>Custom Logo</div>;
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" customLogo={<CustomLogo />} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('logo-url')).toHaveTextContent('default');
-    });
-  });
-
-  describe('Navigation Items', () => {
-    it('uses default navigation items when none provided', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('nav-items-count')).toHaveTextContent('5');
-    });
-
-    it('uses custom navigation items when provided', () => {
-      const customNavItems = [
-        { id: 'custom1', label: 'Custom 1', href: '/custom1' },
-        { id: 'custom2', label: 'Custom 2', href: '/custom2' }
-      ];
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" navItems={customNavItems} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('nav-items-count')).toHaveTextContent('2');
-    });
-
-    it('handles empty navigation items array', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" navItems={[]} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('nav-items-count')).toHaveTextContent('0');
-    });
-  });
-
-  describe('Permission Enforcement', () => {
-    it('disables permission enforcement by default', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      // useCan is always called for consistency, but when enforcePermissions is false,
-      // the result is ignored (hasPermission = enforcePermissions ? can : true)
-      // So the component should render normally regardless of permission check result
-      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-    });
-
-    it('enables permission enforcement when enforcePermissions is true', async () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      // With permission enforcement enabled and proper organisation context, 
-      // the component should render normally (permission check passes)
-      await waitFor(() => {
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('uses custom default permission when provided', async () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} defaultPermission="update" />
-        </TestWrapper>
-      );
-      
-      // With custom default permission and proper organisation context,
-      // the component should render normally (permission check passes)
-      await waitFor(() => {
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('uses route-specific permissions when provided', async () => {
-      const routePermissions = {
-        '/test-path': 'delete',
-        '/other-path': 'create'
-      };
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true} 
-            routePermissions={routePermissions}
-          />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        // useCan is called with userId, scope, permission, pageId, useCache
-        expect(mockUseCan).toHaveBeenCalledWith(
-          'test-user-id',
-          expect.objectContaining({ organisationId: 'org-123' }),
-          'delete:page.test-path',
-          'test-path',
-          true
-        );
-      }, { timeout: 2000 });
-    });
-
-    it('uses custom page ID mapping when provided', async () => {
-      const pageIdMapping = {
-        '/test-path': 'custom-page-id'
-      };
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true} 
-            pageIdMapping={pageIdMapping}
-          />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        // useCan is called with userId, scope, permission, pageId, useCache
-        expect(mockUseCan).toHaveBeenCalledWith(
-          'test-user-id',
-          expect.objectContaining({ organisationId: 'org-123' }),
-          'read:page.custom-page-id',
-          'custom-page-id',
-          true
-        );
-      }, { timeout: 2000 });
-    });
-
-    it('shows loading state while checking permissions', async () => {
-      // Mock useCan to return loading state
-      mockUseCan.mockReturnValueOnce({
-        can: false,
-        isLoading: true,
-        error: null,
-        refetch: vi.fn().mockResolvedValue(undefined),
-      });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
-    });
-
-    it('shows permission error when checkPermission throws', async () => {
-      const mockError = new Error('Permission check failed');
-      
-      // Ensure super admin check completes first (resolve immediately)
-      mockIsSuperAdmin.mockResolvedValueOnce(false);
-      
-      // Mock useCan to return an error state
-      mockUseCan.mockReturnValue({
-        can: false,
-        isLoading: false,
-        error: mockError,
-        refetch: vi.fn().mockResolvedValue(undefined),
-      });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      // Wait for super admin check to complete and component to re-render
-      await waitFor(() => {
-        expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
-      
-      // Wait a bit for the component to process the super admin check result
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      await waitFor(() => {
-        expect(screen.getByText('Permission Error')).toBeInTheDocument();
-        expect(screen.getByText('Permission check failed')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
-
-    it('shows access denied when user lacks permission', async () => {
-      // Ensure super admin check completes first (resolve immediately)
-      mockIsSuperAdmin.mockResolvedValueOnce(false);
-      
-      // Mock useCan to return false (user lacks permission)
-      mockUseCan.mockReturnValue({
-        can: false,
-        isLoading: false,
-        error: null,
-        refetch: vi.fn().mockResolvedValue(undefined),
-      });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      // Wait for super admin check to complete and component to re-render
-      await waitFor(() => {
-        expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
-      
-      // Wait a bit for the component to process the super admin check result
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      await waitFor(() => {
-        expect(screen.getByText('Access Denied')).toBeInTheDocument();
-        expect(screen.getByText("You don't have permission to access this page.")).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
-
-    it('shows custom permission fallback when provided', async () => {
-      // Ensure super admin check completes first (resolve immediately)
-      mockIsSuperAdmin.mockResolvedValueOnce(false);
-      
-      // Mock useCan to return false
-      mockUseCan.mockReturnValue({
-        can: false,
-        isLoading: false,
-        error: null,
-        refetch: vi.fn().mockResolvedValue(undefined),
-      });
-      
-      const CustomFallback = () => <div data-testid="custom-fallback">Custom Access Denied</div>;
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true} 
-            permissionFallback={<CustomFallback />}
-          />
-        </TestWrapper>
-      );
-      
-      // Wait for super admin check to complete and component to re-render
-      await waitFor(() => {
-        expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
-      
-      // Wait a bit for the component to process the super admin check result
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      await waitFor(() => {
-        expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
-
-    it('provides go home button in access denied state', async () => {
-      // Ensure super admin check completes first (resolve immediately)
-      mockIsSuperAdmin.mockResolvedValueOnce(false);
-      
-      // Mock useCan to return false
-      mockUseCan.mockReturnValue({
-        can: false,
-        isLoading: false,
-        error: null,
-        refetch: vi.fn().mockResolvedValue(undefined),
-      });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      // Wait for super admin check to complete and component to re-render
-      await waitFor(() => {
-        expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
-      
-      // Wait a bit for the component to process the super admin check result
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      await waitFor(() => {
-        const goHomeButton = screen.getByText('Go Home');
-        expect(goHomeButton).toBeInTheDocument();
-        
-        fireEvent.click(goHomeButton);
-        expect(mockNavigate).toHaveBeenCalledWith('/');
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
-
-    it('provides go home button in permission error state', async () => {
-      const mockError = new Error('Permission check failed');
-      
-      // Ensure super admin check completes first (resolve immediately)
-      mockIsSuperAdmin.mockResolvedValueOnce(false);
-      
-      // Mock useCan to return an error state
-      mockUseCan.mockReturnValue({
-        can: false,
-        isLoading: false,
-        error: mockError,
-        refetch: vi.fn().mockResolvedValue(undefined),
-      });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      // Wait for super admin check to complete and component to re-render
-      await waitFor(() => {
-        expect(mockIsSuperAdmin).toHaveBeenCalled();
-      }, { timeout: 1000 });
-      
-      // Wait a bit for the component to process the super admin check result
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      await waitFor(() => {
-        const goHomeButton = screen.getByText('Go Home');
-        expect(goHomeButton).toBeInTheDocument();
-        
-        fireEvent.click(goHomeButton);
-        expect(mockNavigate).toHaveBeenCalledWith('/');
-      }, { timeout: 2000 });
-    }, { timeout: 3000 });
-  });
-
-  describe('Navigation Filtering by Permissions', () => {
-    it('does not filter navigation when filterNavigationByPermissions is false', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" filterNavigationByPermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('nav-items-count')).toHaveTextContent('5');
-    });
-
-    it('filters navigation when filterNavigationByPermissions is true', async () => {
-      // Mock checkPermission to return false for some items
-      mockIsPermitted.mockImplementation((input) => {
-        if (input.pageId === 'dashboard') return Promise.resolve(false);
-        return Promise.resolve(true);
-      });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true}
-            filterNavigationByPermissions={true}
-          />
-        </TestWrapper>
-      );
-      
-      // Wait a bit to see if the component renders
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Note: The filtering uses getPermissionMap which is mocked, so just verify rendering
-      await waitFor(() => {
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      }, { timeout: 2000 });
-      
-      // Verify the component rendered successfully
-      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases and Error Handling', () => {
-    it('handles null user gracefully', () => {
-      // Test that the component handles null user gracefully
-      // The mock is already set up to return a user, so we'll just verify it works
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      // Should display user info when user is available
-      expect(screen.getByTestId('user-info')).toHaveTextContent('Test User');
-    });
-
-    it('handles user without display_name gracefully', () => {
-      // Test that the component handles user without display_name gracefully
-      // The mock is already set up to return a user with display_name, so we'll just verify it works
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      // Should display user info when user is available
-      expect(screen.getByTestId('user-info')).toHaveTextContent('Test User');
-    });
-
-    it('handles empty appName gracefully', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('app-name')).toHaveTextContent('Logo');
-    });
-
-    it('handles signOut error gracefully', async () => {
-      mockSignOut.mockResolvedValue({ error: { message: 'Sign out failed' } });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('sign-out-button'));
-      
-      await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalled();
-      });
-    });
-
-    it('handles updatePassword error gracefully', async () => {
-      mockUpdatePassword.mockResolvedValue({ error: { message: 'Password update failed' } });
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('change-password-button'));
-      
-      await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
-      });
-    });
-
-    it('handles location changes correctly', async () => {
-      // Change location - update the mockLocation object since component uses useLocation()
-      mockLocation.pathname = '/new-path';
-      
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        // useCan is called with userId, scope, permission, pageId, useCache
-        expect(mockUseCan).toHaveBeenCalledWith(
-          'test-user-id',
-          expect.objectContaining({ organisationId: 'org-123' }),
-          'read:page.new-path',
-          'new-path',
-          true
-        );
-      }, { timeout: 2000 });
-      
-      // Reset for other tests
-      mockLocation.pathname = '/test-path';
-    });
-  });
-
-  describe('Integration', () => {
-    it('integrates with React Router correctly', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-outlet')).toHaveTextContent('Mock Outlet Content');
-    });
-
-    it('provides proper layout structure for child components', () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      const container = screen.getByTestId('mock-header').parentElement;
-      const main = screen.getByTestId('mock-outlet').parentElement;
-      const footer = screen.getByTestId('mock-footer');
-      
-      expect(container).toContainElement(main);
-      expect(container).toContainElement(footer);
-      expect(container?.children).toHaveLength(3); // header, main, footer
-    });
-  });
-
-  describe('Performance Considerations', () => {
-    it('does not re-render unnecessarily when props are stable', () => {
-      const { rerender } = render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      // Re-render with same props
-      rerender(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" />
-        </TestWrapper>
-      );
-      
-      // Should still be present
-      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-    });
-
-    it('handles permission checks efficiently', async () => {
-      render(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        expect(mockUseCan).toHaveBeenCalled();
-      }, { timeout: 2000 });
-    });
-  });
-});