DuelView.spec.tsx

import DuelView from 'components/Duel/DuelView'
import { UserChallengeState, UserDuelState } from 'enums'
import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import DuelError from './DuelError/DuelError'
import DuelOngoing from './DuelOngoing/DuelOngoing'
import DuelUnlocked from './DuelUnlocked/DuelUnlocked'

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

jest.mock('react-router-dom', () => ({
  useLocation: () => ({
    search: '?id=CHALLENGE0002',
  }),
  useNavigate: () => jest.fn(),
}))

describe('DuelView component', () => {
  it('should be rendered with DuelError component when no current challenge', () => {
    const store = createMockEcolyoStore({ challenge: challengeStateData })
    const wrapper = mount(
      <Provider store={store}>
        <DuelView />
      </Provider>
    )
    expect(wrapper.find(DuelError).exists()).toBeTruthy()
  })

  it('should be rendered with DuelOngoing component when current challenge with state = duel and duel state = done', () => {
    const updatedUserChallenge = {
      ...userChallengeData[1],
      state: UserChallengeState.DUEL,
      duel: { ...userChallengeData[1].duel, state: UserDuelState.DONE },
    }
    const updatedChallengeState = {
      ...challengeStateData,
      userChallengeList: userChallengeData,
      currentChallenge: updatedUserChallenge,
    }
    updatedChallengeState.userChallengeList[1] = updatedUserChallenge
    const store = createMockEcolyoStore({
      challenge: updatedChallengeState,
      chart: mockChartState,
    })
    const wrapper = mount(
      <Provider store={store}>
        <DuelView />
      </Provider>
    )
    expect(wrapper.find(DuelOngoing).exists()).toBeTruthy()
  })

  it('should be rendered with DuelError component when current challenge with state = duel and duel state = locked', () => {
    const updatedUserChallenge = {
      ...userChallengeData[1],
      state: UserChallengeState.DUEL,
      duel: { ...userChallengeData[1].duel, state: UserDuelState.LOCKED },
    }
    const updatedChallengeState = {
      ...challengeStateData,
      userChallengeList: userChallengeData,
      currentChallenge: updatedUserChallenge,
    }
    updatedChallengeState.userChallengeList[1] = updatedUserChallenge
    const store = createMockEcolyoStore({ challenge: updatedChallengeState })
    const wrapper = mount(
      <Provider store={store}>
        <DuelView />
      </Provider>
    )
    expect(wrapper.find(DuelError).exists()).toBeTruthy()
  })

  it('should be rendered with DuelError component when current challenge with state != duel', () => {
    const updatedUserChallenge = {
      ...userChallengeData[1],
      state: UserChallengeState.ONGOING,
    }
    const updatedChallengeState = {
      ...challengeStateData,
      userChallengeList: userChallengeData,
      currentChallenge: updatedUserChallenge,
    }
    updatedChallengeState.userChallengeList[1] = updatedUserChallenge
    const store = createMockEcolyoStore({ challenge: updatedChallengeState })
    const wrapper = mount(
      <Provider store={store}>
        <DuelView />
      </Provider>
    )
    expect(wrapper.find(DuelError).exists()).toBeTruthy()
  })

  it('should be rendered with DuelUnlocked component when current challenge with state = duel  and duel state = unlocked', () => {
    const updatedUserChallenge = {
      ...userChallengeData[1],
      state: UserChallengeState.DUEL,
      duel: { ...userChallengeData[1].duel, state: UserDuelState.UNLOCKED },
    }
    const updatedChallengeState = {
      ...challengeStateData,
      userChallengeList: userChallengeData,
      currentChallenge: updatedUserChallenge,
    }
    updatedChallengeState.userChallengeList[1] = updatedUserChallenge
    const store = createMockEcolyoStore({ challenge: updatedChallengeState })
    const wrapper = mount(
      <Provider store={store}>
        <DuelView />
      </Provider>
    )
    expect(wrapper.find(DuelUnlocked).exists()).toBeTruthy()
  })

  it('should be rendered with DuelOngoing component when current challenge with state = duel  and duel state = ongoing', () => {
    const updatedUserChallenge = {
      ...userChallengeData[1],
      state: UserChallengeState.DUEL,
      duel: { ...userChallengeData[1].duel, state: UserDuelState.ONGOING },
    }
    const updatedChallengeState = {
      ...challengeStateData,
      userChallengeList: userChallengeData,
      currentChallenge: updatedUserChallenge,
    }
    updatedChallengeState.userChallengeList[1] = updatedUserChallenge
    const store = createMockEcolyoStore({
      challenge: updatedChallengeState,
      chart: mockChartState,
    })
    const wrapper = mount(
      <Provider store={store}>
        <DuelView />
      </Provider>
    )
    expect(wrapper.find(DuelOngoing).exists()).toBeTruthy()
  })
})