QuizBegin.spec.tsx

import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { UserChallengeUpdateFlag } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import QuizBegin from './QuizBegin'

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

describe('QuizBegin component', () => {
  it('should be rendered correctly', async () => {
    const store = createMockEcolyoStore()
    const { container } = render(
      <Provider store={store}>
        <QuizBegin userChallenge={userChallengeData[0]} />
      </Provider>
    )
    expect(container.getElementsByClassName('quiz-icon')[0]).toBeInTheDocument()
    await userEvent.click(screen.getByRole('button'))
    expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
      userChallengeData[0],
      UserChallengeUpdateFlag.QUIZ_START
    )
  })
})