QuizQuestionContentCustom.spec.tsx

import Button from '@material-ui/core/Button'
import Loader from 'components/Loader/Loader'
import { mount } from 'enzyme'
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 QuizExplanationModal from '../QuizExplanationModal/QuizExplanationModal'
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()
const mockGetCustomQuestion = jest.fn()
jest.mock('services/quiz.service', () => {
  return jest.fn(() => ({
    updateUserQuiz: mockUpdateUserQuiz,
    getCustomQuestion: mockGetCustomQuestion,
  }))
})

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

describe('QuizCustomQuestionContent component', () => {
  const store = createMockEcolyoStore()
  it('should be rendered correctly', () => {
    const wrapper = mount(
      <Provider store={store}>
        <QuizQuestionContentCustom
          userChallenge={userChallengeData[0]}
          question={questionEntity}
          goBack={mockHistoryPush('/challenges')}
          isLoading={false}
        />
      </Provider>
    )
    wrapper.find('.btn-back').forEach(node => {
      node.simulate('click')
    })
    expect(mockHistoryPush).toHaveBeenCalledWith('/challenges')
    expect(wrapper.find('.question').text()).toEqual(
      questionEntity.questionLabel
    )
    expect(wrapper.find('input')).toHaveLength(3)
  })
  it('should be rendered correctly with loader', () => {
    const wrapper = mount(
      <Provider store={store}>
        <QuizQuestionContentCustom
          userChallenge={userChallengeData[0]}
          question={questionEntity}
          goBack={mockHistoryPush('/challenges')}
          isLoading={true}
        />
      </Provider>
    )
    expect(wrapper.find(Loader).exists()).toBeTruthy()
  })
  it('should display QuizExplanationModal when click on Button', () => {
    const wrapper = mount(
      <Provider store={store}>
        <QuizQuestionContentCustom
          userChallenge={userChallengeData[0]}
          question={questionEntity}
          goBack={mockHistoryPush('/challenges')}
          isLoading={false}
        />
      </Provider>
    )
    const answer = questionEntity.answers[0].answerLabel
    wrapper
      .find({ type: 'radio' })
      .at(0)
      .simulate('change', { target: { value: answer } })

    expect(wrapper.find(Button).exists()).toBeTruthy()
    wrapper.find('.btn-secondary-negative').forEach(node => {
      node.simulate('click')
    })
    expect(mockUpdateUserQuiz).toHaveBeenCalledWith(
      userChallengeData[0].quiz,
      questionEntity.answers[0].isTrue
    )
    expect(wrapper.find(QuizExplanationModal).exists()).toBeTruthy()
    expect(wrapper.find(QuizExplanationModal).prop('open')).toBeTruthy()
  })
})