ChallengeCardUnlocked.spec.tsx

import { act, render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { FluidState, FluidType } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
import {
  createMockEcolyoStore,
  mockChallengeState,
  mockGlobalState,
} from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ChallengeCardUnlocked from './ChallengeCardUnlocked'

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

describe('ChallengeCardUnlocked component', () => {
  const store = createMockEcolyoStore()
  it('should be rendered correctly', () => {
    render(
      <Provider store={store}>
        <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
      </Provider>
    )
    expect(screen.getByText('Simone VEILLE')).toBeInTheDocument()
    expect(
      screen.getByText('challenge.card_unlocked.button_launch')
    ).toBeInTheDocument()
    expect(screen.queryAllByRole('dialog').length).toBeFalsy()
  })

  it('should display ChallengeNoFluidModal when launching challenge without configured fluid', async () => {
    render(
      <Provider store={store}>
        <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
      </Provider>
    )
    await act(async () => {
      await userEvent.click(
        screen.getByText('challenge.card_unlocked.button_launch')
      )
    })
    expect(screen.getByRole('dialog')).toBeInTheDocument()
  })

  it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', async () => {
    mockStartUserChallenge.mockResolvedValue(userChallengeData[0])
    const store = createMockEcolyoStore({
      global: {
        ...mockGlobalState,
        fluidTypes: [FluidType.ELECTRICITY],
        fluidStatus: [
          { ...mockGlobalState.fluidStatus[0], status: FluidState.DONE },
        ],
      },
      challenge: mockChallengeState,
    })
    render(
      <Provider store={store}>
        <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
      </Provider>
    )
    await act(async () => {
      await userEvent.click(
        screen.getByText('challenge.card_unlocked.button_launch')
      )
    })
    expect(screen.queryAllByRole('dialog').length).toBeFalsy()
    expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
  })

  it('should not be able to launch challenge if another one is active', () => {
    mockStartUserChallenge.mockResolvedValue(userChallengeData[0])
    const store = createMockEcolyoStore({
      global: mockGlobalState,
      challenge: {
        ...mockChallengeState,
        currentChallenge: userChallengeData[1],
      },
    })
    render(
      <Provider store={store}>
        <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
      </Provider>
    )
    const launchBtn = screen.getByLabelText(
      'challenge.accessibility.button_launch'
    )
    expect(launchBtn).toHaveAttribute('disabled')
  })
})