ChallengeCardDone.spec.tsx

import { act, render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import ChallengeCardDone from 'components/Challenge/ChallengeCardDone/ChallengeCardDone'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import * as storeHooks from 'store/hooks'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'

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

const mockStore = configureStore([])
const mockDispatch = jest.fn()
const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')

describe('ChallengeCardDone component', () => {
  const storeNoCurrentChallenge = mockStore({
    ecolyo: {
      challenge: { currentChallenge: null },
    },
  })
  it('should be rendered correctly', () => {
    const { container } = render(
      <Provider store={storeNoCurrentChallenge}>
        <ChallengeCardDone userChallenge={userChallengeData[0]} />
      </Provider>
    )
    expect(container).toMatchSnapshot()
  })

  describe('Reset final challenge', () => {
    beforeEach(() => {
      jest.clearAllMocks()
    })
    it('should reset challenge if no other challenge is on going', async () => {
      mockAppDispatch.mockImplementationOnce(() => mockDispatch)
      render(
        <Provider store={storeNoCurrentChallenge}>
          <ChallengeCardDone userChallenge={userChallengeData[0]} />
        </Provider>
      )
      const resetButton = screen.getByText('challenge.card_done.reset_defi')
      await act(async () => {
        await userEvent.click(resetButton)
      })
      expect(mockDispatch).toHaveBeenCalledWith({
        type: 'challenge/updateUserChallengeList',
      })
      expect(mockUpdateUserChallenge).toHaveBeenCalledTimes(1)
    })
    it('should not reset challenge if another challenge is on going', () => {
      mockAppDispatch.mockImplementationOnce(() => mockDispatch)
      const store = mockStore({
        ecolyo: {
          challenge: { currentChallenge: userChallengeData[1] },
        },
      })
      render(
        <Provider store={store}>
          <ChallengeCardDone userChallenge={userChallengeData[0]} />
        </Provider>
      )
      const resetBtn = screen.getByRole('button', {
        name: 'challenge.card_done.reset_defi',
      })
      expect(resetBtn).toHaveProperty('disabled')
      expect(mockDispatch).toHaveBeenCalledTimes(0)
      expect(mockUpdateUserChallenge).toHaveBeenCalledTimes(0)
    })
    it('should be primary button is challenge is lost', () => {
      render(
        <Provider store={storeNoCurrentChallenge}>
          <ChallengeCardDone userChallenge={userChallengeData[1]} />
        </Provider>
      )
      const resetBtn = screen.getByRole('button', {
        name: 'challenge.card_done.reset_defi',
      })
      expect(resetBtn).toHaveClass('btnPrimaryNegative')
    })
    it('should be secondary button is challenge is won', () => {
      render(
        <Provider store={storeNoCurrentChallenge}>
          <ChallengeCardDone userChallenge={userChallengeData[0]} />
        </Provider>
      )
      const resetBtn = screen.getByRole('button', {
        name: 'challenge.card_done.reset_defi',
      })
      expect(resetBtn).toHaveClass('btnSecondary')
    })
  })
})