ActionCard.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 { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
import {
  createMockEcolyoStore,
  mockChallengeState,
} from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ActionCard from './ActionCard'

describe('ActionCard component', () => {
  const store = createMockEcolyoStore({
    challenge: {
      ...mockChallengeState,
      currentChallenge: userChallengeData[1],
    },
  })
  it('should be rendered correctly', async () => {
    const { container } = render(
      <Provider store={store}>
        <ActionCard
          setShowList={jest.fn()}
          setSelectedAction={jest.fn()}
          action={defaultEcogestureData[1]}
          setFocus={jest.fn()}
        />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
  })
  it('should open Ecogesture modal', async () => {
    const { container } = render(
      <Provider store={store}>
        <ActionCard
          setShowList={jest.fn()}
          setSelectedAction={jest.fn()}
          action={defaultEcogestureData[1]}
          setFocus={jest.fn()}
        />
      </Provider>
    )
    await waitFor(() => null, { container })
    await userEvent.click(await screen.findByRole('button'))
    expect(await screen.findByRole('dialog')).toBeInTheDocument()
  })
})