ActionChoose.spec.tsx

import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { AllEcogestureData } from 'tests/__mocks__/actionData.mock'
import {
  createMockEcolyoStore,
  mockChallengeState,
  mockGlobalState,
  mockProfileState,
} from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ActionChoose from './ActionChoose'

jest.mock('components/Action/ActionList/ActionList', () => 'mock-ActionList')

jest.mock('services/ecogesture.service', () => {
  return jest.fn(() => ({
    getEcogesturesByIds: jest.fn(() => []),
  }))
})

const mockGetDefaultActions = jest.fn()

jest.mock('services/action.service', () => {
  return jest.fn(() => ({
    getCustomActions: jest.fn(),
    getDefaultActions: mockGetDefaultActions,
  }))
})

describe('ActionChoose component', () => {
  const store = createMockEcolyoStore({
    global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
    profile: mockProfileState,
  })
  it('should render correctly', async () => {
    mockGetDefaultActions.mockResolvedValue([
      AllEcogestureData[0],
      AllEcogestureData[5],
      AllEcogestureData[2],
    ])
    const { container } = render(
      <Provider store={store}>
        <ActionChoose
          userChallenge={userChallengeData[1]}
          setFocus={jest.fn()}
        />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
  })

  it('should go to the Action list', async () => {
    const store = createMockEcolyoStore({
      challenge: mockChallengeState,
      global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
      profile: mockProfileState,
    })

    mockGetDefaultActions.mockResolvedValue([
      AllEcogestureData[0],
      AllEcogestureData[5],
      AllEcogestureData[2],
    ])

    const { container } = render(
      <Provider store={store}>
        <ActionChoose
          userChallenge={userChallengeData[1]}
          setFocus={jest.fn()}
        />
      </Provider>
    )
    await waitFor(() => null, { container })
    await userEvent.click(await screen.findByText('action.other'))
    const list = container.getElementsByTagName('mock-ActionList')[0]
    expect(list).toBeInTheDocument()
  })
})