DataloadConsumptionVisualizer.spec.tsx

import { DataloadState, FluidType } from 'enums'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
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'

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

const mockChartStateLoaded = { ...mockChartState, loading: false }
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', () => {
  it('should render with single fluid', async () => {
    const store = createMockEcolyoStore({
      chart: mockChartStateLoaded,
    })
    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: { ...mockChartStateLoaded, 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: { ...mockChartStateLoaded, 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 store = createMockEcolyoStore({
      chart: mockChartStateLoaded,
    })

    const wrapper = mount(
      <Provider store={store}>
        <DataloadConsumptionVisualizer
          fluidType={FluidType.MULTIFLUID}
          dataload={dataLoadWithValueDetailEmpty}
          compareDataload={emptyDataLoad}
          setActive={jest.fn()}
        />
      </Provider>
    )
    expect(wrapper.find('.estimated').first().simulate('click'))
  })
  it('should render multifluid with no compare and navigate to singleFluid page', async () => {
    const store = createMockEcolyoStore({
      chart: mockChartStateLoaded,
    })
    const mockLoadToEuro = jest.fn()
    jest.mock('services/converter.service', () => {
      return jest.fn(() => ({
        LoadToEuro: mockLoadToEuro,
      }))
    })

    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()
  })
})