Skip to content
Snippets Groups Projects
Header.spec.tsx 4.35 KiB
Newer Older
  • Learn to ignore specific revisions
  • import { act, render, screen } from '@testing-library/react'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import userEvent from '@testing-library/user-event'
    
    import Header from 'components/Header/Header'
    
    import { ScreenType } from 'enums'
    
    import React from 'react'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import { Provider } from 'react-redux'
    
    import * as ModalAction from 'store/modal/modal.slice'
    
    import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    
    
    const mockedNavigate = jest.fn()
    
    jest.mock('react-router-dom', () => ({
    
      ...jest.requireActual('react-router-dom'),
      useNavigate: () => mockedNavigate,
    
    describe('Header component', () => {
    
      const mobileStore = createMockEcolyoStore()
      const desktopStore = createMockEcolyoStore({
        global: { ...mockGlobalState, screenType: ScreenType.DESKTOP },
      })
    
        jest.clearAllMocks()
    
      })
    
      it('should be rendered correctly on mobile', () => {
        const { container } = render(
    
          <Provider store={mobileStore}>
    
            <Header desktopTitleKey="mockKey" />
          </Provider>
        )
        expect(container).toMatchSnapshot()
        expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
      })
    
      it('should be rendered correctly on desktop', () => {
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        const { container } = render(
    
          <Provider store={desktopStore}>
    
            <Header desktopTitleKey="mockKey" />
    
    Yoan VALLET's avatar
    Yoan VALLET committed
          </Provider>
        )
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        expect(container).toMatchSnapshot()
        expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      })
    
    
      it('should display desktop title text when desktopTitleKey provided', () => {
        const titleKey = 'Test Title'
    
        render(
          <Provider store={desktopStore}>
    
            <Header desktopTitleKey={titleKey} />
          </Provider>
        )
    
        expect(screen.getByText(titleKey)).toBeInTheDocument()
    
      })
    
      it('should not display desktop title text when desktopTitleKey not provided', () => {
    
          <Provider store={desktopStore}>
    
            <Header desktopTitleKey="" />
          </Provider>
        )
    
        expect(screen.queryByText(/.+/)).not.toBeInTheDocument()
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        const key = 'titleKey'
        render(
    
          <Provider store={desktopStore}>
    
            <Header desktopTitleKey={key} displayBackArrow={true} />
    
    Yoan VALLET's avatar
    Yoan VALLET committed
          </Provider>
        )
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        expect(screen.getByText(key)).toBeInTheDocument()
    
    Yoan VALLET's avatar
    Yoan VALLET committed
        expect(
    
          screen.getByLabelText('header.accessibility.button_back')
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        ).toBeInTheDocument()
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      })
    
    
      it('should NOT display back button when displayBackArrow is false', () => {
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        render(
    
          <Provider store={mobileStore}>
    
            <Header desktopTitleKey="test" displayBackArrow={false} />
    
    Yoan VALLET's avatar
    Yoan VALLET committed
          </Provider>
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        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={desktopStore}>
    
              <Header desktopTitleKey="KEY" displayBackArrow={true} />
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
            </Provider>
          )
    
          await act(async () => {
    
            await userEvent.click(
              screen.getByLabelText('header.accessibility.button_back')
            )
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
          expect(mockedNavigate).toHaveBeenCalled()
        })
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        it('should call custom back fn when back button is clicked', async () => {
          const mockBack = jest.fn()
          render(
    
            <Provider store={desktopStore}>
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
              <Header
                desktopTitleKey="KEY"
                displayBackArrow={true}
                backFunction={mockBack}
              />
            </Provider>
          )
    
          await act(async () => {
    
            await userEvent.click(
              screen.getByLabelText('header.accessibility.button_back')
            )
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
          expect(mockBack).toHaveBeenCalled()
        })
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
      it('should call handleClickFeedbacks when feedback button is clicked', async () => {
        render(
    
          <Provider store={mobileStore}>
    
            <Header desktopTitleKey="mockKey" />
    
    Yoan VALLET's avatar
    Yoan VALLET committed
          </Provider>
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
    
        await act(async () => {
    
          await userEvent.click(
            screen.getByLabelText('header.accessibility.button_open_feedbacks')
          )
    
    Yoan VALLET's avatar
    Yoan VALLET committed
        expect(updateModalSpy).toHaveBeenCalledWith(true)