ActionView.spec.tsx

import { render } from '@testing-library/react'
import ActionView from 'components/Action/ActionView'
import { UserActionState } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
import {
  createMockEcolyoStore,
  mockChallengeState,
} from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'

jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
jest.mock('components/Content/Content', () => 'mock-content')
jest.mock(
  'components/Action/ActionChoose/ActionChoose.tsx',
  () => 'mock-action-choose'
)
jest.mock(
  'components/Action/ActionOnGoing/ActionOnGoing.tsx',
  () => 'mock-action-onGoing'
)
jest.mock(
  'components/Action/ActionDone/ActionDone.tsx',
  () => 'mock-action-done'
)

describe('ActionView component', () => {
  it('should render match snapshot with "Unstarted" state', () => {
    const store = createMockEcolyoStore({
      challenge: {
        ...mockChallengeState,
        currentChallenge: {
          ...userChallengeData[1],
          action: {
            ...userChallengeData[1].action,
            state: UserActionState.UNSTARTED,
          },
        },
      },
    })
    const { container } = render(
      <Provider store={store}>
        <ActionView />
      </Provider>
    )
    expect(container).toMatchSnapshot()
  })
  it('should render match snapshot with "onGoing" state', () => {
    const store = createMockEcolyoStore({
      challenge: {
        ...mockChallengeState,
        currentChallenge: {
          ...userChallengeData[1],
          action: {
            ...userChallengeData[1].action,
            state: UserActionState.ONGOING,
          },
        },
      },
    })
    const { container } = render(
      <Provider store={store}>
        <ActionView />
      </Provider>
    )
    expect(container).toMatchSnapshot()
  })
  it('should render match snapshot with "Notification" state', () => {
    const store = createMockEcolyoStore({
      challenge: {
        ...mockChallengeState,
        currentChallenge: {
          ...userChallengeData[1],
          action: {
            ...userChallengeData[1].action,
            state: UserActionState.NOTIFICATION,
          },
        },
      },
    })
    const { container } = render(
      <Provider store={store}>
        <ActionView />
      </Provider>
    )
    expect(container).toMatchSnapshot()
  })
  it('should render match snapshot with default case', () => {
    const store = createMockEcolyoStore({
      challenge: {
        ...mockChallengeState,
        currentChallenge: {
          ...userChallengeData[1],
          action: {
            ...userChallengeData[1].action,
          },
        },
      },
    })
    const { container } = render(
      <Provider store={store}>
        <ActionView />
      </Provider>
    )
    expect(container).toMatchSnapshot()
  })
})