@jmruthers/pace-core 0.6.8 → 0.6.10

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

@@ -200,7 +200,7 @@ describe('NavigationMenu Component', () => {
 
   // Basic rendering tests
   describe('Rendering', () => {
-    it('renders dropdown mode by default', () => {
+    it('renders dropdown mode by default with button text', () => {
       renderWithProviders(
         <NavigationMenu
           items={basicNavItems}
@@ -213,46 +213,22 @@ describe('NavigationMenu Component', () => {
       expect(screen.getByText('Main Menu')).toBeInTheDocument();
     });
 
-    it('renders hierarchical mode when specified', () => {
+    it('renders hierarchical mode with proper ARIA structure', () => {
       renderWithProviders(
         <NavigationMenu
           items={hierarchicalNavItems}
           mode="hierarchical"
           onNavigate={mockNavigate}
+          navigationLabel="Custom Navigation"
         />
       );
 
       expect(screen.getByRole('navigation')).toBeInTheDocument();
       expect(screen.getByRole('menubar')).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(
-        <NavigationMenu
-          items={basicNavItems}
-          onNavigate={mockNavigate}
-          className="custom-nav-class"
-        />
-      );
-
-      const navElement = screen.getByRole('combobox').closest('.custom-nav-class');
-      expect(navElement).toBeInTheDocument();
-    });
-
-    it('renders with custom navigation label', () => {
-      renderWithProviders(
-        <NavigationMenu
-          items={basicNavItems}
-          mode="hierarchical"
-          onNavigate={mockNavigate}
-          navigationLabel="Custom Navigation"
-        />
-      );
-
       expect(screen.getByLabelText('Custom Navigation')).toBeInTheDocument();
     });
 
-    it('omits items marked as hidden via metadata', async () => {
+    it('applies custom className and omits hidden items', async () => {
       const user = userEvent.setup();
       const hiddenItems: NavigationItem[] = [
         { id: 'home', label: 'Home', href: '/' },
@@ -263,10 +239,14 @@ describe('NavigationMenu Component', () => {
         <NavigationMenu
           items={hiddenItems}
           onNavigate={mockNavigate}
+          className="custom-nav-class"
           buttonText="Menu"
         />
       );
 
+      const navElement = screen.getByRole('combobox').closest('.custom-nav-class');
+      expect(navElement).toBeInTheDocument();
+
       await user.click(screen.getByRole('combobox'));
       await waitFor(() => {
         expect(screen.getByText('Home')).toBeInTheDocument();
@@ -278,20 +258,7 @@ describe('NavigationMenu Component', () => {
 
   // Dropdown mode tests
   describe('Dropdown Mode', () => {
-    it('renders dropdown trigger with button text', () => {
-      renderWithProviders(
-        <NavigationMenu
-          items={basicNavItems}
-          onNavigate={mockNavigate}
-          buttonText="Custom Menu"
-        />
-      );
-
-      expect(screen.getByRole('combobox')).toBeInTheDocument();
-      expect(screen.getByText('Custom Menu')).toBeInTheDocument();
-    });
-
-    it('renders all navigation items in dropdown', async () => {
+    it('renders all navigation items and handles selection', async () => {
       const user = userEvent.setup();
       renderWithProviders(
         <NavigationMenu
@@ -309,24 +276,6 @@ describe('NavigationMenu Component', () => {
         expect(screen.getByText('Dashboard')).toBeInTheDocument();
         expect(screen.getByText('Settings')).toBeInTheDocument();
       }, { interval: 10 });
-    });
-
-    it('handles navigation item selection', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(
-        <NavigationMenu
-          items={basicNavItems}
-          onNavigate={mockNavigate}
-          buttonText="Menu"
-        />
-      );
-
-      const trigger = screen.getByRole('combobox');
-      await user.click(trigger);
-
-      await waitFor(() => {
-        expect(screen.getByText('Dashboard')).toBeInTheDocument();
-      }, { interval: 10 });
 
       const dashboardItem = screen.getByText('Dashboard');
       await user.click(dashboardItem);
@@ -354,26 +303,6 @@ describe('NavigationMenu Component', () => {
       expect(trigger).toBeDisabled();
     });
 
-    it('highlights active item based on currentPath', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(
-        <NavigationMenu
-          items={basicNavItems}
-          onNavigate={mockNavigate}
-          currentPath="/dashboard"
-          buttonText="Menu"
-        />
-      );
-
-      const trigger = screen.getByRole('combobox');
-      await user.click(trigger);
-
-      await waitFor(() => {
-        const dashboardItem = screen.getByText('Dashboard');
-        expect(dashboardItem).toBeInTheDocument();
-      }, { interval: 10 });
-    });
-
     it('trusts pre-filtered items while still hiding meta-hidden entries', async () => {
       const user = userEvent.setup();
 
@@ -728,6 +657,34 @@ describe('NavigationMenu Component', () => {
       );
     });
 
+    it('allows navigation when auth context is unavailable', async () => {
+      const user = userEvent.setup();
+      mockUseUnifiedAuthFn.mockImplementationOnce(() => null as any);
+
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+          itemsPreFiltered={true}
+        />
+      );
+
+      const trigger = screen.getByRole('combobox');
+      await user.click(trigger);
+
+      const homeItem = await screen.findByRole('option', { name: 'Home' });
+      await user.click(homeItem);
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'home',
+          label: 'Home',
+          href: '/',
+        })
+      );
+    });
+
     it('handles navigation without onNavigate callback', async () => {
       const user = userEvent.setup();
       // Mock window.location.href
@@ -1409,8 +1366,8 @@ describe('NavigationMenu Component', () => {
       // Since hooks are now unconditional, they will throw if providers are missing
       // The component should be wrapped in an error boundary in real apps
       // For this test, we expect it to throw, which should be caught by error boundaries
-      mockUseUnifiedAuthFn.mockImplementation(() => { throw new Error('no auth'); });
-      mockUseRBAC.mockImplementation(() => { throw new Error('no rbac'); });
+      mockUseUnifiedAuthFn.mockImplementationOnce(() => { throw new Error('no auth'); });
+      mockUseRBAC.mockImplementationOnce(() => { throw new Error('no rbac'); });
 
       mockUsePermissions.mockReturnValue({
         permissions: { '*': true } as any,
@@ -1534,4 +1491,1364 @@ describe('NavigationMenu Component', () => {
       );
     });
   });
+
+  describe('Deeply Nested Hierarchical Items', () => {
+    it('renders and expands 3+ level nested items', async () => {
+      const user = userEvent.setup();
+      const deeplyNestedItems: NavigationItem[] = [
+        {
+          id: 'level1',
+          label: 'Level 1',
+          children: [
+            {
+              id: 'level2',
+              label: 'Level 2',
+              children: [
+                {
+                  id: 'level3',
+                  label: 'Level 3',
+                  children: [
+                    { id: 'level4', label: 'Level 4', href: '/level4' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={deeplyNestedItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Expand level 1
+      const level1 = screen.getByRole('button', { name: /Level 1/i });
+      await user.click(level1);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Level 2/i })).toBeInTheDocument();
+      });
+
+      // Expand level 2
+      const level2 = screen.getByRole('button', { name: /Level 2/i });
+      await user.click(level2);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Level 3/i })).toBeInTheDocument();
+      });
+
+      // Expand level 3
+      const level3 = screen.getByRole('button', { name: /Level 3/i });
+      await user.click(level3);
+
+      await waitFor(() => {
+        expect(screen.getByText('Level 4')).toBeInTheDocument();
+      });
+    });
+
+    it('handles keyboard navigation in deeply nested structures', async () => {
+      const user = userEvent.setup();
+      const deeplyNestedItems: NavigationItem[] = [
+        {
+          id: 'level1',
+          label: 'Level 1',
+          children: [
+            {
+              id: 'level2',
+              label: 'Level 2',
+              children: [
+                { id: 'level3', label: 'Level 3', href: '/level3' },
+              ],
+            },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={deeplyNestedItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Navigate with keyboard
+      const level1 = screen.getByRole('button', { name: /Level 1/i });
+      level1.focus();
+      await user.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Level 2/i })).toBeInTheDocument();
+      });
+
+      const level2 = screen.getByRole('button', { name: /Level 2/i });
+      level2.focus();
+      await user.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(screen.getByText('Level 3')).toBeInTheDocument();
+      });
+    });
+
+    it('highlights active items in deeply nested structures', async () => {
+      const user = userEvent.setup();
+      const deeplyNestedItems: NavigationItem[] = [
+        {
+          id: 'level1',
+          label: 'Level 1',
+          children: [
+            {
+              id: 'level2',
+              label: 'Level 2',
+              children: [
+                { id: 'level3', label: 'Level 3', href: '/level3' },
+              ],
+            },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={deeplyNestedItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          currentPath="/level3"
+        />
+      );
+
+      // Expand all levels
+      const level1 = screen.getByRole('button', { name: /Level 1/i });
+      await user.click(level1);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Level 2/i })).toBeInTheDocument();
+      });
+
+      const level2 = screen.getByRole('button', { name: /Level 2/i });
+      await user.click(level2);
+
+      await waitFor(() => {
+        const level3 = screen.getByText('Level 3');
+        expect(level3).toBeInTheDocument();
+        // Active item should be highlighted
+        expect(level3.closest('a') || level3.closest('button')).toHaveAttribute('aria-current', 'page');
+      });
+    });
+  });
+
+  describe('Items with Both href and children', () => {
+    it('renders parent item with href and expandable children', async () => {
+      const user = userEvent.setup();
+      const itemsWithHrefAndChildren: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          href: '/parent',
+          children: [
+            { id: 'child1', label: 'Child 1', href: '/child1' },
+            { id: 'child2', label: 'Child 2', href: '/child2' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithHrefAndChildren}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // In hierarchical mode, items with children are rendered as buttons for expansion
+      const parent = screen.getByRole('button', { name: /Parent/i });
+      expect(parent).toBeInTheDocument();
+
+      // Parent should be expandable
+      await user.click(parent);
+
+      await waitFor(() => {
+        expect(screen.getByText('Child 1')).toBeInTheDocument();
+        expect(screen.getByText('Child 2')).toBeInTheDocument();
+      });
+    });
+
+    it('handles navigation for parent href', async () => {
+      const user = userEvent.setup();
+      const itemsWithHrefAndChildren: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          href: '/parent',
+          children: [
+            { id: 'child1', label: 'Child 1', href: '/child1' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithHrefAndChildren}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // In hierarchical mode, items with children are buttons
+      // Clicking the button should trigger navigation if href exists
+      const parentButton = screen.getByRole('button', { name: /Parent/i });
+      await user.click(parentButton);
+
+      // The component should handle navigation for items with href
+      // Note: The actual behavior depends on component implementation
+      // If the component supports clicking to navigate when href exists,
+      // mockNavigate should be called. Otherwise, it may only expand.
+      // For now, we verify the button exists and is clickable
+      expect(parentButton).toBeInTheDocument();
+    });
+
+    it('handles expansion for children', async () => {
+      const user = userEvent.setup();
+      const itemsWithHrefAndChildren: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          href: '/parent',
+          children: [
+            { id: 'child1', label: 'Child 1', href: '/child1' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithHrefAndChildren}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Click expand button (not link)
+      const expandButton = screen.getByRole('button', { name: /Parent/i });
+      await user.click(expandButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Child 1')).toBeInTheDocument();
+      });
+
+      // Click child
+      const child = screen.getByText('Child 1');
+      await user.click(child);
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'child1',
+          href: '/child1',
+        })
+      );
+    });
+  });
+
+  describe('Page ID Handling', () => {
+    it('uses explicit pageId when provided', async () => {
+      const user = userEvent.setup();
+      const itemsWithPageId: NavigationItem[] = [
+        { id: 'custom', label: 'Custom', href: '/custom-path', pageId: 'custom-page' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithPageId}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Custom' })).toBeInTheDocument();
+      });
+
+      const customItem = screen.getByRole('option', { name: 'Custom' });
+      await user.click(customItem);
+
+      // Navigation should use the item data which includes pageId
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'custom',
+          href: '/custom-path',
+          pageId: 'custom-page',
+        })
+      );
+    });
+
+    it('derives pageId from href when pageId not provided', async () => {
+      const user = userEvent.setup();
+      const itemsWithoutPageId: NavigationItem[] = [
+        { id: 'derived', label: 'Derived', href: '/dashboard' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithoutPageId}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Derived' })).toBeInTheDocument();
+      });
+
+      // The hook derives pageId from href (dashboard -> read:page.dashboard)
+      // Navigation should work correctly
+      const derivedItem = screen.getByRole('option', { name: 'Derived' });
+      await user.click(derivedItem);
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'derived',
+          href: '/dashboard',
+        })
+      );
+    });
+
+    it('handles complex hrefs with query params and hash', async () => {
+      const user = userEvent.setup();
+      const itemsWithComplexHref: NavigationItem[] = [
+        { id: 'complex', label: 'Complex', href: '/page?param=value#hash' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithComplexHref}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Complex' })).toBeInTheDocument();
+      });
+
+      const complexItem = screen.getByRole('option', { name: 'Complex' });
+      await user.click(complexItem);
+
+      // Navigation should preserve the full href
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'complex',
+          href: '/page?param=value#hash',
+        })
+      );
+    });
+  });
+
+  describe('Multiple Expanded Items', () => {
+    it('expands multiple hierarchical items simultaneously', async () => {
+      const user = userEvent.setup();
+      const multipleExpandableItems: NavigationItem[] = [
+        {
+          id: 'section1',
+          label: 'Section 1',
+          children: [
+            { id: 'item1', label: 'Item 1', href: '/item1' },
+          ],
+        },
+        {
+          id: 'section2',
+          label: 'Section 2',
+          children: [
+            { id: 'item2', label: 'Item 2', href: '/item2' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={multipleExpandableItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Expand first section
+      const section1 = screen.getByRole('button', { name: /Section 1/i });
+      await user.click(section1);
+
+      await waitFor(() => {
+        expect(screen.getByText('Item 1')).toBeInTheDocument();
+      });
+
+      // Expand second section (first should remain expanded)
+      const section2 = screen.getByRole('button', { name: /Section 2/i });
+      await user.click(section2);
+
+      await waitFor(() => {
+        expect(screen.getByText('Item 2')).toBeInTheDocument();
+        // First section should still be expanded
+        expect(screen.getByText('Item 1')).toBeInTheDocument();
+      });
+    });
+
+    it('collapses one while keeping others expanded', async () => {
+      const user = userEvent.setup();
+      const multipleExpandableItems: NavigationItem[] = [
+        {
+          id: 'section1',
+          label: 'Section 1',
+          children: [
+            { id: 'item1', label: 'Item 1', href: '/item1' },
+          ],
+        },
+        {
+          id: 'section2',
+          label: 'Section 2',
+          children: [
+            { id: 'item2', label: 'Item 2', href: '/item2' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={multipleExpandableItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Expand both sections
+      const section1 = screen.getByRole('button', { name: /Section 1/i });
+      await user.click(section1);
+
+      const section2 = screen.getByRole('button', { name: /Section 2/i });
+      await user.click(section2);
+
+      await waitFor(() => {
+        expect(screen.getByText('Item 1')).toBeInTheDocument();
+        expect(screen.getByText('Item 2')).toBeInTheDocument();
+      });
+
+      // Collapse first section
+      await user.click(section1);
+
+      await waitFor(() => {
+        // First section should be collapsed
+        expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+        // Second section should still be expanded
+        expect(screen.getByText('Item 2')).toBeInTheDocument();
+      });
+    });
+
+    it('handles keyboard navigation across multiple expanded sections', async () => {
+      const user = userEvent.setup();
+      const multipleExpandableItems: NavigationItem[] = [
+        {
+          id: 'section1',
+          label: 'Section 1',
+          children: [
+            { id: 'item1', label: 'Item 1', href: '/item1' },
+          ],
+        },
+        {
+          id: 'section2',
+          label: 'Section 2',
+          children: [
+            { id: 'item2', label: 'Item 2', href: '/item2' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={multipleExpandableItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Expand both sections with keyboard
+      const section1 = screen.getByRole('button', { name: /Section 1/i });
+      section1.focus();
+      await user.keyboard('{Enter}');
+
+      const section2 = screen.getByRole('button', { name: /Section 2/i });
+      section2.focus();
+      await user.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(screen.getByText('Item 1')).toBeInTheDocument();
+        expect(screen.getByText('Item 2')).toBeInTheDocument();
+      });
+
+      // Navigate to item in first section
+      const item1 = screen.getByText('Item 1');
+      item1.focus();
+      await user.keyboard('{Enter}');
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'item1',
+          href: '/item1',
+        })
+      );
+    });
+  });
+
+  describe('Permission Edge Cases', () => {
+    it('handles rapid permission state changes gracefully', async () => {
+      const user = userEvent.setup();
+      const { rerender } = renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+          itemsPreFiltered={true}
+        />
+      );
+
+      // Start with permissions
+      mockUsePermissions.mockReturnValue({
+        permissions: { '*': true } as any,
+        isLoading: false,
+        error: null,
+        hasPermission: vi.fn(() => true),
+        hasAnyPermission: vi.fn(() => true),
+        hasAllPermissions: vi.fn(() => true),
+        refetch: vi.fn(),
+      });
+
+      // Open menu
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Home' })).toBeInTheDocument();
+      }, { interval: 10 });
+
+      // Rapidly change permissions to loading
+      mockUsePermissions.mockReturnValue({
+        permissions: { '*': true } as any,
+        isLoading: true,
+        error: null,
+        hasPermission: vi.fn(() => true),
+        hasAnyPermission: vi.fn(() => true),
+        hasAllPermissions: vi.fn(() => true),
+        refetch: vi.fn(),
+      });
+
+      rerender(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+          itemsPreFiltered={true}
+        />
+      );
+
+      // Change back to loaded
+      mockUsePermissions.mockReturnValue({
+        permissions: { '*': true } as any,
+        isLoading: false,
+        error: null,
+        hasPermission: vi.fn(() => true),
+        hasAnyPermission: vi.fn(() => true),
+        hasAllPermissions: vi.fn(() => true),
+        refetch: vi.fn(),
+      });
+
+      rerender(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+          itemsPreFiltered={true}
+        />
+      );
+
+      // Component should handle rapid changes without crashing
+      await waitFor(() => {
+        const combobox = screen.getByRole('combobox');
+        expect(combobox).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Current Path Matching', () => {
+    it('matches exact current path in dropdown mode', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          currentPath="/dashboard"
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        const dashboardItem = screen.getByText('Dashboard');
+        expect(dashboardItem).toBeInTheDocument();
+      }, { interval: 10 });
+    });
+
+    it('matches current path in hierarchical mode with nested items', () => {
+      const nestedItems: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          children: [
+            { id: 'child1', label: 'Child 1', href: '/parent/child1' },
+            { id: 'child2', label: 'Child 2', href: '/parent/child2' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={nestedItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          currentPath="/parent/child1"
+        />
+      );
+
+      const parentButton = screen.getByRole('button', { name: /Parent/i });
+      expect(parentButton).toHaveAttribute('aria-current', 'page');
+    });
+
+    it('does not match partial path segments', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          currentPath="/dashboard-settings"
+        />
+      );
+
+      // Should not match /dashboard when currentPath is /dashboard-settings
+      const dashboardLink = screen.queryByText('Dashboard');
+      if (dashboardLink) {
+        expect(dashboardLink.closest('a')).not.toHaveAttribute('aria-current', 'page');
+      }
+    });
+
+    it('handles root path (/) correctly', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          currentPath="/"
+        />
+      );
+
+      const homeLink = screen.getByText('Home');
+      expect(homeLink.closest('a')).toHaveAttribute('aria-current', 'page');
+    });
+
+    it('handles undefined currentPath gracefully', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Should render without errors
+      expect(screen.getByText('Home')).toBeInTheDocument();
+    });
+
+    it('matches current path exactly (case-sensitive)', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          currentPath="/dashboard"
+        />
+      );
+
+      // Case-sensitive matching - exact match works
+      const dashboardLink = screen.getByText('Dashboard');
+      expect(dashboardLink.closest('a')).toHaveAttribute('aria-current', 'page');
+    });
+  });
+
+  describe('Ref Forwarding', () => {
+    it('forwards ref correctly in hierarchical mode', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      renderWithProviders(
+        <NavigationMenu
+          ref={ref}
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLElement);
+      expect(ref.current?.tagName).toBe('NAV');
+    });
+
+    it('ref is null when component unmounts', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      const { unmount } = renderWithProviders(
+        <NavigationMenu
+          ref={ref}
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLElement);
+      unmount();
+      expect(ref.current).toBeNull();
+    });
+
+    it('does not forward ref in dropdown mode (Select component handles it)', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      renderWithProviders(
+        <NavigationMenu
+          ref={ref}
+          items={basicNavItems}
+          mode="dropdown"
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      // In dropdown mode, ref is not used (Select component handles its own ref)
+      // The ref should still be set to the root element if possible
+      expect(ref.current).toBeDefined();
+    });
+  });
+
+  describe('Disabled State Interactions', () => {
+    it('disables dropdown trigger when disabled prop is true', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          disabled={true}
+          buttonText="Menu"
+        />
+      );
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toBeDisabled();
+    });
+
+    it('allows interaction when not disabled', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          disabled={false}
+          buttonText="Menu"
+        />
+      );
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).not.toBeDisabled();
+
+      await user.click(trigger);
+      await waitFor(() => {
+        expect(screen.getByText('Home')).toBeInTheDocument();
+      }, { interval: 10 });
+    });
+
+    it('handles disabled state change dynamically', async () => {
+      const user = userEvent.setup();
+      const { rerender } = renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          disabled={false}
+          buttonText="Menu"
+        />
+      );
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).not.toBeDisabled();
+
+      // Change to disabled
+      rerender(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          disabled={true}
+          buttonText="Menu"
+        />
+      );
+
+      expect(trigger).toBeDisabled();
+    });
+  });
+
+  describe('ClassName and Props Spreading', () => {
+    it('applies custom className in dropdown mode', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          className="custom-dropdown-class"
+          buttonText="Menu"
+        />
+      );
+
+      const selectRoot = screen.getByTestId('select-root');
+      expect(selectRoot).toHaveClass('custom-dropdown-class');
+    });
+
+    it('applies custom className in hierarchical mode', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          className="custom-hierarchical-class"
+        />
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('custom-hierarchical-class');
+    });
+
+    it('spreads additional props to nav element in hierarchical mode', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          data-testid="custom-nav"
+          aria-label="Custom Navigation"
+        />
+      );
+
+      const nav = screen.getByTestId('custom-nav');
+      expect(nav).toHaveAttribute('aria-label', 'Custom Navigation');
+    });
+
+    it('applies multiple classNames correctly', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          className="class1 class2 class3"
+        />
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('class1');
+      expect(nav).toHaveClass('class2');
+      expect(nav).toHaveClass('class3');
+    });
+  });
+
+  describe('Navigation Label', () => {
+    it('uses default navigationLabel when not provided', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('aria-label', 'Main navigation');
+    });
+
+    it('uses custom navigationLabel when provided', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+          navigationLabel="Custom Navigation Label"
+        />
+      );
+
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveAttribute('aria-label', 'Custom Navigation Label');
+    });
+
+    it('navigationLabel does not affect dropdown mode', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          mode="dropdown"
+          onNavigate={mockNavigate}
+          navigationLabel="Should not appear"
+          buttonText="Menu"
+        />
+      );
+
+      // navigationLabel is only used in hierarchical mode
+      expect(screen.queryByLabelText('Should not appear')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Empty and Edge Case Items', () => {
+    it('handles items with empty label', async () => {
+      const user = userEvent.setup();
+      const itemsWithEmptyLabel: NavigationItem[] = [
+        { id: 'empty', label: '', href: '/empty' },
+        { id: 'normal', label: 'Normal', href: '/normal' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithEmptyLabel}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        expect(screen.getByText('Normal')).toBeInTheDocument();
+      }, { interval: 10 });
+    });
+
+    it('handles items with null href', async () => {
+      const user = userEvent.setup();
+      const itemsWithNullHref: NavigationItem[] = [
+        { id: 'no-href', label: 'No Href' },
+        { id: 'with-href', label: 'With Href', href: '/with-href' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithNullHref}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        const noHrefItem = screen.getByText('No Href');
+        expect(noHrefItem.closest('[role="option"]')).toHaveAttribute('data-disabled', 'true');
+      }, { interval: 10 });
+    });
+
+    it('handles items array with duplicate IDs gracefully', async () => {
+      const user = userEvent.setup();
+      const duplicateItems: NavigationItem[] = [
+        { id: 'duplicate', label: 'First', href: '/first' },
+        { id: 'duplicate', label: 'Second', href: '/second' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={duplicateItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        // Both items should render (React will use key for rendering)
+        // Use getAllByText since there are duplicates
+        const firstItems = screen.getAllByText('First');
+        const secondItems = screen.getAllByText('Second');
+        expect(firstItems.length).toBeGreaterThan(0);
+        expect(secondItems.length).toBeGreaterThan(0);
+      }, { interval: 10 });
+    });
+
+    it('handles items with very long labels', async () => {
+      const user = userEvent.setup();
+      const longLabelItems: NavigationItem[] = [
+        { id: 'long', label: 'A'.repeat(1000), href: '/long' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={longLabelItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        expect(screen.getByText('A'.repeat(1000))).toBeInTheDocument();
+      }, { interval: 10 });
+    });
+
+    it('handles items with special characters in labels', async () => {
+      const user = userEvent.setup();
+      const specialCharItems: NavigationItem[] = [
+        { id: 'special', label: 'Item & <Special> "Chars"', href: '/special' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={specialCharItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        expect(screen.getByText('Item & <Special> "Chars"')).toBeInTheDocument();
+      }, { interval: 10 });
+    });
+  });
+
+  describe('Hierarchical Mode Edge Cases', () => {
+    it('handles hierarchical item with empty children array', () => {
+      const itemsWithEmptyChildren: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          children: [],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithEmptyChildren}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Items with empty children array are rendered as buttons
+      // But the component checks hasChildren which is false for empty array
+      // So it might render as a link or not render at all
+      // Let's check that the component renders without crashing
+      expect(screen.getByText('Parent')).toBeInTheDocument();
+    });
+
+    it('handles hierarchical item with only hidden children', async () => {
+      const user = userEvent.setup();
+      // Note: Hidden children are filtered by useNavigationFiltering hook
+      // So by the time items reach the component, hidden children are already removed
+      // This test verifies the component handles items with no visible children
+      const itemsWithHiddenChildren: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          // Children are already filtered out by the hook, so parent has no children
+          children: [],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithHiddenChildren}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Parent should render (even without children)
+      expect(screen.getByText('Parent')).toBeInTheDocument();
+      
+      // Since children array is empty, parent won't be expandable
+      // The component checks hasChildren which is false for empty array
+      const parentElement = screen.getByText('Parent');
+      expect(parentElement).toBeInTheDocument();
+    });
+
+    it('handles hierarchical item where parent has href and children', async () => {
+      const user = userEvent.setup();
+      const itemsWithHrefAndChildren: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          href: '/parent',
+          children: [
+            { id: 'child', label: 'Child', href: '/child' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithHrefAndChildren}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Parent should be a button (expandable) even though it has href
+      const parent = screen.getByRole('button', { name: /Parent/i });
+      expect(parent).toBeInTheDocument();
+
+      // Click to expand
+      await user.click(parent);
+      await waitFor(() => {
+        expect(screen.getByText('Child')).toBeInTheDocument();
+      });
+    });
+
+    it('handles deeply nested items (4+ levels)', async () => {
+      const user = userEvent.setup();
+      const deeplyNestedItems: NavigationItem[] = [
+        {
+          id: 'level1',
+          label: 'Level 1',
+          children: [
+            {
+              id: 'level2',
+              label: 'Level 2',
+              children: [
+                {
+                  id: 'level3',
+                  label: 'Level 3',
+                  children: [
+                    {
+                      id: 'level4',
+                      label: 'Level 4',
+                      children: [
+                        { id: 'level5', label: 'Level 5', href: '/level5' },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={deeplyNestedItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      // Expand all levels
+      const level1 = screen.getByRole('button', { name: /Level 1/i });
+      await user.click(level1);
+
+      await waitFor(() => {
+        const level2 = screen.getByRole('button', { name: /Level 2/i });
+        expect(level2).toBeInTheDocument();
+      });
+
+      const level2 = screen.getByRole('button', { name: /Level 2/i });
+      await user.click(level2);
+
+      await waitFor(() => {
+        const level3 = screen.getByRole('button', { name: /Level 3/i });
+        expect(level3).toBeInTheDocument();
+      });
+
+      const level3 = screen.getByRole('button', { name: /Level 3/i });
+      await user.click(level3);
+
+      await waitFor(() => {
+        const level4 = screen.getByRole('button', { name: /Level 4/i });
+        expect(level4).toBeInTheDocument();
+      });
+
+      const level4 = screen.getByRole('button', { name: /Level 4/i });
+      await user.click(level4);
+
+      await waitFor(() => {
+        expect(screen.getByText('Level 5')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Button Text Variations', () => {
+    it('uses default buttonText when not provided', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+        />
+      );
+
+      expect(screen.getByText('Menu')).toBeInTheDocument();
+    });
+
+    it('uses custom buttonText when provided', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Custom Menu Text"
+        />
+      );
+
+      expect(screen.getByText('Custom Menu Text')).toBeInTheDocument();
+    });
+
+    it('handles empty buttonText', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText=""
+        />
+      );
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toHaveAttribute('aria-label', '');
+    });
+
+    it('handles buttonText with special characters', () => {
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu & Navigation <Test>"
+        />
+      );
+
+      expect(screen.getByText('Menu & Navigation <Test>')).toBeInTheDocument();
+    });
+  });
+
+  describe('Select Component Integration', () => {
+    it('handles Select value change correctly', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      const trigger = screen.getByRole('combobox');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Home')).toBeInTheDocument();
+      }, { interval: 10 });
+
+      const homeItem = screen.getByRole('option', { name: 'Home' });
+      await user.click(homeItem);
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'home',
+          label: 'Home',
+          href: '/',
+        })
+      );
+    });
+
+    it('disables SelectItem when item has no href', async () => {
+      const user = userEvent.setup();
+      const itemsWithoutHref: NavigationItem[] = [
+        { id: 'action', label: 'Action' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithoutHref}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await waitFor(() => {
+        const actionItem = screen.getByText('Action');
+        expect(actionItem.closest('[role="option"]')).toHaveAttribute('data-disabled', 'true');
+      }, { interval: 10 });
+    });
+  });
+
+  describe('Keyboard Navigation Edge Cases', () => {
+    it('handles Space key on hierarchical leaf item without href', async () => {
+      const user = userEvent.setup();
+      const leafWithoutHref: NavigationItem[] = [
+        { id: 'leaf', label: 'Leaf' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={leafWithoutHref}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      const leafLink = screen.getByText('Leaf');
+      leafLink.focus();
+      await user.keyboard(' ');
+
+      // Should not navigate since no href
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+
+    it('handles Escape key on non-expanded hierarchical item', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <NavigationMenu
+          items={hierarchicalNavItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      const userManagementButton = screen.getByRole('button', { name: /User Management/i });
+      userManagementButton.focus();
+      
+      // Press Escape when not expanded - should not crash
+      await user.keyboard('{Escape}');
+      
+      // Should still be collapsed
+      expect(screen.queryByText('All Users')).not.toBeInTheDocument();
+    });
+
+    it('handles Enter key on hierarchical item with children and href', async () => {
+      const user = userEvent.setup();
+      const itemsWithBoth: NavigationItem[] = [
+        {
+          id: 'parent',
+          label: 'Parent',
+          href: '/parent',
+          children: [
+            { id: 'child', label: 'Child', href: '/child' },
+          ],
+        },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={itemsWithBoth}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      const parentButton = screen.getByRole('button', { name: /Parent/i });
+      parentButton.focus();
+      await user.keyboard('{Enter}');
+
+      // Should expand (not navigate) since it has children
+      await waitFor(() => {
+        expect(screen.getByText('Child')).toBeInTheDocument();
+      });
+    });
+  });
 });