MaxConsumptionCard.spec.tsx

import React from 'react'
import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import * as reactRedux from 'react-redux'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import MaxConsumptionCard from './MaxConsumptionCard'
import { FluidType } from 'enum/fluid.enum'

jest.mock('cozy-ui/transpiled/react/I18n', () => {
  return {
    useI18n: jest.fn(() => {
      return {
        t: (str: string) => str,
      }
    }),
  }
})
const mockStore = configureStore([])
const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')

describe('MaxConsumptionCard component', () => {
  it('should be rendered correctly', () => {
    const store = mockStore({
      ecolyo: {
        global: globalStateData,
      },
    })
    mockUseSelector.mockReturnValue({
      fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS],
    })
    const wrapper = mount(
      <Provider store={store}>
        <MaxConsumptionCard
          analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
            zone: 'utc',
          })}
        />
      </Provider>
    ).getElement()
    expect(wrapper).toMatchSnapshot()
  })
  it('should be rendered with one fluid and not display arrows', () => {
    const store = mockStore({
      ecolyo: {
        global: globalStateData,
      },
    })
    mockUseSelector.mockReturnValue({ fluidTypes: [FluidType.ELECTRICITY] })
    const wrapper = mount(
      <Provider store={store}>
        <MaxConsumptionCard
          analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
            zone: 'utc',
          })}
        />
      </Provider>
    )
    expect(wrapper.find('.arrow').exists()).toBeFalsy()
  })
  it('should be rendered with several fluids and click navigate between fluid', async () => {
    const store = mockStore({
      ecolyo: {
        global: globalStateData,
      },
    })
    mockUseSelector.mockReturnValue({
      fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS],
    })
    const wrapper = mount(
      <Provider store={store}>
        <MaxConsumptionCard
          analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
            zone: 'utc',
          })}
        />
      </Provider>
    )
    expect(wrapper.find('.arrow-next').exists()).toBeTruthy()
    //navigate next
    wrapper
      .find('.arrow-next')
      .first()
      .simulate('click')
    expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
    wrapper
      .find('.arrow-next')
      .first()
      .simulate('click')
    expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
    //navigate prev
    wrapper
      .find('.arrow-prev')
      .first()
      .simulate('click')
    expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
    wrapper
      .find('.arrow-prev')
      .first()
      .simulate('click')
    expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
  })
})