@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,585 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderWithProviders } from '../../../__tests__/shared';
+import { NavigationMenu } from '../NavigationMenu';
+import type { NavigationItem } from '../types';
+import { TestWrapper } from '../../../../tests/test-utils';
+
+describe('NavigationMenu Performance Tests', () => {
+  const mockOnNavigate = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Large Dataset Performance', () => {
+    it('renders efficiently with large number of items', () => {
+      const largeItems = Array.from({ length: 1000 }, (_, i) => ({
+        id: `item-${i}`,
+        label: `Item ${i}`,
+        href: `/item-${i}`,
+        icon: 'Info'
+      }));
+
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={largeItems}
+            mode="dropdown"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+
+      // Should render within reasonable time (generous for CI environments)
+      expect(renderTime).toBeLessThan(5000); // 5 seconds
+      
+      // Should have the trigger button even if dropdown content isn't accessible
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('handles large hierarchical datasets efficiently', () => {
+      const largeHierarchicalItems: NavigationItem[] = Array.from({ length: 100 }, (_, i) => ({
+        id: `parent-${i}`,
+        label: `Parent ${i}`,
+        children: Array.from({ length: 50 }, (_, j) => ({
+          id: `child-${i}-${j}`,
+          label: `Child ${i}-${j}`,
+          href: `/parent-${i}/child-${j}`,
+          icon: 'Info'
+        }))
+      }));
+
+      const startTime = performance.now();
+      
+      const { container } = renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={largeHierarchicalItems}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+      
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+
+      // Should render within reasonable time
+      expect(renderTime).toBeLessThan(2000); // 2 seconds
+      expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+    });
+
+    it('expands large hierarchical sections efficiently', async () => {
+      const largeParentItem: NavigationItem = {
+        id: 'large-parent',
+        label: 'Large Parent',
+        children: Array.from({ length: 500 }, (_, i) => ({
+          id: `child-${i}`,
+          label: `Child ${i}`,
+          href: `/child-${i}`,
+          icon: 'Info'
+        }))
+      };
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={[largeParentItem]}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const parentItem = screen.getByText('Large Parent');
+      
+      const startTime = performance.now();
+      fireEvent.click(parentItem);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Child 0')).toBeInTheDocument();
+        expect(screen.getByText('Child 499')).toBeInTheDocument();
+      });
+
+      const endTime = performance.now();
+      const expandTime = endTime - startTime;
+
+      // Should expand within reasonable time (increased for CI environments)
+      expect(expandTime).toBeLessThan(3000); // 3 seconds (increased from 2)
+    });
+  });
+
+  describe('Memory Usage', () => {
+    it('does not cause memory leaks with repeated renders', () => {
+      const items = Array.from({ length: 50 }, (_, i) => ({
+        id: `item-${i}`,
+        label: `Item ${i}`,
+        href: `/item-${i}`
+      }));
+
+      const startTime = performance.now();
+
+      // Render and unmount multiple times to test for memory leaks
+      for (let i = 0; i < 10; i++) {
+        const { unmount } = renderWithProviders(
+          <TestWrapper>
+            <NavigationMenu
+              items={items}
+              mode="dropdown"
+              onNavigate={mockOnNavigate}
+            />
+          </TestWrapper>
+        );
+        
+        // Verify it renders
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        
+        // Unmount to test cleanup
+        unmount();
+      }
+
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+
+      // Should handle repeated renders efficiently
+      expect(totalTime).toBeLessThan(3000); // 3 seconds for 10 renders
+    });
+
+    it('handles rapid state changes efficiently', async () => {
+      const hierarchicalItems: NavigationItem[] = [
+        {
+          id: 'parent1',
+          label: 'Parent 1',
+          children: Array.from({ length: 10 }, (_, i) => ({
+            id: `child1-${i}`,
+            label: `Child 1-${i}`,
+            href: `/child1-${i}`
+          }))
+        },
+        {
+          id: 'parent2',
+          label: 'Parent 2',
+          children: Array.from({ length: 10 }, (_, i) => ({
+            id: `child2-${i}`,
+            label: `Child 2-${i}`,
+            href: `/child2-${i}`
+          }))
+        }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={hierarchicalItems}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const parent1 = screen.getByText('Parent 1');
+      const parent2 = screen.getByText('Parent 2');
+
+      // Rapidly expand and collapse sections
+      const startTime = performance.now();
+      
+      for (let i = 0; i < 3; i++) {
+        fireEvent.click(parent1);
+        await waitFor(() => expect(screen.getByText('Child 1-0')).toBeInTheDocument());
+        
+        fireEvent.click(parent2);
+        await waitFor(() => expect(screen.getByText('Child 2-0')).toBeInTheDocument());
+        
+        fireEvent.click(parent1);
+        await waitFor(() => expect(screen.queryByText('Child 1-0')).not.toBeInTheDocument());
+        
+        fireEvent.click(parent2);
+        await waitFor(() => expect(screen.queryByText('Child 2-0')).not.toBeInTheDocument());
+      }
+
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+
+      // Should handle rapid changes efficiently
+      expect(totalTime).toBeLessThan(5000); // 5 seconds
+    });
+  });
+
+  describe('Deep Nesting Performance', () => {
+    it('handles deeply nested structures efficiently', () => {
+      const createDeepNestedItem = (depth: number, index: number): NavigationItem => {
+        if (depth === 0) {
+          return {
+            id: `leaf-${index}`,
+            label: `Leaf ${index}`,
+            href: `/leaf-${index}`
+          };
+        }
+        
+        return {
+          id: `level-${depth}-${index}`,
+          label: `Level ${depth} Item ${index}`,
+          children: Array.from({ length: 5 }, (_, i) => createDeepNestedItem(depth - 1, i))
+        };
+      };
+
+      const deepNestedItems: NavigationItem[] = [
+        createDeepNestedItem(5, 0) // 5 levels deep, 5 children per level
+      ];
+
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={deepNestedItems}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+
+      // Should render deep structures efficiently
+      expect(renderTime).toBeLessThan(2000); // 2 seconds
+      expect(screen.getByText('Level 5 Item 0')).toBeInTheDocument();
+    });
+
+    it('expands deep nested structures efficiently', async () => {
+      const createDeepNestedItem = (depth: number): NavigationItem => {
+        if (depth === 0) {
+          return {
+            id: `leaf-${depth}`,
+            label: `Leaf ${depth}`,
+            href: `/leaf-${depth}`
+          };
+        }
+        
+        return {
+          id: `level-${depth}`,
+          label: `Level ${depth}`,
+          children: [createDeepNestedItem(depth - 1)]
+        };
+      };
+
+      const deepNestedItems: NavigationItem[] = [
+        createDeepNestedItem(10) // 10 levels deep
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={deepNestedItems}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      // Expand all levels
+      const startTime = performance.now();
+      
+      for (let i = 10; i > 0; i--) {
+        const levelItem = screen.getByText(`Level ${i}`);
+        fireEvent.click(levelItem);
+        await waitFor(() => {
+          if (i === 1) {
+            expect(screen.getByText('Leaf 0')).toBeInTheDocument();
+          } else {
+            expect(screen.getByText(`Level ${i - 1}`)).toBeInTheDocument();
+          }
+        });
+      }
+
+      const endTime = performance.now();
+      const expandTime = endTime - startTime;
+
+      // Should expand deep structures efficiently
+      expect(expandTime).toBeLessThan(3000); // 3 seconds
+    });
+  });
+
+  describe('Concurrent Operations', () => {
+    it('handles concurrent expand/collapse operations', async () => {
+      const concurrentItems: NavigationItem[] = [
+        {
+          id: 'parent1',
+          label: 'Parent 1',
+          children: Array.from({ length: 50 }, (_, i) => ({
+            id: `child1-${i}`,
+            label: `Child 1-${i}`,
+            href: `/child1-${i}`
+          }))
+        },
+        {
+          id: 'parent2',
+          label: 'Parent 2',
+          children: Array.from({ length: 50 }, (_, i) => ({
+            id: `child2-${i}`,
+            label: `Child 2-${i}`,
+            href: `/child2-${i}`
+          }))
+        }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={concurrentItems}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const parent1 = screen.getByText('Parent 1');
+      const parent2 = screen.getByText('Parent 2');
+
+      // Trigger concurrent operations
+      const startTime = performance.now();
+      
+      // Click both parents almost simultaneously
+      fireEvent.click(parent1);
+      fireEvent.click(parent2);
+
+      await waitFor(() => {
+        expect(screen.getByText('Child 1-0')).toBeInTheDocument();
+        expect(screen.getByText('Child 2-0')).toBeInTheDocument();
+      });
+
+      const endTime = performance.now();
+      const concurrentTime = endTime - startTime;
+
+      // Should handle concurrent operations efficiently
+      expect(concurrentTime).toBeLessThan(1000); // 1 second
+    });
+  });
+describe('NavigationMenu Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('NavigationMenu component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: NavigationMenu component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'NavigationMenu interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('NavigationMenu prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+describe('NavigationMenu Edge Cases', () => {
+  describe('Extreme Data Values', () => {
+    it('should handle very long strings', () => {
+      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
+      
+        const { container } = renderWithProviders(<NavigationMenu items={[]}>{longString}</NavigationMenu>);
+      expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+    });
+
+    it('should handle empty and null values', () => {
+      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
+      
+      emptyValues.forEach(value => {
+          const { container, unmount } = renderWithProviders(<NavigationMenu items={[]}>{value as any}</NavigationMenu>);
+        expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle special characters', () => {
+      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
+      
+        const { container } = renderWithProviders(<NavigationMenu items={[]}>{specialChars}</NavigationMenu>);
+      expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
+      
+      const { container } = renderWithProviders(<NavigationMenu items={[]}>{unicodeChars}</NavigationMenu>);
+      expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+    });
+  });
+
+  describe('Extreme Numbers', () => {
+    it('should handle very large numbers', () => {
+      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
+      
+      largeNumbers.forEach(number => {
+        const { container, unmount } = renderWithProviders(<NavigationMenu items={[]} value={number} />);
+        expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle very small numbers', () => {
+      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
+      
+      smallNumbers.forEach(number => {
+        const { container, unmount } = renderWithProviders(<NavigationMenu items={[]} value={number} />);
+        expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('Rapid State Changes', () => {
+    it('should handle rapid prop changes', async () => {
+      const stateProps = [
+        { items: [], children: 'State 1' },
+        { items: [], children: 'State 2' },
+        { items: [], children: 'State 3' },
+        { items: [], children: 'State 4' },
+        { items: [], children: 'State 5' },
+      ];
+
+      await edgeCaseUtils.testRapidStateChanges(NavigationMenu, stateProps);
+    });
+
+    it('should handle rapid user interactions', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<NavigationMenu items={[]} />);
+      
+      const button = screen.getByRole('button');
+      
+      // Rapidly interact with the component
+      for (let i = 0; i < 10; i++) {
+        await user.click(button);
+        await new Promise(resolve => setTimeout(resolve, 0));
+      }
+      
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should not leak memory with repeated renders', () => {
+      edgeCaseUtils.testMemoryLeaks(NavigationMenu, { items: [], children: 'Memory test' });
+    });
+  });
+
+  describe('Boundary Conditions', () => {
+    it('should handle boundary prop values', () => {
+      const boundaryProps = [
+        { items: [], children: '' },
+        { items: [], children: 0 },
+        { items: [], children: false },
+        { items: [], children: [] },
+        { items: [], className: '' },
+        { items: [], 'data-testid': '' },
+      ];
+
+      edgeCaseUtils.testBoundaryConditions(NavigationMenu, boundaryProps);
+    });
+  });
+
+  describe('Complex Data Structures', () => {
+    it('should handle deeply nested objects', () => {
+      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
+      
+      const { container } = renderWithProviders(<NavigationMenu items={[]} data={deepObject} />);
+      expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+    });
+
+    it('should handle large arrays', () => {
+      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
+      
+      const { container } = renderWithProviders(<NavigationMenu items={largeArray} />);
+      expect(container.querySelector('[data-testid="navigation-menu-root"]') || container.querySelector('nav')).toBeInTheDocument();
+    });
+  });
+});
+});