@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,893 +0,0 @@
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { BrowserRouter } from 'react-router-dom';
-import '@testing-library/jest-dom';
-import { renderWithProviders, rerenderWithProviders } from '../../../__tests__/shared';
-
-// 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('../../../providers/OrganisationProvider', () => ({
-  OrganisationProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  useOrganisations: () => mockOrganisationContext
-}));
-
-// Mock the new RBAC system
-vi.mock('../../../rbac/api', () => ({
-  isPermitted: vi.fn().mockImplementation((input) => {
-    console.log('[PaceAppLayout] Page access attempt:', {
-      pageName: input.pageId || 'unknown',
-      operation: input.permission,
-      userId: input.userId,
-      allowed: true,
-      strictMode: true,
-      timestamp: new Date().toISOString()
-    });
-    return Promise.resolve(true);
-  }),
-  getPermissionMap: vi.fn().mockResolvedValue({}),
-  getAccessLevel: vi.fn().mockResolvedValue('viewer'),
-  isSuperAdmin: vi.fn().mockResolvedValue(false),
-  setupRBAC: vi.fn().mockResolvedValue(undefined)
-}));
-
-// Mock child components with more realistic behavior
-vi.mock('../../Header', () => ({
-  Header: vi.fn(({ 
-    user, 
-    onSignOut, 
-    onChangePassword, 
-    onNavigate, 
-    currentPath,
-    navItems,
-    actions,
-    userMenu,
-    logo,
-    logoUrl,
-    showEventSelector,
-    showUserMenu,
-    className
-  }) => (
-    <header data-testid="mock-header" role="banner" className={className}>
-      <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>
-      <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>
-      <nav data-testid="navigation">
-        {navItems?.map((item, index) => (
-          <button 
-            key={item.id}
-            data-testid={`nav-${item.id}`}
-            onClick={() => onNavigate(item)}
-          >
-            {item.label}
-          </button>
-        )) || (
-          <>
-            <button 
-              data-testid="nav-home" 
-              onClick={() => onNavigate({ id: 'home', label: 'Home', href: '/' })}
-            >
-              Home
-            </button>
-            <button 
-              data-testid="nav-dashboard" 
-              onClick={() => onNavigate({ id: 'dashboard', label: 'Dashboard', href: '/dashboard' })}
-            >
-              Dashboard
-            </button>
-            <button 
-              data-testid="nav-settings" 
-              onClick={() => onNavigate({ id: 'settings', label: 'Settings', href: '/settings' })}
-            >
-              Settings
-            </button>
-            <button 
-              data-testid="nav-ui-showcase" 
-              onClick={() => onNavigate({ id: 'ui-showcase', label: 'UI Showcase', href: '/ui-showcase' })}
-            >
-              UI Showcase
-            </button>
-            <button 
-              data-testid="nav-data-table-showcase" 
-              onClick={() => onNavigate({ id: 'data-table-showcase', label: 'DataTable Showcase', href: '/data-table-showcase' })}
-            >
-              DataTable Showcase
-            </button>
-          </>
-        )}
-      </nav>
-      {logo && logo}
-      {userMenu && userMenu}
-      {actions && actions}
-      <button 
-        data-testid="sign-out-button" 
-        onClick={() => onSignOut()}
-      >
-        Sign Out
-      </button>
-      <button 
-        data-testid="change-password-button" 
-        onClick={() => onChangePassword('newpassword123')}
-      >
-        Change Password
-      </button>
-      <div data-testid="current-path">{currentPath}</div>
-      <div data-testid="show-event-selector">{showEventSelector !== false ? 'true' : 'false'}</div>
-    </header>
-  ))
-}));
-
-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
-});
-
-import { PaceAppLayout } from '../PaceAppLayout';
-
-// Wrapper component to provide Router context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <BrowserRouter>
-    {children}
-  </BrowserRouter>
-);
-
-describe('PaceAppLayout Integration', () => {
-  let mockIsPermitted: any;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    mockSignOut.mockResolvedValue({ error: null });
-    mockUpdatePassword.mockResolvedValue({ error: null });
-    
-    // Get the mocked functions
-    const { isPermitted, isSuperAdmin, setupRBAC } = await import('../../../rbac/api');
-    mockIsPermitted = vi.mocked(isPermitted);
-    const mockIsSuperAdmin = vi.mocked(isSuperAdmin);
-    
-    // Setup RBAC system
-    vi.mocked(setupRBAC).mockResolvedValue(undefined);
-    await setupRBAC({} as any); // Call setupRBAC to initialize the system
-    
-    // Set up isSuperAdmin mock
-    mockIsSuperAdmin.mockResolvedValue(false);
-    
-    // Reset mockIsPermitted to default implementation
-    mockIsPermitted.mockImplementation((input) => {
-      console.log('[PaceAppLayout] Page access attempt:', {
-        pageName: input.pageId || 'unknown',
-        operation: input.permission,
-        userId: input.userId,
-        allowed: true,
-        strictMode: true,
-        timestamp: new Date().toISOString()
-      });
-      return Promise.resolve(true);
-    });
-    
-    mockSignOut.mockClear();
-    mockUpdatePassword.mockClear();
-    mockNavigate.mockClear();
-    mockIsPermitted.mockClear();
-    
-    // Reset location mock
-    Object.defineProperty(window, 'location', {
-      value: { pathname: '/test-path' },
-      writable: true
-    });
-  });
-
-  describe('Component Integration', () => {
-    const stableNavItems = [
-      { id: 'custom1', label: 'Custom 1', href: '/custom1' },
-      { id: 'custom2', label: 'Custom 2', href: '/custom2' },
-      { id: 'custom3', label: 'Custom 3', href: '/custom3' }
-    ];
-
-    it('renders all child components correctly', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      expect(screen.getByTestId('mock-footer')).toBeInTheDocument();
-      expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-    });
-
-    it('integrates with custom navigation items', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" navItems={stableNavItems} enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('nav-items-count')).toHaveTextContent('3');
-      expect(screen.getByTestId('nav-custom1')).toBeInTheDocument();
-      expect(screen.getByTestId('nav-custom2')).toBeInTheDocument();
-      expect(screen.getByTestId('nav-custom3')).toBeInTheDocument();
-    });
-
-    it('integrates with custom header actions', () => {
-      const HeaderActions = () => (
-        <div data-testid="header-actions">
-          <button data-testid="action-1">Action 1</button>
-          <button data-testid="action-2">Action 2</button>
-        </div>
-      );
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" headerActions={<HeaderActions />} enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('header-actions')).toBeInTheDocument();
-      expect(screen.getByTestId('action-1')).toBeInTheDocument();
-      expect(screen.getByTestId('action-2')).toBeInTheDocument();
-      expect(screen.getByTestId('has-actions')).toHaveTextContent('true');
-    });
-
-    it('integrates with custom user menu', () => {
-      const CustomUserMenu = () => (
-        <div data-testid="custom-user-menu">
-          <button data-testid="profile-btn">Profile</button>
-          <button data-testid="settings-btn">Settings</button>
-        </div>
-      );
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" customUserMenu={<CustomUserMenu />} enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
-      expect(screen.getByTestId('profile-btn')).toBeInTheDocument();
-      expect(screen.getByTestId('settings-btn')).toBeInTheDocument();
-      expect(screen.getByTestId('has-custom-user-menu')).toHaveTextContent('true');
-    });
-
-    it('integrates with custom logo', () => {
-      const CustomLogo = () => (
-        <div data-testid="custom-logo">
-          <img src="/custom-logo.svg" alt="Custom Logo" />
-        </div>
-      );
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" customLogo={<CustomLogo />} enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-      expect(screen.getByTestId('has-custom-logo')).toHaveTextContent('true');
-      expect(screen.getByTestId('logo-url')).toHaveTextContent('default');
-    });
-  });
-
-  describe('Navigation Integration', () => {
-    const stableNavItems2 = [
-      { id: 'custom1', label: 'Custom 1', href: '/custom1' },
-      { id: 'custom2', label: 'Custom 2', href: '/custom2' }
-    ];
-    
-    const stableNavItems3 = [
-      { id: 'no-href', label: 'No Href', href: undefined },
-      { id: 'with-href', label: 'With Href', href: '/with-href' }
-    ];
-
-    it('handles navigation callbacks correctly', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // Test home navigation
-      fireEvent.click(screen.getByTestId('nav-home'));
-      expect(mockNavigate).toHaveBeenCalledWith('/');
-      
-      // Test dashboard navigation
-      fireEvent.click(screen.getByTestId('nav-dashboard'));
-      expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
-      
-      // Test settings navigation
-      fireEvent.click(screen.getByTestId('nav-settings'));
-      expect(mockNavigate).toHaveBeenCalledWith('/settings');
-    });
-
-    it('handles custom navigation items correctly', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" navItems={stableNavItems2} enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('nav-custom1'));
-      expect(mockNavigate).toHaveBeenCalledWith('/custom1');
-      
-      fireEvent.click(screen.getByTestId('nav-custom2'));
-      expect(mockNavigate).toHaveBeenCalledWith('/custom2');
-    });
-
-    it('handles navigation items without href gracefully', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" navItems={stableNavItems3} enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // Should not crash when clicking item without href
-      fireEvent.click(screen.getByTestId('nav-no-href'));
-      expect(mockNavigate).not.toHaveBeenCalled();
-      
-      // Should navigate when clicking item with href
-      fireEvent.click(screen.getByTestId('nav-with-href'));
-      expect(mockNavigate).toHaveBeenCalledWith('/with-href');
-    });
-  });
-
-  describe('Authentication Integration', () => {
-    it('handles sign out flow correctly', async () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('sign-out-button'));
-      
-      await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalledTimes(1);
-      }, { timeout: 5000 });
-    });
-
-    it('handles password change flow correctly', async () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      fireEvent.click(screen.getByTestId('change-password-button'));
-      
-      await waitFor(() => {
-        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' } });
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // Test sign out error
-      fireEvent.click(screen.getByTestId('sign-out-button'));
-      await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalled();
-      }, { timeout: 5000 });
-      
-      // Test password change error
-      fireEvent.click(screen.getByTestId('change-password-button'));
-      await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
-      }, { timeout: 5000 });
-    });
-  });
-
-  describe('Permission Integration', () => {
-    const stablePermissionNavItems = [
-      { id: 'public', label: 'Public', href: '/public' },
-      { id: 'private', label: 'Private', href: '/private' },
-      { id: 'admin', label: 'Admin', href: '/admin' }
-    ];
-
-    it('integrates permission enforcement with navigation', async () => {
-      const routePermissions = {
-        '/dashboard': 'read',
-        '/settings': 'read'
-      };
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true}
-            routePermissions={routePermissions}
-          />
-        </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.skip('integrates permission filtering with navigation items', async () => {
-      const routePermissions = {
-        '/public': 'read',
-        '/private': 'read',
-        '/admin': 'read'
-      };
-      
-      // Get the mocked functions and set them up
-      const { isSuperAdmin, isPermitted } = await import('../../../rbac/api');
-      vi.mocked(isSuperAdmin).mockResolvedValue(false);
-      vi.mocked(isPermitted).mockImplementation((input) => {
-        if (input.pageId === 'private') return Promise.resolve(false);
-        return Promise.resolve(true);
-      });
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            navItems={stablePermissionNavItems}
-            enforcePermissions={true}
-            filterNavigationByPermissions={true}
-            routePermissions={routePermissions}
-          />
-        </TestWrapper>
-      );
-      
-      // With permission filtering enabled, the component should render
-      // and show filtered navigation items (filtering logic works)
-      await waitFor(() => {
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        expect(screen.getByTestId('nav-items-count')).toHaveTextContent('2'); // private item is filtered out
-        expect(screen.getByTestId('nav-public')).toBeInTheDocument();
-        expect(screen.getByTestId('nav-admin')).toBeInTheDocument();
-        expect(screen.queryByTestId('nav-private')).not.toBeInTheDocument(); // private item should be filtered out
-      }, { timeout: 2000 });
-    });
-
-    it('integrates custom page ID mapping with permissions', async () => {
-      const pageIdMapping = {
-        '/test-path': 'custom-page-id'
-      };
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true}
-            pageIdMapping={pageIdMapping}
-          />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        // With custom page ID mapping, the component should render normally
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('integrates permission fallback with custom components', async () => {
-      // Mock the RBAC system to deny permission
-      const { isPermitted } = await import('../../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
-      
-      const CustomFallback = () => (
-        <div data-testid="custom-fallback">
-          <h2>Custom Access Denied</h2>
-          <p>You don't have access to this page.</p>
-          <button data-testid="custom-home-btn">Go to Home</button>
-        </div>
-      );
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true}
-            permissionFallback={<CustomFallback />}
-          />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
-        expect(screen.getByText('Custom Access Denied')).toBeInTheDocument();
-        expect(screen.getByTestId('custom-home-btn')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-  });
-
-  describe('Layout Integration', () => {
-    it('maintains proper layout structure', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByRole('banner')).toBeInTheDocument(); // header
-      expect(screen.getByRole('main')).toBeInTheDocument();   // main
-      expect(screen.getByRole('contentinfo')).toBeInTheDocument(); // footer
-      
-      const main = screen.getByTestId('mock-outlet').parentElement;
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
-    });
-
-    it('ensures main content area grows to fill available space', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      const main = screen.getByTestId('mock-outlet').parentElement;
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
-    });
-
-    it('integrates custom header className', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" headerClassName="custom-header-class" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-header')).toHaveClass('custom-header-class');
-    });
-
-    it('integrates default header className when not provided', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-header')).toHaveClass('sticky', 'top-0', 'z-[40]', 'w-full');
-    });
-  });
-
-  describe('Real-world Scenarios', () => {
-    const stableComplexNavItems = [
-      { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
-      { id: 'reports', label: 'Reports', href: '/reports' },
-      { id: 'admin', label: 'Admin', href: '/admin' }
-    ];
-
-    it('handles complete user workflow', async () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // 1. User navigates to dashboard
-      fireEvent.click(screen.getByTestId('nav-dashboard'));
-      expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
-      
-      // 2. User changes password
-      fireEvent.click(screen.getByTestId('change-password-button'));
-      await waitFor(() => {
-        expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
-      }, { timeout: 5000 });
-      
-      // 3. User navigates back to home
-      fireEvent.click(screen.getByTestId('nav-home'));
-      expect(mockNavigate).toHaveBeenCalledWith('/');
-      
-      // 4. User signs out
-      fireEvent.click(screen.getByTestId('sign-out-button'));
-      await waitFor(() => {
-        expect(mockSignOut).toHaveBeenCalledTimes(1);
-      }, { timeout: 5000 });
-    });
-
-    it('handles rapid navigation and interactions', async () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // Rapidly click navigation buttons
-      fireEvent.click(screen.getByTestId('nav-dashboard'));
-      fireEvent.click(screen.getByTestId('nav-home'));
-      fireEvent.click(screen.getByTestId('nav-settings'));
-      
-      // Should have called navigate multiple times
-      expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
-      expect(mockNavigate).toHaveBeenCalledWith('/');
-      expect(mockNavigate).toHaveBeenCalledWith('/settings');
-    });
-
-    it('handles permission-based workflow', async () => {
-      // Mock permission check to simulate different permission states
-      mockIsPermitted.mockImplementation((input) => {
-        if (input.pageId === 'admin') return Promise.resolve(false);
-        return Promise.resolve(true);
-      });
-      
-      const routePermissions = {
-        '/dashboard': 'read',
-        '/settings': 'read',
-        '/admin': 'read'
-      };
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            enforcePermissions={true}
-            routePermissions={routePermissions}
-          />
-        </TestWrapper>
-      );
-      
-      // Initially should check permissions
-      await waitFor(() => {
-        // With permission-based workflow, the component should render normally
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('handles complex navigation with custom items and permissions', async () => {
-      // Mock permission check to filter admin access
-      mockIsPermitted.mockImplementation((input) => {
-        if (input.pageId === 'admin') return Promise.resolve(false);
-        return Promise.resolve(true);
-      });
-      
-      const routePermissions = {
-        '/dashboard': 'read',
-        '/reports': 'read',
-        '/admin': 'read'
-      };
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Test App" 
-            navItems={stableComplexNavItems}
-            enforcePermissions={true}
-            filterNavigationByPermissions={true}
-            routePermissions={routePermissions}
-          />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        // With complex navigation and permissions, the component should render normally
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('handles error recovery scenarios', async () => {
-      // Mock permission check to fail initially, then succeed
-      mockIsPermitted
-        .mockRejectedValueOnce(new Error('Network error'))
-        .mockResolvedValue(true);
-      
-      const { rerender } = renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // Should show header normally since permission enforcement is disabled
-      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      
-      // Clear mocks and re-render to simulate recovery
-      mockIsPermitted.mockClear();
-      mockIsPermitted.mockResolvedValue(true);
-      
-      rerender(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // Should work normally after recovery
-      await waitFor(() => {
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-      }, { timeout: 5000 });
-    });
-  });
-
-  describe('Configuration Integration', () => {
-    const stableConfigNavItems = [
-      { id: 'custom1', label: 'Custom 1', href: '/custom1' },
-      { id: 'custom2', label: 'Custom 2', href: '/custom2' }
-    ];
-
-    it('integrates all configuration options together', () => {
-      
-      const HeaderActions = () => <div data-testid="header-actions">Actions</div>;
-      const CustomUserMenu = () => <div data-testid="custom-user-menu">Menu</div>;
-      const CustomLogo = () => <div data-testid="custom-logo">Logo</div>;
-      
-      const routePermissions = {
-        '/custom1': 'read',
-        '/custom2': 'update'
-      };
-      
-      const pageIdMapping = {
-        '/custom1': 'page-1',
-        '/custom2': 'page-2'
-      };
-      
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout 
-            appName="Complex App"
-            navItems={stableConfigNavItems}
-            headerActions={<HeaderActions />}
-            customUserMenu={<CustomUserMenu />}
-            customLogo={<CustomLogo />}
-            showEventSelector={false}
-            showUserMenu={false}
-            headerClassName="complex-header-class"
-            enforcePermissions={false}
-            defaultPermission="update"
-            routePermissions={routePermissions}
-            pageIdMapping={pageIdMapping}
-            filterNavigationByPermissions={false}
-          />
-        </TestWrapper>
-      );
-      
-      // Verify all custom components are rendered
-      expect(screen.getByTestId('header-actions')).toBeInTheDocument();
-      expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-      
-      // Verify configuration is applied
-      expect(screen.getByTestId('app-name')).toHaveTextContent('Complex App');
-      expect(screen.getByTestId('nav-items-count')).toHaveTextContent('2');
-      expect(screen.getByTestId('show-event-selector')).toHaveTextContent('false');
-      expect(screen.getByTestId('show-user-menu')).toHaveTextContent('false');
-      expect(screen.getByTestId('mock-header')).toHaveClass('complex-header-class');
-    });
-
-    it('handles dynamic configuration changes', async () => {
-      const { rerender } = renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      // Initially should not have permission enforcement
-      expect(mockIsPermitted).not.toHaveBeenCalled();
-      
-      // Enable permission enforcement
-      rerenderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={true} />
-        </TestWrapper>
-      );
-      
-      await waitFor(() => {
-        // With dynamic configuration changes, the component should render normally
-        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
-        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-  });
-
-  describe('React Router Integration', () => {
-    it('renders Outlet content correctly', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
-    });
-
-    it('maintains proper layout structure with Outlet', () => {
-      renderWithProviders(
-        <TestWrapper>
-          <PaceAppLayout appName="Test App" enforcePermissions={false} />
-        </TestWrapper>
-      );
-      
-      expect(screen.getByRole('banner')).toBeInTheDocument(); // header
-      expect(screen.getByRole('main')).toBeInTheDocument();   // main
-      expect(screen.getByRole('contentinfo')).toBeInTheDocument(); // footer
-      
-      const main = screen.getByTestId('mock-outlet').parentElement;
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
-    });
-  });
-});