Header.spec.tsx

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Header from 'components/Header/Header'
import React from 'react'
import { Provider } from 'react-redux'
import * as ModalAction from 'store/modal/modal.slice'
import { createMockEcolyoStore } from 'tests/__mocks__/store'

const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockedNavigate,
}))

describe('Header component', () => {
  const store = createMockEcolyoStore()
  it('should be rendered correctly', () => {
    const { container } = render(
      <Provider store={store}>
        <Header setHeaderHeight={jest.fn()} desktopTitleKey="mockKey" />
      </Provider>
    )
    expect(container).toMatchSnapshot()
    expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
  })

  it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
    const key = 'titleKey'
    render(
      <Provider store={store}>
        <Header
          desktopTitleKey={key}
          displayBackArrow={true}
          setHeaderHeight={jest.fn()}
        />
      </Provider>
    )
    expect(screen.getByText(key)).toBeInTheDocument()
    expect(
      screen.getByRole('button', { name: 'header.accessibility.button_back' })
    ).toBeInTheDocument()
  })
  it('should NOT display back button when displayBackArrow is false', async () => {
    render(
      <Provider store={store}>
        <Header
          desktopTitleKey="test"
          displayBackArrow={false}
          setHeaderHeight={jest.fn()}
        />
      </Provider>
    )
    expect(
      screen.queryByRole('button', {
        name: 'header.accessibility.button_back',
      })
    ).not.toBeInTheDocument()
  })

  describe('back functions', () => {
    it('should call navigate -1 when back button is clicked with NO back fn', async () => {
      render(
        <Provider store={store}>
          <Header
            desktopTitleKey="KEY"
            displayBackArrow={true}
            setHeaderHeight={jest.fn()}
          />
        </Provider>
      )
      await userEvent.click(screen.getAllByRole('button')[0])
      expect(mockedNavigate).toHaveBeenCalled()
    })
    it('should call custom back fn when back button is clicked', async () => {
      const mockBack = jest.fn()
      render(
        <Provider store={store}>
          <Header
            desktopTitleKey="KEY"
            displayBackArrow={true}
            setHeaderHeight={jest.fn()}
            backFunction={mockBack}
          />
        </Provider>
      )
      await userEvent.click(screen.getAllByRole('button')[0])
      expect(mockBack).toHaveBeenCalled()
    })
  })

  it('should call handleClickFeedbacks when feedback button is clicked', async () => {
    render(
      <Provider store={store}>
        <Header setHeaderHeight={jest.fn()} desktopTitleKey="mockKey" />
      </Provider>
    )
    const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
    await userEvent.click(screen.getAllByRole('button')[0])
    expect(updateModalSpy).toHaveBeenCalledWith(true)
  })
})