Newer
Older
import { act, render, screen } from '@testing-library/react'
import Header from 'components/Header/Header'
import * as ModalAction from 'store/modal/modal.slice'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockedNavigate,
const mobileStore = createMockEcolyoStore()
const desktopStore = createMockEcolyoStore({
global: { ...mockGlobalState, screenType: ScreenType.DESKTOP },
})
beforeEach(() => {
})
it('should be rendered correctly on mobile', () => {
const { container } = render(
<Header desktopTitleKey="mockKey" />
</Provider>
)
expect(container).toMatchSnapshot()
expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
})
it('should be rendered correctly on desktop', () => {
expect(container).toMatchSnapshot()
expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
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', () => {
<Header desktopTitleKey="" />
</Provider>
)
expect(screen.queryByText(/.+/)).not.toBeInTheDocument()
it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
<Header desktopTitleKey={key} displayBackArrow={true} />
screen.getByLabelText('header.accessibility.button_back')
it('should NOT display back button when displayBackArrow is false', () => {
<Header desktopTitleKey="test" displayBackArrow={false} />
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(
<Header desktopTitleKey="KEY" displayBackArrow={true} />
await userEvent.click(
screen.getByLabelText('header.accessibility.button_back')
)
it('should call custom back fn when back button is clicked', async () => {
const mockBack = jest.fn()
render(
<Header
desktopTitleKey="KEY"
displayBackArrow={true}
backFunction={mockBack}
/>
</Provider>
)
await userEvent.click(
screen.getByLabelText('header.accessibility.button_back')
)
it('should call handleClickFeedbacks when feedback button is clicked', async () => {
render(
const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
await userEvent.click(
screen.getByLabelText('header.accessibility.button_open_feedbacks')
)