Add header tests

frontend/__tests__/common-app/components/header.component.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { HeaderComponent } from '../../../src/common-app/components'
+import { Direction, useScrollDirection } from '../../../src/common/hooks'
+import { describe, test, expect, vi, MockedFunction } from 'vitest'
+import '@testing-library/jest-dom'
+import { MemoryRouter } from 'react-router-dom'
+
+//vi.mock('../../../src/common/hooks/useScrollDirection.hook')
+//const mockUseScrollDirection = useScrollDirection as MockedFunction<typeof useScrollDirection>
+
+describe('Header Component', () => {
+  test('renders component ', () => {
+    render(<MemoryRouter><HeaderComponent /></MemoryRouter>)
+    const header = screen.getByRole('banner')
+
+    expect(header).toBeInTheDocument()
+  })
+
+  test('Header is not visible when scrolling down', () => {
+    render(<MemoryRouter><HeaderComponent /></MemoryRouter>)
+    const header = screen.getByRole('banner')
+
+    fireEvent.scroll(window, { target: { scrollY: 100 } })
+
+    expect(header).toHaveClass('opacity-0')
+  })
+
+  test('Header is visible when scrolling up', () => {
+    render(<MemoryRouter><HeaderComponent /></MemoryRouter>)
+    const header = screen.getByRole('banner')
+
+    fireEvent.scroll(window, { target: { scrollY: -50 } })
+
+    expect(header).toHaveClass('opacity-1')
+  })
+
+  test('Multiple scrolling actions', async () => {
+    render(<MemoryRouter><HeaderComponent /></MemoryRouter>)
+    const header = screen.getByRole('banner')
+
+    fireEvent.scroll(window, { target: { scrollY: 100 } })
+    expect(header).toHaveClass('opacity-0')
+
+    fireEvent.scroll(window, { target: { scrollY: 200 } })
+    expect(header).toHaveClass('opacity-0')
+
+    fireEvent.scroll(window, { target: { scrollY: 50 } })
+    expect(header).toHaveClass('opacity-1')
+
+    fireEvent.scroll(window, { target: { scrollY: 100 } })
+    expect(header).toHaveClass('opacity-0')
+  })
+})

frontend/src/common-app/components/header.component.tsx

@@ -3,9 +3,8 @@ import { Direction, useScrollDirection } from '@/common/hooks'
 
 export const HeaderComponent = () => {
   const scrollDirection = useScrollDirection()
-
   return (
-    <header className={`sticky ${scrollDirection === Direction.down ? '-top-20' : 'top-0'} transition-all duration-500`}>
+    <header className={`sticky ${scrollDirection === Direction.down ? '-top-20 opacity-0' : 'top-0 opacity-1'} transition-all duration-500`}>
       <NavbarComponent />
     </header>
   )