MaxConsumptionCard.spec.tsx

import { render, screen, waitFor } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { FluidType } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import MaxConsumptionCard from './MaxConsumptionCard'

const mockGetGraphData = jest.fn(() => graphData)
jest.mock('services/consumption.service', () => {
  return jest.fn(() => ({
    getMaxLoad: jest.fn(() => 0),
    getGraphData: mockGetGraphData,
  }))
})

describe('MaxConsumptionCard component', () => {
  const store = createMockEcolyoStore()
  it('should be rendered correctly', async () => {
    const { container } = render(
      <Provider store={store}>
        <MaxConsumptionCard
          fluidsWithData={[FluidType.ELECTRICITY, FluidType.GAS]}
        />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
  })
  it('should be rendered with one fluid and not display arrows', async () => {
    const { container } = render(
      <Provider store={store}>
        <MaxConsumptionCard fluidsWithData={[FluidType.ELECTRICITY]} />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(
      screen.getByLabelText('consumption.accessibility.button_previous_value')
    ).toBeDisabled()
    expect(
      screen.getByLabelText('consumption.accessibility.button_next_value')
    ).toBeDisabled()
  })
  it('should be rendered with several fluids and click navigate between fluid', async () => {
    const { container } = render(
      <Provider store={store}>
        <MaxConsumptionCard
          fluidsWithData={[FluidType.ELECTRICITY, FluidType.GAS]}
        />
      </Provider>
    )
    await waitFor(() => null, { container })
    const prevButton = screen.getByLabelText(
      'consumption.accessibility.button_previous_value'
    )
    const nextButton = screen.getByLabelText(
      'consumption.accessibility.button_next_value'
    )

    // navigate next
    await userEvent.click(nextButton)
    expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()

    await userEvent.click(nextButton)
    expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()

    // navigate prev
    await userEvent.click(prevButton)
    expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()

    await userEvent.click(prevButton)
    expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
  })
})