Skip to content
Snippets Groups Projects
CozyBar.spec.tsx 2.94 KiB
Newer Older
  • Learn to ignore specific revisions
  • import { render, screen } from '@testing-library/react'
    
    import { userEvent } from '@testing-library/user-event'
    
    import CozyBar from 'components/Header/CozyBar'
    
    import { ScreenType } from 'enums'
    
    import React from 'react'
    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
    
    
    interface BarProps {
      children: React.ReactNode
    }
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    
    
    jest.mock('utils/cozyBar', () => {
      return {
        BarLeft: ({ children }: BarProps) => children,
        BarCenter: ({ children }: BarProps) => children,
        BarRight: ({ children }: BarProps) => children,
      }
    })
    
    const mockedNavigate = jest.fn()
    jest.mock('react-router-dom', () => ({
      ...jest.requireActual('react-router-dom'),
      useNavigate: () => mockedNavigate,
    }))
    
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    describe('CozyBar component', () => {
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
      const store = createMockEcolyoStore()
    
      it('should be rendered correctly without without left arrow', () => {
    
        const { container } = render(
    
          <Provider store={store}>
            <CozyBar />
          </Provider>
        )
    
        expect(container).toMatchSnapshot()
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      })
    
    
      describe('should test displayBackArrow', () => {
    
        it('should call navigate(-1) when back button is clicked and no function is provided', async () => {
          const { container } = render(
    
            <Provider store={store}>
              <CozyBar displayBackArrow={true} />
            </Provider>
          )
    
          expect(container).toMatchSnapshot()
    
          await userEvent.click(
            screen.getByLabelText('header.accessibility.button_back')
          )
    
          expect(mockedNavigate).toHaveBeenCalled()
        })
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    
    
        it('should call backFunction() when back button is clicked and function is provided', async () => {
    
          const mockBackFunction = jest.fn()
    
          const { container } = render(
    
            <Provider store={store}>
              <CozyBar displayBackArrow={true} backFunction={mockBackFunction} />
            </Provider>
          )
    
          expect(container).toMatchSnapshot()
    
          await userEvent.click(
            screen.getByLabelText('header.accessibility.button_back')
          )
    
          expect(mockBackFunction).toHaveBeenCalled()
        })
      })
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    
    
      it('should call handleClickFeedbacks when feedback button is clicked', async () => {
        render(
    
          <Provider store={store}>
            <CozyBar />
          </Provider>
        )
        const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
    
        await userEvent.click(
          screen.getByLabelText('header.accessibility.button_open_feedbacks')
        )
    
        expect(updateModalSpy).toHaveBeenCalledWith(true)
      })
    
      it('should not be rendered with screen type different from mobile', () => {
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
        const store = createMockEcolyoStore({
    
          global: { ...mockGlobalState, screenType: ScreenType.DESKTOP },
    
        const { container } = render(
    
          <Provider store={store}>
            <CozyBar />
          </Provider>
        )
    
        expect(container.firstChild).toBeNull()
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    })