Newer
Older
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'
)
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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: {
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: {
fluidTypes: mockFluidsWithData,
},
})
render(
<Provider store={store}>
<Comparison
fluidsWithData={mockFluidsWithData}
monthPerformanceIndicators={mockPerformanceIndicators}
/>
</Provider>
)
const indicators = await screen.findAllByRole('listitem')
expect(indicators.length).toBe(mockFluidsWithData.length)
})
})