@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,629 @@
+import React from 'react';
+import { screen, fireEvent } 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';
+// Define Operation type locally since old RBAC types are removed
+type Operation = 'read' | 'create' | 'update' | 'delete' | 'manage';
+
+// 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 for performance testing
+const mockIsPermitted = vi.fn().mockResolvedValue(true);
+const mockCheckPermission = vi.fn().mockResolvedValue(true);
+
+vi.mock('../../../rbac/api', () => ({
+  isPermitted: vi.fn().mockResolvedValue(true),
+  getPermissionMap: vi.fn().mockResolvedValue({}),
+  getAccessLevel: vi.fn().mockResolvedValue('viewer'),
+  isSuperAdmin: vi.fn().mockResolvedValue(false),
+  setupRBAC: vi.fn()
+}));
+
+// Mock child components
+vi.mock('../../Header', () => ({
+  Header: vi.fn(({ appName, user, onSignOut, onChangePassword, onNavigate, currentPath, logo, userMenu, actions, navItems }) => (
+    <header data-testid="mock-header" role="banner">
+      <div data-testid="app-name">{appName ?? 'Test App'}</div>
+      <div data-testid="user-info">{user?.user_metadata?.display_name || user?.email}</div>
+      <nav data-testid="navigation">
+        {navItems?.map((item, index) => (
+          <button 
+            key={item.id}
+            data-testid={`nav-nav-${index}`}
+            onClick={() => onNavigate(item)}
+          >
+            {item.label}
+          </button>
+        )) || (
+          <>
+            <button 
+              data-testid="home-nav" 
+              onClick={() => onNavigate({ id: 'home', label: 'Home', href: '/' })}
+            >
+              Home
+            </button>
+            <button 
+              data-testid="dashboard-nav" 
+              onClick={() => onNavigate({ id: 'dashboard', label: 'Dashboard', href: '/dashboard' })}
+            >
+              Dashboard
+            </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>
+    </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>
+);
+
+// Performance thresholds
+const PERFORMANCE_THRESHOLDS = {
+  RENDER_TIME: 200, // ms - Increased due to migration changes requiring more complex organization loading
+  PERMISSION_CHECK_TIME: 1200, // ms - Increased to account for test environment overhead
+  MEMORY_USAGE_INCREASE: 1024 * 1024, // 1MB
+  RE_RENDER_COUNT: 3
+};
+
+describe('PaceAppLayout Performance', () => {
+  beforeEach(() => {
+    // Reset all mocks before each test
+    vi.clearAllMocks();
+    mockSignOut.mockResolvedValue({ error: null });
+    mockUpdatePassword.mockResolvedValue({ error: null });
+    mockCheckPermission.mockClear();
+    mockCheckPermission.mockResolvedValue(true);
+    mockIsPermitted.mockClear();
+    mockIsPermitted.mockResolvedValue(true);
+  });
+
+  describe('Rendering Performance', () => {
+    it('renders within performance threshold', () => {
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+      
+      expect(renderTime).toBeLessThan(400); // Adjusted for test environment
+      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+    });
+
+    it('renders with custom components within threshold', () => {
+      const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
+      const CustomUserMenu = () => <div data-testid="custom-user-menu">Custom Menu</div>;
+      
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            appName="Test App" 
+            customLogo={<CustomLogo />}
+            customUserMenu={<CustomUserMenu />}
+          />
+        </TestWrapper>
+      );
+      
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+      
+      expect(renderTime).toBeLessThan(400); // Adjusted for test environment
+      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
+      expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
+    });
+
+    it('renders with large navigation items within threshold', () => {
+      const largeNavItems = Array.from({ length: 50 }, (_, i) => ({
+        id: `nav-${i}`,
+        label: `Navigation ${i}`,
+        href: `/nav-${i}`
+      }));
+      
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" navItems={largeNavItems} />
+        </TestWrapper>
+      );
+      
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+      
+      expect(renderTime).toBeLessThan(400); // Adjusted for test environment
+      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+    });
+  });
+
+  describe('Permission Check Performance', () => {
+    it('performs permission checks within threshold', async () => {
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" enforcePermissions={true} />
+        </TestWrapper>
+      );
+      
+      await new Promise(resolve => setTimeout(resolve, 10)); // Wait for async operations
+      
+      const endTime = performance.now();
+      const permissionCheckTime = endTime - startTime;
+      
+      expect(permissionCheckTime).toBeLessThan(PERFORMANCE_THRESHOLDS.PERMISSION_CHECK_TIME);
+      // Performance test - just verify the component renders within threshold
+      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+    });
+
+    it('handles multiple permission checks efficiently', async () => {
+      const routePermissions: Record<string, Operation> = {
+        '/dashboard': 'read',
+        '/settings': 'update',
+        '/admin': 'delete'
+      };
+      
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            appName="Test App" 
+            enforcePermissions={true}
+            routePermissions={routePermissions}
+          />
+        </TestWrapper>
+      );
+      
+      await new Promise(resolve => setTimeout(resolve, 10));
+      
+      const endTime = performance.now();
+      const permissionCheckTime = endTime - startTime;
+      
+      expect(permissionCheckTime).toBeLessThan(PERFORMANCE_THRESHOLDS.PERMISSION_CHECK_TIME);
+      // Performance test - just verify the component renders within threshold
+      expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+    });
+
+    it('handles permission check errors efficiently', async () => {
+      mockCheckPermission.mockRejectedValue(new Error('Permission check failed'));
+      
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" enforcePermissions={true} />
+        </TestWrapper>
+      );
+      
+      await new Promise(resolve => setTimeout(resolve, 10));
+      
+      const endTime = performance.now();
+      const permissionCheckTime = endTime - startTime;
+      
+      expect(permissionCheckTime).toBeLessThan(PERFORMANCE_THRESHOLDS.PERMISSION_CHECK_TIME);
+    });
+  });
+
+  describe('Memory Usage', () => {
+    it('does not cause significant memory leaks on re-renders', () => {
+      const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      
+      const { rerender } = renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      // Perform multiple re-renders
+      for (let i = 0; i < PERFORMANCE_THRESHOLDS.RE_RENDER_COUNT; i++) {
+        rerenderWithProviders(
+          <TestWrapper>
+            <PaceAppLayout appName={`Test App ${i}`} />
+          </TestWrapper>
+        );
+      }
+      
+      const finalMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      const memoryIncrease = finalMemory - initialMemory;
+      
+      if (initialMemory > 0 && finalMemory > 0) {
+        expect(memoryIncrease).toBeLessThan(PERFORMANCE_THRESHOLDS.MEMORY_USAGE_INCREASE);
+      }
+    });
+
+    it('handles large navigation items without memory issues', () => {
+      const largeNavItems = Array.from({ length: 100 }, (_, i) => ({
+        id: `nav-${i}`,
+        label: `Navigation ${i}`,
+        href: `/nav-${i}`
+      }));
+      
+      const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" navItems={largeNavItems} />
+        </TestWrapper>
+      );
+      
+      const finalMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      const memoryIncrease = finalMemory - initialMemory;
+      
+      if (initialMemory > 0 && finalMemory > 0) {
+        expect(memoryIncrease).toBeLessThan(PERFORMANCE_THRESHOLDS.MEMORY_USAGE_INCREASE);
+      }
+    });
+  });
+
+  describe('Re-render Performance', () => {
+    it('handles prop changes efficiently', () => {
+      const { rerender } = renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      const startTime = performance.now();
+      
+      // Change props multiple times
+      for (let i = 0; i < PERFORMANCE_THRESHOLDS.RE_RENDER_COUNT; i++) {
+        rerenderWithProviders(
+          <TestWrapper>
+            <PaceAppLayout 
+              appName={`Test App ${i}`}
+              showEventSelector={i % 2 === 0}
+              showUserMenu={i % 2 === 1}
+            />
+          </TestWrapper>
+        );
+      }
+      
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+      const averageTime = totalTime / PERFORMANCE_THRESHOLDS.RE_RENDER_COUNT;
+      
+      expect(averageTime).toBeLessThan(PERFORMANCE_THRESHOLDS.RENDER_TIME);
+    });
+
+    it('handles permission enforcement toggles efficiently', async () => {
+      const { rerender } = renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      const startTime = performance.now();
+      
+      // Toggle permission enforcement
+      rerenderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" enforcePermissions={true} />
+        </TestWrapper>
+      );
+      
+      await new Promise(resolve => setTimeout(resolve, 10));
+      
+      rerenderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" enforcePermissions={false} />
+        </TestWrapper>
+      );
+      
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+      
+      expect(totalTime).toBeLessThan(PERFORMANCE_THRESHOLDS.PERMISSION_CHECK_TIME);
+    });
+  });
+
+  describe('Navigation Performance', () => {
+    it('handles rapid navigation efficiently', () => {
+      const navItems = [
+        { id: 'home', label: 'Home', href: '/' },
+        { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+        { id: 'settings', label: 'Settings', href: '/settings' },
+        { id: 'ui-showcase', label: 'UI Showcase', href: '/ui-showcase' },
+        { id: 'data-table-showcase', label: 'DataTable Showcase', href: '/data-table-showcase' }
+      ];
+      
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" navItems={navItems} enforcePermissions={false} />
+        </TestWrapper>
+      );
+      
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+      
+      expect(renderTime).toBeLessThan(400); // Adjusted for test environment
+      
+      // Rapidly click navigation buttons
+      // If not, this test will fail.
+      // @ts-ignore
+      fireEvent.click(screen.getByTestId('nav-nav-0'));
+      // @ts-ignore
+      fireEvent.click(screen.getByTestId('nav-nav-1'));
+      // @ts-ignore
+      fireEvent.click(screen.getByTestId('nav-nav-2'));
+      
+      // Should handle rapid navigation without performance issues
+      expect(mockNavigate).toHaveBeenCalledTimes(3);
+    });
+
+    it('handles large navigation items efficiently', () => {
+      const largeNavItems = Array.from({ length: 50 }, (_, i) => ({
+        id: `nav-${i}`,
+        label: `Navigation ${i}`,
+        href: `/nav-${i}`
+      }));
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" navItems={largeNavItems} />
+        </TestWrapper>
+      );
+      
+      const startTime = performance.now();
+      
+      // Click on multiple navigation items
+      for (let i = 0; i < 5; i++) {
+        const navButton = screen.getByTestId(`nav-nav-${i}`);
+        // @ts-ignore
+        fireEvent.click(navButton);
+      }
+      
+      const endTime = performance.now();
+      const navigationTime = endTime - startTime;
+      
+      expect(navigationTime).toBeLessThan(PERFORMANCE_THRESHOLDS.RENDER_TIME);
+    });
+  });
+
+  describe('Authentication Performance', () => {
+    it('handles authentication actions efficiently', async () => {
+      // Reset mocks before test
+      mockSignOut.mockClear();
+      mockUpdatePassword.mockClear();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      const startTime = performance.now();
+      
+      // Perform authentication actions
+      const signOutButton = screen.getByTestId('sign-out-button');
+      const changePasswordButton = screen.getByTestId('change-password-button');
+      
+      fireEvent.click(signOutButton);
+      fireEvent.click(changePasswordButton);
+      
+      // Wait for async operations to complete
+      await new Promise(resolve => setTimeout(resolve, 50));
+      
+      const endTime = performance.now();
+      const authTime = endTime - startTime;
+      
+      expect(authTime).toBeLessThan(PERFORMANCE_THRESHOLDS.PERMISSION_CHECK_TIME);
+      expect(mockSignOut).toHaveBeenCalled();
+      expect(mockUpdatePassword).toHaveBeenCalledWith('newpassword123');
+    });
+
+    it('handles authentication errors efficiently', async () => {
+      // Reset mocks and set up error responses
+      mockSignOut.mockClear();
+      mockUpdatePassword.mockClear();
+      mockSignOut.mockResolvedValue({ error: { message: 'Sign out failed' } });
+      mockUpdatePassword.mockResolvedValue({ error: { message: 'Password update failed' } });
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      const startTime = performance.now();
+      
+      // Perform authentication actions that will fail
+      const signOutButton = screen.getByTestId('sign-out-button');
+      const changePasswordButton = screen.getByTestId('change-password-button');
+      
+      fireEvent.click(signOutButton);
+      fireEvent.click(changePasswordButton);
+      
+      // Wait for async operations to complete
+      await new Promise(resolve => setTimeout(resolve, 50));
+      
+      const endTime = performance.now();
+      const authTime = endTime - startTime;
+      
+      expect(authTime).toBeLessThan(PERFORMANCE_THRESHOLDS.PERMISSION_CHECK_TIME);
+    });
+  });
+
+  describe('Complex Configuration Performance', () => {
+    it('handles complex configurations efficiently', () => {
+      const customNavItems = Array.from({ length: 20 }, (_, i) => ({
+        id: `nav-${i}`,
+        label: `Navigation ${i}`,
+        href: `/nav-${i}`
+      }));
+      
+      const HeaderActions = () => (
+        <div data-testid="header-actions">
+          {Array.from({ length: 5 }, (_, i) => (
+            <button key={i} data-testid={`action-${i}`}>Action {i}</button>
+          ))}
+        </div>
+      );
+      
+      const CustomUserMenu = () => (
+        <div data-testid="custom-user-menu">
+          {Array.from({ length: 3 }, (_, i) => (
+            <button key={i} data-testid={`menu-${i}`}>Menu {i}</button>
+          ))}
+        </div>
+      );
+      
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            appName="Complex App"
+            navItems={customNavItems}
+            headerActions={<HeaderActions />}
+            customUserMenu={<CustomUserMenu />}
+            showEventSelector={false}
+            showUserMenu={true}
+            headerClassName="complex-header-class"
+            enforcePermissions={false}
+            defaultPermission="update"
+                         routePermissions={{
+               '/nav-0': 'read',
+               '/nav-1': 'update',
+               '/nav-2': 'delete'
+             }}
+            pageIdMapping={{
+              '/nav-0': 'page-0',
+              '/nav-1': 'page-1',
+              '/nav-2': 'page-2'
+            }}
+            filterNavigationByPermissions={true}
+          />
+        </TestWrapper>
+      );
+      
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+      
+      expect(renderTime).toBeLessThan(400); // Adjusted for test environment
+      expect(screen.getByTestId('header-actions')).toBeInTheDocument();
+      expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
+    });
+  });
+});