ActionModal.spec.tsx

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as challengeActions from 'store/challenge/challenge.slice'
import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ActionModal from './ActionModal'

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

describe('ActionModal component', () => {
  const store = createMockEcolyoStore()
  it('should render correctly', () => {
    const { baseElement } = render(
      <Provider store={store}>
        <ActionModal
          open={true}
          handleCloseClick={jest.fn()}
          action={defaultEcogestureData[1]}
          userChallenge={userChallengeData[1]}
          setFocus={jest.fn()}
        />
      </Provider>
    )
    expect(baseElement).toMatchSnapshot()
  })
  it('should click on button and update action to ongoing', async () => {
    const updateChallengeSpy = jest.spyOn(
      challengeActions,
      'updateUserChallengeList'
    )
    mockUpdateUserChallenge.mockResolvedValueOnce(userChallengeData[1])

    render(
      <Provider store={store}>
        <ActionModal
          open={true}
          handleCloseClick={jest.fn()}
          action={defaultEcogestureData[1]}
          userChallenge={userChallengeData[1]}
          setFocus={jest.fn()}
        />
      </Provider>
    )
    await userEvent.click(screen.getByText('action_modal.accept'))
    expect(updateChallengeSpy).toHaveBeenCalledTimes(1)
  })
})