Bar.spec.tsx

import { render } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { scaleLinear } from 'd3'
import { FluidType, TimeStep } from 'enums'
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,
  mockChartState,
  mockGlobalState,
} from 'tests/__mocks__/store'
import { mockXScale } from 'tests/__mocks__/xScale.mock'
import Bar from './Bar'

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: {
      ...mockChartState,
      selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
        zone: 'utc',
      }),
    },
    global: mockGlobalState,
  })

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

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

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

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

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

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

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

  it('should dispatch selected date when bar is clicked', async () => {
    const { container } = render(
      <Provider store={store}>
        <svg>
          <Bar {...mockParam} />
        </svg>
      </Provider>
    )
    await userEvent.click(container.querySelector('rect') as Element)
    expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
    expect(setSelectedDateSpy).toHaveBeenCalledWith(
      graphData.actualData[0].date
    )
  })
})