TotalConsumption.spec.tsx

import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
import { Dataload } from 'models'
import React from 'react'
import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { graphData } from '../../../tests/__mocks__/datachartData.mock'
import { mockInitialChartState } from '../../../tests/__mocks__/store'
import TotalConsumption from './TotalConsumption'

jest.mock('cozy-ui/transpiled/react/I18n', () => {
  return {
    useI18n: jest.fn(() => {
      return {
        t: (str: string) => str,
      }
    }),
  }
})

const mockStore = configureStore([])

const store = mockStore({
  ecolyo: {
    chart: {
      mockInitialChartState,
    },
  },
})

const mockHalfHourChartState = {
  ...mockInitialChartState,
  currentTimeStep: TimeStep.HALF_AN_HOUR,
}
mockHalfHourChartState.currentTimeStep = TimeStep.HALF_AN_HOUR

const storeHalfHour = mockStore({
  ecolyo: {
    chart: {
      mockHalfHourChartState,
    },
  },
})

describe('TotalConsumption component', () => {
  it('should be rendered correctly', async () => {
    const component = mount(
      <Provider store={store}>
        <TotalConsumption
          fluidType={FluidType.ELECTRICITY}
          actualData={mockInitialChartState.currentDatachart.actualData}
        />
      </Provider>
    )
    await act(async () => {
      await new Promise(resolve => setTimeout(resolve))
      component.update()
    })
    expect(component).toMatchSnapshot()
  })
  it('should render euro value', async () => {
    const component = mount(
      <Provider store={store}>
        <TotalConsumption
          fluidType={FluidType.ELECTRICITY}
          actualData={graphData.actualData}
        />
      </Provider>
    )
    await act(async () => {
      await new Promise(resolve => setTimeout(resolve))
      component.update()
    })

    expect(component.find('.euro-value').first().text()).toEqual('22,77')
  })
  it('should format multifluid value', async () => {
    const component = mount(
      <Provider store={store}>
        <TotalConsumption
          fluidType={FluidType.MULTIFLUID}
          actualData={graphData.actualData}
        />
      </Provider>
    )
    await act(async () => {
      await new Promise(resolve => setTimeout(resolve))
      component.update()
    })

    expect(component.find('.euro-value').first().text()).toEqual('130,84')
  })
  it('should display ----- when half an hour electricity data is not activated', async () => {
    const emptyData: Dataload[] = []
    const component = mount(
      <Provider store={storeHalfHour}>
        <TotalConsumption
          fluidType={FluidType.ELECTRICITY}
          actualData={emptyData}
        />
      </Provider>
    )
    await act(async () => {
      await new Promise(resolve => setTimeout(resolve))
      component.update()
    })

    expect(component.find('.euro-value').first().text()).toEqual('-----')
  })
})