DataloadConsumptionVisualizer.spec.tsx

import { DataloadState, FluidType } from 'enums'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import DataloadConsumptionVisualizer from './DataloadConsumptionVisualizer'

jest.mock('services/fluidsPrices.service', () => {
  return jest.fn(() => ({
    getAllLastPrices: jest.fn(),
  }))
})

jest.mock(
  'components/ConsumptionVisualizer/DataloadNoValue.tsx',
  () => 'mock-DataloadNoValue'
)
jest.mock(
  'components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx',
  () => 'mock-EstimatedConsumptionModal'
)

const emptyDataLoad = { ...baseDataLoad, value: -1 }
const dataLoadWithValueDetailEmpty: Dataload = {
  ...baseDataLoad,
  valueDetail: [],
}
const dataLoadWithValueDetail: Dataload = {
  ...baseDataLoad,
  valueDetail: [
    { state: DataloadState.VALID, value: 0.612216 },
    { state: DataloadState.VALID, value: 0.675242 },
    { state: DataloadState.VALID, value: 0.6779610000000003 },
  ],
}

describe('Dataload consumption visualizer component', () => {
  const store = createMockEcolyoStore()
  describe('should render nothing', () => {
    it('should render nothing if dataload is null', () => {
      const wrapper = mount(
        <Provider store={store}>
          <DataloadConsumptionVisualizer
            fluidType={FluidType.ELECTRICITY}
            dataload={null as unknown as Dataload}
            compareDataload={baseDataLoad}
            setActive={jest.fn()}
          />
        </Provider>
      )
      expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
        0
      )
    })
    it('should render nothing if dataload is in the future', () => {
      const wrapper = mount(
        <Provider store={store}>
          <DataloadConsumptionVisualizer
            fluidType={FluidType.ELECTRICITY}
            dataload={{ ...baseDataLoad, date: DateTime.local(9999, 1, 1) }}
            compareDataload={baseDataLoad}
            setActive={jest.fn()}
          />
        </Provider>
      )
      expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
        0
      )
    })
  })

  it('should render DataloadNoValue if dataload.state is not valid', () => {
    const wrapper = mount(
      <Provider store={store}>
        <DataloadConsumptionVisualizer
          fluidType={FluidType.ELECTRICITY}
          dataload={{ ...baseDataLoad, state: DataloadState.MISSING }}
          compareDataload={baseDataLoad}
          setActive={jest.fn()}
        />
      </Provider>
    )
    expect(wrapper.find('mock-DataloadNoValue').exists()).toBeTruthy()
  })

  it('should render with single fluid', async () => {
    const wrapper = mount(
      <Provider store={store}>
        <DataloadConsumptionVisualizer
          fluidType={FluidType.ELECTRICITY}
          dataload={baseDataLoad}
          compareDataload={baseDataLoad}
          setActive={jest.fn()}
        />
      </Provider>
    )
    await waitForComponentToPaint(wrapper)
    expect(toJson(wrapper)).toMatchSnapshot()
  })
  it('should render correctly multifluid and 3 clickable links', () => {
    const store = createMockEcolyoStore()
    const wrapper = mount(
      <Provider store={store}>
        <BrowserRouter>
          <DataloadConsumptionVisualizer
            fluidType={FluidType.MULTIFLUID}
            dataload={baseDataLoad}
            compareDataload={baseDataLoad}
            setActive={jest.fn()}
          />
        </BrowserRouter>
      </Provider>
    )
    expect(wrapper.find('.dataloadvisualizer-euro-link').length).toBe(3)
  })

  it('should render with no value to compare available', async () => {
    const store = createMockEcolyoStore({
      chart: { ...mockChartState, showCompare: true },
    })
    const wrapper = mount(
      <Provider store={store}>
        <DataloadConsumptionVisualizer
          fluidType={FluidType.WATER}
          dataload={baseDataLoad}
          compareDataload={emptyDataLoad}
          setActive={jest.fn()}
        />
      </Provider>
    )
    expect(wrapper.find('.dataloadvisualizer-novalue').exists()).toBeTruthy()
  })
  it('should render with water comparison data', async () => {
    const store = createMockEcolyoStore({
      chart: { ...mockChartState, showCompare: true },
    })
    const wrapper = mount(
      <Provider store={store}>
        <DataloadConsumptionVisualizer
          fluidType={FluidType.WATER}
          dataload={baseDataLoad}
          compareDataload={baseDataLoad}
          setActive={jest.fn()}
        />
      </Provider>
    )
    expect(wrapper.find('.water-compare').exists()).toBeTruthy()
  })
  it('should render multifluid with no compare and display estimation modal', async () => {
    const wrapper = mount(
      <Provider store={store}>
        <DataloadConsumptionVisualizer
          fluidType={FluidType.MULTIFLUID}
          dataload={dataLoadWithValueDetailEmpty}
          compareDataload={emptyDataLoad}
          setActive={jest.fn()}
        />
      </Provider>
    )
    expect(wrapper.find('mock-EstimatedConsumptionModal').exists()).toBeTruthy()
  })
  it('should render multifluid with no compare and navigate to singleFluid page', async () => {
    jest.mock('services/converter.service', () => {
      return jest.fn(() => ({
        LoadToEuro: jest.fn(),
      }))
    })

    const wrapper = mount(
      <Provider store={store}>
        <BrowserRouter>
          <DataloadConsumptionVisualizer
            fluidType={FluidType.MULTIFLUID}
            dataload={dataLoadWithValueDetail}
            compareDataload={emptyDataLoad}
            setActive={jest.fn()}
          />
        </BrowserRouter>
      </Provider>
    )
    jest.mock('services/usageEvent.service')
    const mockAddEvent = jest.fn()
    UsageEventService.addEvent = mockAddEvent

    // Render Navlinks to fluids
    wrapper.find('.dataloadvisualizer-euro-fluid').first().simulate('click')
    expect(mockAddEvent).toHaveBeenCalled()
  })
})