@jmruthers/pace-core 0.2.4

package/src/components/NavigationMenu/__tests__/NavigationMenu.real.component.test.tsx

@@ -0,0 +1,783 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { screen, waitFor } 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';
+import userEvent from '@testing-library/user-event';
+
+// Mock Radix UI components to avoid complex portal rendering in tests
+        vi.mock('@radix-ui/react-dropdown-menu', async (importOriginal) => {
+          const actual = await importOriginal();
+          return {
+            ...actual,
+            Root: ({ children, open, onOpenChange }: { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }) => {
+              const [isOpen, setIsOpen] = React.useState(open || false);
+
+              const handleOpenChange = (newOpen: boolean) => {
+                setIsOpen(newOpen);
+                onOpenChange?.(newOpen);
+              };
+
+              // Add click outside listener
+              React.useEffect(() => {
+                const handleClickOutside = (event: MouseEvent) => {
+                  const root = document.querySelector('[data-testid="dropdown-root"]');
+                  const outsideElement = document.querySelector('[data-testid="outside-element"]');
+                  
+                  // Check if click is on outside element or any element not inside dropdown
+                  if (root && !root.contains(event.target as Node)) {
+                    handleOpenChange(false);
+                  }
+                };
+
+                if (isOpen) {
+                  // Add listener immediately
+                  document.addEventListener('mousedown', handleClickOutside);
+                }
+
+                return () => {
+                  document.removeEventListener('mousedown', handleClickOutside);
+                };
+              }, [isOpen]);
+
+              return (
+                <div data-testid="dropdown-root" data-state={isOpen ? 'open' : 'closed'}>
+                  {React.Children.map(children, (child) => {
+                    if (React.isValidElement(child)) {
+                      return React.cloneElement(child, {
+                        onOpenChange: handleOpenChange,
+                        isOpen
+                      } as any);
+                    }
+                    return child;
+                  })}
+                </div>
+              );
+            },
+            Trigger: React.forwardRef<HTMLButtonElement, any>(({ children, onClick, disabled, ...props }, ref) => {
+              return (
+                <button
+                  ref={ref}
+                  disabled={disabled}
+                  onClick={(e) => {
+                    if (disabled) return;
+                    onClick?.(e);
+                    // Toggle open state
+                    const root = e.currentTarget.closest('[data-testid="dropdown-root"]');
+                    if (root) {
+                      const currentState = root.getAttribute('data-state');
+                      const newState = currentState === 'open' ? 'closed' : 'open';
+                      root.setAttribute('data-state', newState);
+                      // Also update the internal state
+                      const event = new CustomEvent('openChange', { detail: newState === 'open' });
+                      root.dispatchEvent(event);
+                    }
+                  }}
+                  {...props}
+                >
+                  {children}
+                </button>
+              );
+            }),
+            Content: ({ children, ...props }: { children: React.ReactNode }) => {
+              const root = document.querySelector('[data-testid="dropdown-root"]');
+              const isOpen = root?.getAttribute('data-state') === 'open';
+              
+              return (
+                <div
+                  role="menu"
+                  data-testid="dropdown-content"
+                  style={{ display: isOpen ? 'block' : 'none' }}
+                  {...props}
+                >
+                  {children}
+                </div>
+              );
+            },
+            Item: ({ children, onClick, ...props }: { children: React.ReactNode; onClick?: () => void }) => {
+              return (
+                <div
+                  role="menuitem"
+                  onClick={onClick}
+                  data-testid="dropdown-item"
+                  {...props}
+                >
+                  {children}
+                </div>
+              );
+            },
+            Portal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+          };
+        });
+
+describe('NavigationMenu Real Component Tests', () => {
+  const mockOnNavigate = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Real Component Rendering', () => {
+    it('renders the actual NavigationMenu component in dropdown mode', () => {
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+        { id: 'about', label: 'About', href: '/about', icon: 'Info' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="dropdown"
+            onNavigate={mockOnNavigate}
+            buttonText="Main Menu"
+          />
+        </TestWrapper>
+      );
+
+      // Check for actual component elements
+      expect(screen.getByTestId('navigation-menu-root')).toBeInTheDocument();
+      const button = screen.getByTestId('navigation-menu-trigger');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveTextContent('Main Menu');
+    });
+
+    it('renders the actual NavigationMenu component in hierarchical mode', () => {
+      const items: NavigationItem[] = [
+        { 
+          id: 'parent', 
+          label: 'Parent', 
+          icon: 'Home',
+          children: [
+            { id: 'child', label: 'Child', href: '/child', icon: 'Info' }
+          ]
+        }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+            navigationLabel="Test Navigation"
+          />
+        </TestWrapper>
+      );
+
+      // Check for actual component elements
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+      expect(screen.getByRole('navigation')).toHaveAttribute('aria-label', 'Test Navigation');
+      expect(screen.getByText('Parent')).toBeInTheDocument();
+    });
+
+    it('handles click events on dropdown items', async () => {
+      const user = userEvent.setup();
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+        { id: 'about', label: 'About', href: '/about', icon: 'Info' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="dropdown"
+            onNavigate={mockOnNavigate}
+            buttonText="Menu"
+          />
+        </TestWrapper>
+      );
+
+      // Click the dropdown button to open
+      const button = screen.getByTestId('navigation-menu-trigger');
+      expect(button).toBeInTheDocument();
+      await user.click(button!);
+
+      // Wait for dropdown to open and items to be visible
+      await waitFor(() => {
+        expect(screen.getByText('Home')).toBeInTheDocument();
+        expect(screen.getByText('About')).toBeInTheDocument();
+      });
+
+      // Click on a menu item
+      const homeItem = screen.getByText('Home');
+      await user.click(homeItem);
+
+      expect(mockOnNavigate).toHaveBeenCalledWith(items[0]);
+    });
+
+    it('handles click events on hierarchical items', async () => {
+      const user = userEvent.setup();
+      const items: NavigationItem[] = [
+        { 
+          id: 'parent', 
+          label: 'Parent', 
+          icon: 'Home',
+          children: [
+            { id: 'child', label: 'Child', href: '/child', icon: 'Info' }
+          ]
+        },
+        { id: 'direct', label: 'Direct Link', href: '/direct', icon: 'Settings' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      // Click on parent to expand
+      const parentButton = screen.getByRole('button', { name: /parent/i });
+      await user.click(parentButton);
+
+      // Wait for child to appear
+      await waitFor(() => {
+        expect(screen.getByText('Child')).toBeInTheDocument();
+      });
+
+      // Click on child item
+      const childLink = screen.getByRole('menuitem', { name: /child/i });
+      await user.click(childLink);
+
+      expect(mockOnNavigate).toHaveBeenCalledWith(items[0].children![0]);
+
+      // Click on direct link
+      const directLink = screen.getByRole('menuitem', { name: /direct link/i });
+      await user.click(directLink);
+
+      expect(mockOnNavigate).toHaveBeenCalledWith(items[1]);
+    });
+  });
+
+  describe('Active State Detection', () => {
+    it('correctly identifies active items based on currentPath', () => {
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+        { id: 'about', label: 'About', href: '/about', icon: 'Info' },
+        { id: 'contact', label: 'Contact', href: '/contact', icon: 'Mail' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            currentPath="/about"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      // The about link should be marked as active
+      const aboutLink = screen.getByRole('menuitem', { name: /about/i });
+      expect(aboutLink).toHaveAttribute('aria-current', 'page');
+    });
+
+    it('handles isActive override in items', () => {
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home', isActive: false },
+        { id: 'about', label: 'About', href: '/about', icon: 'Info', isActive: true },
+        { id: 'contact', label: 'Contact', href: '/contact', icon: 'Mail' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            currentPath="/" // This would normally make home active
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      // About should be active due to isActive override
+      const aboutLink = screen.getByRole('menuitem', { name: /about/i });
+      expect(aboutLink).toHaveAttribute('aria-current', 'page');
+
+      // Home should not be active despite currentPath
+      const homeLink = screen.getByRole('menuitem', { name: /home/i });
+      expect(homeLink).not.toHaveAttribute('aria-current', 'page');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('handles keyboard navigation in hierarchical mode', async () => {
+      const user = userEvent.setup();
+      const items: NavigationItem[] = [
+        { 
+          id: 'parent', 
+          label: 'Parent', 
+          icon: 'Home',
+          children: [
+            { id: 'child1', label: 'Child 1', href: '/child1', icon: 'Info' },
+            { id: 'child2', label: 'Child 2', href: '/child2', icon: 'Settings' }
+          ]
+        }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const parentButton = screen.getByRole('button', { name: /parent/i });
+      
+      // Focus and press Enter
+      parentButton.focus();
+      await user.keyboard('{Enter}');
+
+      // Wait for children to appear
+      await waitFor(() => {
+        expect(screen.getByText('Child 1')).toBeInTheDocument();
+        expect(screen.getByText('Child 2')).toBeInTheDocument();
+      });
+
+      // Press Escape to collapse
+      await user.keyboard('{Escape}');
+
+      // Children should be hidden
+      await waitFor(() => {
+        expect(screen.queryByText('Child 1')).not.toBeInTheDocument();
+        expect(screen.queryByText('Child 2')).not.toBeInTheDocument();
+      });
+    });
+
+    it('handles Space key for expanding items', async () => {
+      const user = userEvent.setup();
+      const items: NavigationItem[] = [
+        { 
+          id: 'parent', 
+          label: 'Parent', 
+          icon: 'Home',
+          children: [
+            { id: 'child', label: 'Child', href: '/child', icon: 'Info' }
+          ]
+        }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const parentButton = screen.getByRole('button', { name: /parent/i });
+      
+      // Focus and press Space
+      parentButton.focus();
+      await user.keyboard(' ');
+
+      // Wait for child to appear
+      await waitFor(() => {
+        expect(screen.getByText('Child')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Click Outside Behavior', () => {
+    it('closes dropdown when clicking outside', async () => {
+      const user = userEvent.setup();
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <div>
+            <NavigationMenu
+              items={items}
+              mode="dropdown"
+              onNavigate={mockOnNavigate}
+              buttonText="Menu"
+            />
+            <div data-testid="outside-element">Outside Element</div>
+          </div>
+        </TestWrapper>
+      );
+
+      // Open dropdown
+      const button = screen.getByTestId('navigation-menu-trigger');
+      expect(button).toBeInTheDocument();
+      await user.click(button!);
+
+      await waitFor(() => {
+        expect(screen.getByText('Home')).toBeInTheDocument();
+      });
+
+      // Click outside
+      const outsideElement = screen.getByTestId('outside-element');
+      await user.click(outsideElement);
+
+      // Dropdown should close - check that content is not in document
+      await waitFor(() => {
+        expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('disables dropdown when disabled prop is true', () => {
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="dropdown"
+            disabled={true}
+            onNavigate={mockOnNavigate}
+            buttonText="Menu"
+          />
+        </TestWrapper>
+      );
+
+      const button = screen.getByTestId('navigation-menu-trigger');
+      expect(button).toBeInTheDocument();
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Custom Styling', () => {
+    it('applies custom className correctly', () => {
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            className="custom-navigation-class"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('custom-navigation-class');
+    });
+  });
+
+  describe('Icon Rendering', () => {
+    it('renders icons correctly in both modes', () => {
+      const items: NavigationItem[] = [
+        { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+        { 
+          id: 'parent', 
+          label: 'Parent', 
+          icon: 'Settings',
+          children: [
+            { id: 'child', label: 'Child', href: '/child', icon: 'Info' }
+          ]
+        }
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={items}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      // Icons should be rendered (we can't easily test the actual icon components in this test)
+      expect(screen.getByText('Home')).toBeInTheDocument();
+      expect(screen.getByText('Parent')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Boundaries', () => {
+    it('handles errors gracefully without crashing', () => {
+      const problematicItems: NavigationItem[] = [
+        { id: 'valid', label: 'Valid Item', href: '/valid', icon: 'Home' },
+        { id: 'problematic', label: 'Problematic Item', href: '/problematic', icon: 'NonExistentIcon' as any }
+      ];
+
+      expect(() => {
+        renderWithProviders(
+          <TestWrapper>
+            <NavigationMenu
+              items={problematicItems}
+              mode="hierarchical"
+              onNavigate={mockOnNavigate}
+            />
+          </TestWrapper>
+        );
+      }).not.toThrow();
+
+      expect(screen.getByText('Valid Item')).toBeInTheDocument();
+      expect(screen.getByText('Problematic Item')).toBeInTheDocument();
+    });
+  });
+
+  describe('Performance with Real Component', () => {
+    it('renders large datasets efficiently', () => {
+      const largeItems: NavigationItem[] = Array.from({ length: 100 }, (_, i) => ({
+        id: `item-${i}`,
+        label: `Item ${i}`,
+        href: `/item-${i}`,
+        icon: 'Home'
+      }));
+
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <TestWrapper>
+          <NavigationMenu
+            items={largeItems}
+            mode="hierarchical"
+            onNavigate={mockOnNavigate}
+          />
+        </TestWrapper>
+      );
+
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+
+      // Should render within reasonable time
+      expect(renderTime).toBeLessThan(2000);
+      expect(screen.getByText('Item 0')).toBeInTheDocument();
+      expect(screen.getByText('Item 99')).toBeInTheDocument();
+    });
+  });
+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('combobox');
+      
+      // 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();
+    });
+  });
+});
+});