QuizView.spec.tsx

import { render } from '@testing-library/react'
import QuizView from 'components/Quiz/QuizView'
import { UserQuizState } from 'enums'
import { ChallengeState } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'

jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
jest.mock('components/Content/Content', () => 'mock-content')

describe('QuizView component', () => {
  it('should be rendered with QuizBegin component when quiz state = unlocked', () => {
    const updatedUserChallenge = {
      ...userChallengeData[0],
      quiz: { ...userChallengeData[0].quiz, state: UserQuizState.UNLOCKED },
    }
    const updatedChallengeState = {
      ...challengeStateData,
      currentChallenge: updatedUserChallenge,
    }
    const store = createMockEcolyoStore({
      challenge: updatedChallengeState,
      global: mockGlobalState,
    })
    const { container } = render(
      <Provider store={store}>
        <QuizView />
      </Provider>
    )
    expect(
      container.getElementsByClassName('quiz-begin-container')[0]
    ).toBeInTheDocument()
  })

  it('should be rendered with QuizQuestion component when quiz state = ongoing', () => {
    const updatedUserChallenge = {
      ...userChallengeData[0],
      quiz: { ...userChallengeData[0].quiz, state: UserQuizState.ONGOING },
    }
    const updatedChallengeState = {
      ...challengeStateData,
      currentChallenge: updatedUserChallenge,
    }
    const store = createMockEcolyoStore({
      challenge: updatedChallengeState,
      global: mockGlobalState,
    })
    const { container } = render(
      <Provider store={store}>
        <QuizView />
      </Provider>
    )
    expect(
      container.getElementsByClassName('question-container')[0]
    ).toBeInTheDocument()
  })

  it('should be rendered with QuizFinish component when quiz state = done', () => {
    const updatedUserChallenge = {
      ...userChallengeData[0],
      quiz: { ...userChallengeData[0].quiz, state: UserQuizState.DONE },
    }
    const updatedChallengeState = {
      ...challengeStateData,
      currentChallenge: updatedUserChallenge,
    }
    const store = createMockEcolyoStore({
      challenge: updatedChallengeState,
      global: mockGlobalState,
    })
    const { container } = render(
      <Provider store={store}>
        <QuizView />
      </Provider>
    )
    expect(
      container.getElementsByClassName('quiz-finish-container')[0]
    ).toBeInTheDocument()
  })

  it('should be rendered with QuizBegin component when quiz state = null', () => {
    const updatedChallengeState: ChallengeState = {
      ...challengeStateData,
      currentChallenge: {
        ...userChallengeData[0],
        quiz: { ...userChallengeData[0].quiz, state: UserQuizState.UNLOCKED },
      },
    }
    const store = createMockEcolyoStore({
      challenge: updatedChallengeState,
      global: mockGlobalState,
    })
    const { container } = render(
      <Provider store={store}>
        <QuizView />
      </Provider>
    )
    expect(
      container.getElementsByClassName('quiz-begin-container')[0]
    ).toBeInTheDocument()
  })
})