InfoDataConsumptionVisualizer.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 * as storeHooks from 'store/hooks'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer'
import NoDataModal from './NoDataModal'

const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')

describe('InfoDataConsumptionVisualizer component', () => {
  const mockLastDataDate = DateTime.fromISO('2020-10-01T00:00:00.000Z', {
    zone: 'utc',
  })
  const mockDataload: Dataload = baseDataLoad

  const store = createMockEcolyoStore()

  it('should render correctly when data valid', () => {
    const wrapper = mount(
      <Provider store={store}>
        <InfoDataConsumptionVisualizer
          dataload={mockDataload}
          fluidType={FluidType.ELECTRICITY}
          lastDataDate={mockLastDataDate}
        />
      </Provider>
    )
    expect(toJson(wrapper)).toMatchSnapshot()
  })

  describe('should render correctly consumption_visualizer.last_available_data', () => {
    it('case state MISSING', () => {
      const _mockdataLoad = { ...mockDataload, state: DataloadState.MISSING }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.ELECTRICITY}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.last_available_data'
      )
    })
    it('case state UPCOMING', () => {
      const _mockdataLoad = { ...mockDataload, state: DataloadState.UPCOMING }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.ELECTRICITY}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.last_available_data'
      )
    })
    it('case state COMING', () => {
      const _mockdataLoad = {
        ...mockDataload,
        state: DataloadState.COMING,
      }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.ELECTRICITY}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.last_available_data'
      )
    })
    it('case state AGGREGATED_HOLE_OR_MISSING', () => {
      const _mockdataLoad = {
        ...mockDataload,
        state: DataloadState.AGGREGATED_HOLE_OR_MISSING,
      }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.MULTIFLUID}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.last_valid_data_multi'
      )
    })
    it('case state AGGREGATED_WITH_HOLE_OR_MISSING', () => {
      const _mockdataLoad = {
        ...mockDataload,
        state: DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING,
      }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.MULTIFLUID}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.last_valid_data_multi'
      )
    })
    it('case state AGGREGATED_COMING', () => {
      const _mockdataLoad = {
        ...mockDataload,
        state: DataloadState.AGGREGATED_COMING,
      }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.MULTIFLUID}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.last_valid_data_multi'
      )
    })
  })

  describe('should render correctly with why_no_data', () => {
    it('case state EMPTY', () => {
      const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.ELECTRICITY}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.why_no_data'
      )
    })
    it('case state HOLE', () => {
      const _mockdataLoad = { ...mockDataload, state: DataloadState.HOLE }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.ELECTRICITY}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.why_no_data'
      )
    })
    it('case state AGGREGATED_EMPTY', () => {
      const _mockdataLoad = {
        ...mockDataload,
        state: DataloadState.AGGREGATED_EMPTY,
      }
      const wrapper = mount(
        <Provider store={store}>
          <InfoDataConsumptionVisualizer
            dataload={_mockdataLoad}
            fluidType={FluidType.MULTIFLUID}
            lastDataDate={mockLastDataDate}
          />
        </Provider>
      )
      expect(wrapper.find('span').text()).toBe(
        'consumption_visualizer.why_no_data'
      )
    })
  })

  it('should click on last valid data date and move to it', async () => {
    const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
    const wrapper = mount(
      <Provider store={store}>
        <InfoDataConsumptionVisualizer
          dataload={_mockdataLoad}
          fluidType={FluidType.ELECTRICITY}
          lastDataDate={mockLastDataDate}
        />
      </Provider>
    )
    wrapper.find('.error-line').simulate('click')
    expect(wrapper.find(NoDataModal).prop('open')).toBeTruthy()
  })

  it('should click to display NoDataModal', async () => {
    const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
    const wrapper = mount(
      <Provider store={store}>
        <InfoDataConsumptionVisualizer
          dataload={_mockdataLoad}
          fluidType={FluidType.ELECTRICITY}
          lastDataDate={mockLastDataDate}
        />
      </Provider>
    )
    wrapper.find('.error-line').simulate('click')
    expect(mockAppDispatch).toHaveBeenCalled()
  })
})