feat: enhance README and TODO documentation, implement mobile menu functionality in Header component

- Updated README.md with project details, quick start instructions, and tech stack. - Expanded TODO.md to reflect current project status and backlog items, including Linear ticket synchronization. - Added mobile menu toggle functionality in Header component with corresponding tests for user interactions. - Configured Next.js for Docker deployment and optimized build settings.
2025-09-05 17:28:52 +02:00
parent 578a85ec1a
commit b0df8dd182
50 changed files with 7758 additions and 67 deletions
@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import Header from './Header'
 import userEvent from '@testing-library/user-event'
+import Header from './Header'

 // Mock Next.js Link component
 jest.mock('next/link', () => {
@@ -77,4 +77,84 @@ describe('Header', () => {
    // 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 />)
+
+    const hamburgerButton = screen.getByRole('button')
+    
+    // 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 />)
+
+    const hamburgerButton = screen.getByRole('button')
+    
+    // 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 />)
+
+    // Check for home link
+    const homeLinks = screen.getAllByText('Kezdőlap')
+    expect(homeLinks.length).toBeGreaterThan(0)
+    expect(homeLinks[0].closest('a')).toHaveAttribute('href', '/')
+
+    // Check for about link
+    const aboutLinks = screen.getAllByText('Rólunk')
+    expect(aboutLinks.length).toBeGreaterThan(0)
+    expect(aboutLinks[0].closest('a')).toHaveAttribute('href', '/rolunk')
+
+    // Check for services link
+    const servicesLinks = screen.getAllByText('Szolgáltatások')
+    expect(servicesLinks.length).toBeGreaterThan(0)
+    expect(servicesLinks[0].closest('a')).toHaveAttribute('href', '/szolgaltatasok')
+
+    // Check for contact link
+    const contactLinks = screen.getAllByText('Kapcsolat')
+    expect(contactLinks.length).toBeGreaterThan(0)
+    expect(contactLinks[0].closest('a')).toHaveAttribute('href', '/kapcsolat')
+  })
+
+  it('should have proper responsive classes', () => {
+    const { container } = render(<Header />)
+
+    // Desktop menu should be hidden on mobile
+    const desktopMenu = container.querySelector('.hidden.md\\:block')
+    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.absolute')
+    expect(mobileMenu).toBeInTheDocument()
+  })
 })