Skip to content
Snippets Groups Projects
Comparison.spec.tsx 3.14 KiB
Newer Older
  • Learn to ignore specific revisions
  • import { render, screen, waitFor } from '@testing-library/react'
    
    import userEvent from '@testing-library/user-event'
    import { FluidType } from 'enums'
    import { PerformanceIndicator } from 'models'
    import React from 'react'
    import { Provider } from 'react-redux'
    import { setPeriod } from 'store/analysis/analysis.slice'
    
    import {
      createMockEcolyoStore,
      mockAnalysisState,
      mockGlobalState,
    } from 'tests/__mocks__/store'
    
    import Comparison from './Comparison'
    
    
    jest.mock(
      'components/Analysis/Comparison/TemperatureComparison.tsx',
      () => 'mock-temperature-comparison'
    )
    
    
    jest.mock('services/consumption.service', () => {
      return jest.fn().mockImplementation(() => ({
        fetchAvgTemperature: jest.fn().mockResolvedValue(25.3),
        getPerformanceIndicators: jest.fn().mockResolvedValue([]),
      }))
    })
    
    const mockFluidsWithData = [
      FluidType.ELECTRICITY,
      FluidType.WATER,
      FluidType.GAS,
    ]
    
    const mockPerformanceIndicators: PerformanceIndicator[] = [
      {
        compareValue: 203.49,
        percentageVariation: 0.12261044768784712,
        value: 178.54,
      },
      {
        compareValue: 7926.82,
        percentageVariation: 0.020542916327102145,
        value: 7763.98,
      },
      {
        compareValue: 1316.46,
        percentageVariation: -0.0009191316105312541,
        value: 1317.67,
      },
    ]
    
    describe('Comparison component', () => {
      it('renders loading state', async () => {
        render(
          <Provider store={createMockEcolyoStore()}>
            <Comparison fluidsWithData={[]} monthPerformanceIndicators={[]} />
          </Provider>
        )
    
        await waitFor(() => {
          expect(screen.getByRole('progressbar')).toBeInTheDocument()
        })
      })
    
      it('switches between monthly and yearly periods', async () => {
        const store = createMockEcolyoStore({
          analysis: { ...mockAnalysisState, period: 'month' },
          global: {
    
            ...mockGlobalState,
    
            fluidTypes: mockFluidsWithData,
          },
        })
    
        const mockDispatch = jest.fn()
        jest.spyOn(store, 'dispatch').mockImplementation(mockDispatch)
    
        render(
          <Provider store={store}>
            <Comparison
              fluidsWithData={mockFluidsWithData}
              monthPerformanceIndicators={mockPerformanceIndicators}
            />
          </Provider>
        )
    
    
        const yearlyButton = await screen.findByRole('tab', {
    
          name: `analysis.compare.year_tab`,
        })
    
        const monthlyButton = await screen.findByRole('tab', {
    
          name: `analysis.compare.month_tab`,
        })
    
    
        await userEvent.click(yearlyButton)
        expect(mockDispatch).toHaveBeenCalledWith(setPeriod('year'))
    
        await userEvent.click(monthlyButton)
        expect(mockDispatch).toHaveBeenCalledWith(setPeriod('month'))
    
      it('renders performance indicators', async () => {
    
        const store = createMockEcolyoStore({
          analysis: { ...mockAnalysisState },
          global: {
    
            ...mockGlobalState,
    
            fluidTypes: mockFluidsWithData,
          },
        })
    
        render(
          <Provider store={store}>
            <Comparison
              fluidsWithData={mockFluidsWithData}
              monthPerformanceIndicators={mockPerformanceIndicators}
            />
          </Provider>
        )
    
    
        const indicators = await screen.findAllByRole('listitem')
    
        expect(indicators.length).toBe(mockFluidsWithData.length)
      })
    })