QuizQuestionContentCustom.spec.tsx

import { act, render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { questionEntity } from 'tests/__mocks__/quizData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import QuizQuestionContentCustom from './QuizQuestionContentCustom'

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

const mockUpdateUserQuiz = jest.fn()
jest.mock('services/quiz.service', () => {
  return jest.fn(() => ({
    updateUserQuiz: mockUpdateUserQuiz,
    getCustomQuestion: jest.fn(),
  }))
})

jest.mock('services/challenge.service', () => {
  return jest.fn(() => ({
    updateUserChallenge: jest.fn(),
  }))
})

describe('QuizCustomQuestionContent component', () => {
  const store = createMockEcolyoStore()
  it('should be rendered correctly', async () => {
    render(
      <Provider store={store}>
        <QuizQuestionContentCustom
          userChallenge={userChallengeData[0]}
          question={questionEntity}
          goBack={mockHistoryPush('/challenges')}
          isLoading={false}
        />
      </Provider>
    )
    await act(async () => {
      await userEvent.click(screen.getAllByRole('button')[0])
    })
    expect(mockHistoryPush).toHaveBeenCalledWith('/challenges')
    expect(screen.getByText(questionEntity.questionLabel)).toBeInTheDocument()
    expect(screen.getAllByRole('radio').length).toBe(3)
  })
  it('should be rendered correctly with loader', () => {
    render(
      <Provider store={store}>
        <QuizQuestionContentCustom
          userChallenge={userChallengeData[0]}
          question={questionEntity}
          goBack={mockHistoryPush('/challenges')}
          isLoading={true}
        />
      </Provider>
    )
    expect(screen.getByRole('progressbar', { busy: true })).toBeInTheDocument()
  })
  it('should display QuizExplanationModal when click on Button', async () => {
    render(
      <Provider store={store}>
        <QuizQuestionContentCustom
          userChallenge={userChallengeData[0]}
          question={questionEntity}
          goBack={mockHistoryPush('/challenges')}
          isLoading={false}
        />
      </Provider>
    )
    await act(async () => {
      await userEvent.click(screen.getAllByRole('radio')[0])
      await userEvent.click(screen.getByText('quiz.button_validate'))
    })
    expect(mockUpdateUserQuiz).toHaveBeenCalledWith(
      userChallengeData[0].quiz,
      questionEntity.answers[0].isTrue
    )
    expect(screen.getByRole('dialog')).toBeInTheDocument()
  })
})