Bar.spec.tsx

import { scaleBand, ScaleBand, scaleLinear } from 'd3'
import { FluidType, TimeStep } from 'enums'
import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
import * as chartActions from 'store/chart/chart.slice'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
import Bar from './Bar'

const mockXScale: ScaleBand<string> = scaleBand()
  .domain(
    graphData.actualData.map(d =>
      d.date.toLocaleString(DateTime.DATETIME_SHORT)
    )
  )
  .range([0, 10])
  .padding(0.2)

const mockParam = {
  index: 4,
  dataload: graphData.actualData[0],
  compareDataload: graphData.actualData[1],
  fluidType: FluidType.MULTIFLUID,
  timeStep: TimeStep.DAY,
  compare: false,
  xScale: mockXScale,
  yScale: scaleLinear(),
  height: 20,
  isSwitching: false,
  isDuel: false,
}

const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate')

describe('Bar component test', () => {
  const store = createMockEcolyoStore({
    chart: {
      selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
        zone: 'utc',
      }),
    },
    global: mockGlobalState,
  })

  it('should correctly render Multifluid Bar', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} />
        </svg>
      </Provider>
    )
    expect(wrapper.getElement()).toMatchSnapshot()
  })

  it('should correctly render Electricity Bar', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} fluidType={FluidType.ELECTRICITY} />
        </svg>
      </Provider>
    )
    expect(wrapper.getElement()).toMatchSnapshot()
  })

  it('should correctly render Water Bar', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} fluidType={FluidType.WATER} />
        </svg>
      </Provider>
    )
    expect(wrapper.getElement()).toMatchSnapshot()
  })

  it('should correctly render Gas Bar', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} fluidType={FluidType.GAS} />
        </svg>
      </Provider>
    )
    expect(wrapper.getElement()).toMatchSnapshot()
  })

  it('should correctly render Bar with showCompare', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} compare={true} />
        </svg>
      </Provider>
    )
    expect(wrapper.getElement()).toMatchSnapshot()
  })

  it('should correctly render Bar with isSwitching', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} isSwitching={true} />
        </svg>
      </Provider>
    )
    expect(wrapper.getElement()).toMatchSnapshot()
  })

  it('should correctly render Bar with isDuel', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} isDuel={true} />
        </svg>
      </Provider>
    )
    expect(wrapper.getElement()).toMatchSnapshot()
  })

  it('should dispatch selected date when bar is clicked', () => {
    const wrapper = mount(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} />
        </svg>
      </Provider>
    )
    wrapper.find('rect').first().simulate('click')
    expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
    expect(setSelectedDateSpy).toHaveBeenCalledWith(
      graphData.actualData[0].date
    )
  })
})