Skip to content
Snippets Groups Projects
AxisBottom.spec.tsx 2.7 KiB
Newer Older
  • Learn to ignore specific revisions
  • Bastien DUMONT's avatar
    Bastien DUMONT committed
    import { scaleBand, ScaleBand } from 'd3-scale'
    
    import { TimeStep } from 'enums'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import { mount } from 'enzyme'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import { DateTime } from 'luxon'
    import React from 'react'
    import { Provider } from 'react-redux'
    
    import { graphData } from 'tests/__mocks__/chartData.mock'
    import { createMockEcolyoStore } from 'tests/__mocks__/store'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import AxisBottom from './AxisBottom'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    
    const mockXScale: ScaleBand<string> = scaleBand()
      .domain(['0', '10'])
      .range([0, 100])
      .padding(0.2)
    
    const mockProps = {
      data: graphData.actualData,
      xScale: mockXScale,
      height: 20,
      marginLeft: 10,
      marginBottom: 10,
    }
    
    describe('AxisBottom component test', () => {
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
      const store = createMockEcolyoStore({
        chart: {
          selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
            zone: 'utc',
          }),
        },
      })
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    
      it('should correctly render YEAR format of AxisBottom', () => {
        const wrapper = mount(
          <Provider store={store}>
            <svg>
              <AxisBottom {...mockProps} timeStep={TimeStep.YEAR} />
            </svg>
          </Provider>
        )
        expect(wrapper.getElement()).toMatchSnapshot()
      })
    
      it('should correctly render MONTH format of AxisBottom', () => {
        const wrapper = mount(
          <Provider store={store}>
            <svg>
              <AxisBottom {...mockProps} timeStep={TimeStep.MONTH} />
            </svg>
          </Provider>
        )
        expect(wrapper.getElement()).toMatchSnapshot()
      })
    
      it('should correctly render DAY format of AxisBottom without duel', () => {
        const wrapper = mount(
          <Provider store={store}>
            <svg>
              <AxisBottom {...mockProps} timeStep={TimeStep.DAY} />
            </svg>
          </Provider>
        )
        expect(wrapper.getElement()).toMatchSnapshot()
      })
    
      it('should correctly render DAY format of AxisBottom with duel', () => {
        const wrapper = mount(
          <Provider store={store}>
            <svg>
              <AxisBottom {...mockProps} timeStep={TimeStep.DAY} isDuel={true} />
            </svg>
          </Provider>
        )
        expect(wrapper.getElement()).toMatchSnapshot()
      })
    
      it('should correctly render WEEK format of AxisBottom', () => {
        const wrapper = mount(
          <Provider store={store}>
            <svg>
              <AxisBottom {...mockProps} timeStep={TimeStep.WEEK} />
            </svg>
          </Provider>
        )
        expect(wrapper.getElement()).toMatchSnapshot()
      })
    
      it('should correctly render HALF_AN_HOUR format of AxisBottom', () => {
        const wrapper = mount(
          <Provider store={store}>
            <svg>
              <AxisBottom {...mockProps} timeStep={TimeStep.HALF_AN_HOUR} />
            </svg>
          </Provider>
        )
        expect(wrapper.getElement()).toMatchSnapshot()
      })
    })