TotalConsumption.spec.tsx

import { FluidType, TimeStep } from 'enums'
import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import TotalConsumption from './TotalConsumption'

const mockChartStore = createMockEcolyoStore({
  chart: {
    ...mockChartState,
    currentDatachart: graphData,
  },
})

describe('TotalConsumption component', () => {
  it('should be rendered correctly', async () => {
    const component = mount(
      <Provider store={mockChartStore}>
        <TotalConsumption fluidType={FluidType.ELECTRICITY} />
      </Provider>
    )
    await waitForComponentToPaint(component)
    expect(component).toMatchSnapshot()
  })
  it('should render euro value', async () => {
    const component = mount(
      <Provider store={mockChartStore}>
        <TotalConsumption fluidType={FluidType.ELECTRICITY} />
      </Provider>
    )
    await waitForComponentToPaint(component)

    expect(component.find('.euro-value').first().text()).toEqual('22,77')
  })
  it('should format multifluid value', async () => {
    const component = mount(
      <Provider store={mockChartStore}>
        <TotalConsumption fluidType={FluidType.MULTIFLUID} />
      </Provider>
    )
    await waitForComponentToPaint(component)

    expect(component.find('.euro-value').first().text()).toEqual('130,84')
  })
  it('should format multifluid value AND compared value', async () => {
    const store = createMockEcolyoStore({
      chart: {
        ...mockChartState,
        currentDatachart: graphData,
        showCompare: true,
        currentTimeStep: TimeStep.DAY,
      },
    })
    const component = mount(
      <Provider store={store}>
        <TotalConsumption fluidType={FluidType.MULTIFLUID} />
      </Provider>
    )
    await waitForComponentToPaint(component)

    expect(component.find('.euro-value').first().text()).toEqual('130,84')
    expect(component.find('.euro-value').at(1).text()).toEqual('110,66')
  })
  it('should display ----- when half an hour electricity data is not activated', async () => {
    const store = createMockEcolyoStore()
    const component = mount(
      <Provider store={store}>
        <TotalConsumption fluidType={FluidType.ELECTRICITY} />
      </Provider>
    )
    await waitForComponentToPaint(component)

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