diff --git a/components/layout/Header.test.tsx b/components/layout/Header.test.tsx new file mode 100644 index 000000000..b9fa8c64f --- /dev/null +++ b/components/layout/Header.test.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'; +import { Header, NavLink } from './Header'; +import { usePathname } from 'next/navigation'; + +// Mock next/navigation +vi.mock('next/navigation', () => ({ + usePathname: vi.fn(), +})); + +// Mock TransitionLink to render standard anchor tag and forward all props +vi.mock('@/components/ui/TransitionLink', () => ({ + TransitionLink: ({ children, href, onClick, ...props }: any) => ( + + {children} + + ), +})); + +// Mock next/image +vi.mock('next/image', () => ({ + default: ({ src, alt, ...props }: any) => {alt}, +})); + +// Mock LanguageSwitcher +vi.mock('./LanguageSwitcher', () => ({ + LanguageSwitcher: () =>
, +})); + +describe('Header Dropdown Navigation TDD', () => { + const mockNavLinks: NavLink[] = [ + { + label: 'Home', + url: '/', + }, + { + label: 'Leistungen', + url: '/leistungen', + children: [ + { label: 'Kabelbau', url: '/leistungen/kabelbau' }, + { label: 'Bohrtechnik', url: '/leistungen/bohrtechnik' }, + ], + }, + ]; + + beforeEach(() => { + vi.clearAllMocks(); + }); + + it('closes the dropdown menu immediately after a page navigation occurs', async () => { + // 1. Set initial pathname + let currentPath = '/de'; + vi.mocked(usePathname).mockImplementation(() => currentPath); + + // 2. Render Header + const { rerender } = render(
); + + // 3. Hover over "Leistungen" menu item to open dropdown + const leistungenNavItem = screen.getByText('Leistungen'); + const navItemContainer = leistungenNavItem.closest('.group'); + expect(navItemContainer).toBeTruthy(); + + act(() => { + fireEvent.mouseEnter(navItemContainer!); + }); + + // 4. Assert dropdown is open and children are rendered + expect(screen.getByText('Kabelbau')).toBeTruthy(); + expect(screen.getByText('Bohrtechnik')).toBeTruthy(); + + // 5. Simulate page navigation by changing the path + currentPath = '/de/leistungen/kabelbau'; + + act(() => { + // Trigger pathname hook change and force rerender + rerender(
); + }); + + // 6. Assert dropdown is closed (children are not in the document) + await waitFor(() => { + expect(screen.queryByText('Kabelbau')).toBeNull(); + expect(screen.queryByText('Bohrtechnik')).toBeNull(); + }); + }); +});