websitedev/proto/src/components/Header.test.tsx

import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import userEvent from '@testing-library/user-event'
import Header from './Header'
import { common } from '@/content'
import { getMainNavigation } from '@/config/site'

// Mock Next.js Link component
jest.mock('next/link', () => {
  return ({ children, href }: { children: React.ReactNode; href: string }) => (
    <a href={href}>{children}</a>
  )
})

// MITHOME-91/114: Header lett props-alapú (locale-aware nav/a11y a szülő
// [locale] layoutból jön) — a teszt a valódi getMainNavigation('hu')-t adja
// át, hogy a feliratok/hrefek a tényleges alkalmazás-viselkedést tükrözzék.
const headerProps = {
  nav: getMainNavigation('hu'),
  homeHref: '/hu',
  a11y: common.a11y,
}

describe('Header', () => {
  it('should render the company logo', () => {
    render(<Header {...headerProps} />)
    expect(screen.getByAltText('mozdIT Bt.')).toBeInTheDocument()
  })

  it('should render all navigation links in desktop menu', () => {
    render(<Header {...headerProps} />)

    // Desktop menu should contain all links with specific structures
    const desktopMenu = document.querySelector('.hidden.md\\:flex')
    expect(desktopMenu).toBeInTheDocument()

    const navLinks = screen.getAllByText('Kezdőlap')
    expect(navLinks.length).toBeGreaterThan(0)

    expect(screen.getAllByText('Rólunk')).toHaveLength(2) // Both in desktop and mobile menus
    expect(screen.getAllByText('Szolgáltatások')).toHaveLength(2) // Both in desktop and mobile menus
  })

  it('should render contact button with correct styling', () => {
    render(<Header {...headerProps} />)

    const contactButtons = screen.getAllByText('Kapcsolat')
    expect(contactButtons.length).toBeGreaterThan(0)

    // Check if any contact button has the correct styling
    const contactButton = contactButtons[0]
    expect(contactButton).toBeInTheDocument()

    // Check for primary button styling
    const contactLink = contactButton.closest('a')
    if (contactLink) {
      expect(contactLink).toHaveClass('btn', 'btn-primary')
    }
  })

  it('should render hamburger menu button on mobile', () => {
    render(<Header {...headerProps} />)

    // The hamburger menu button is hidden by default in desktop view
    // We can test its presence even if not visible
    const hamburgerButton = screen.getByRole('button', { name: new RegExp(common.a11y.openMenu, 'i') })
    expect(hamburgerButton).toBeInTheDocument()
  })

  it('should have proper accessibility attributes', () => {
    render(<Header {...headerProps} />)

    const hamburgerButton = screen.getByRole('button', { name: new RegExp(common.a11y.openMenu, 'i') })
    expect(hamburgerButton).toHaveAttribute('aria-expanded', 'false')
  })

  it('should render with proper semantic structure', () => {
    const { container } = render(<Header {...headerProps} />)

    // Should have header element with proper structure
    const header = container.firstChild as HTMLElement
    expect(header?.tagName).toBe('HEADER')

    // Should have a nav element
    const nav = container.querySelector('nav')
    expect(nav).toBeInTheDocument()

    // Should be sticky positioned
    expect(header).toHaveClass('sticky', 'top-0')
  })

  it('should toggle mobile menu when hamburger button is clicked', async () => {
    const user = userEvent.setup()
    render(<Header {...headerProps} />)

    const hamburgerButton = screen.getByRole('button', { name: new RegExp(common.a11y.openMenu, 'i') })
    
    // Initially menu should be closed
    expect(hamburgerButton).toHaveAttribute('aria-expanded', 'false')
    
    // Click to open menu
    await user.click(hamburgerButton)
    expect(hamburgerButton).toHaveAttribute('aria-expanded', 'true')
    
    // Click again to close menu
    await user.click(hamburgerButton)
    expect(hamburgerButton).toHaveAttribute('aria-expanded', 'false')
  })

  it('should close mobile menu when navigation link is clicked', async () => {
    const user = userEvent.setup()
    render(<Header {...headerProps} />)

    const hamburgerButton = screen.getByRole('button', { name: new RegExp(common.a11y.openMenu, 'i') })
    
    // Open the mobile menu
    await user.click(hamburgerButton)
    expect(hamburgerButton).toHaveAttribute('aria-expanded', 'true')
    
    // Find a navigation link in the mobile menu and click it
    const mobileNavLinks = screen.getAllByText('Rólunk')
    const mobileLink = mobileNavLinks.find(link => 
      link.closest('.md\\:hidden') !== null
    )
    
    if (mobileLink) {
      await user.click(mobileLink)
      expect(hamburgerButton).toHaveAttribute('aria-expanded', 'false')
    }
  })

  it('should have correct navigation links with proper hrefs', () => {
    render(<Header {...headerProps} />)

    // Check for home link
    const homeLinks = screen.getAllByText('Kezdőlap')
    expect(homeLinks.length).toBeGreaterThan(0)
    expect(homeLinks[0].closest('a')).toHaveAttribute('href', '/hu')

    // Check for about link
    const aboutLinks = screen.getAllByText('Rólunk')
    expect(aboutLinks.length).toBeGreaterThan(0)
    expect(aboutLinks[0].closest('a')).toHaveAttribute('href', '/hu/rolunk')

    // Check for services link
    const servicesLinks = screen.getAllByText('Szolgáltatások')
    expect(servicesLinks.length).toBeGreaterThan(0)
    expect(servicesLinks[0].closest('a')).toHaveAttribute('href', '/hu/szolgaltatasok')

    // Check for contact link
    const contactLinks = screen.getAllByText('Kapcsolat')
    expect(contactLinks.length).toBeGreaterThan(0)
    expect(contactLinks[0].closest('a')).toHaveAttribute('href', '/hu/kapcsolat')
  })

  it('should have proper responsive classes', () => {
    const { container } = render(<Header {...headerProps} />)

    // Desktop menu should be hidden on mobile
    const desktopMenu = container.querySelector('.hidden.md\\:flex')
    expect(desktopMenu).toBeInTheDocument()

    // Mobile menu button should be hidden on desktop
    const mobileMenuButton = container.querySelector('.md\\:hidden button')
    expect(mobileMenuButton).toBeInTheDocument()

    // Mobile menu should be positioned correctly
    const mobileMenu = container.querySelector('.md\\:hidden.overflow-hidden')
    expect(mobileMenu).toBeInTheDocument()
  })
})