Newer
Older
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'
interface BarProps {
children: React.ReactNode
}
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,
}))
it('should be rendered correctly without without left arrow', () => {
<Provider store={store}>
<CozyBar />
</Provider>
)
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>
)
await userEvent.click(
screen.getByLabelText('header.accessibility.button_back')
)
expect(mockedNavigate).toHaveBeenCalled()
})
it('should call backFunction() when back button is clicked and function is provided', async () => {
<Provider store={store}>
<CozyBar displayBackArrow={true} backFunction={mockBackFunction} />
</Provider>
)
await userEvent.click(
screen.getByLabelText('header.accessibility.button_back')
)
expect(mockBackFunction).toHaveBeenCalled()
})
})
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', () => {
global: { ...mockGlobalState, screenType: ScreenType.DESKTOP },
<Provider store={store}>
<CozyBar />
</Provider>
)