TemperatureComparison.spec.tsx

import { render, screen, waitFor } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import TemperatureComparison from './TemperatureComparison'

const mockFetchAvgTemperature = jest.fn<Promise<number | null>, []>()
jest.mock('services/consumption.service', () => {
  return jest.fn(() => ({
    fetchAvgTemperature: mockFetchAvgTemperature,
  }))
})

jest
  .spyOn(DateTime.prototype, 'toLocaleString')
  .mockReturnValue('novembre 2022')

describe('TemperatureComparison component', () => {
  const store = createMockEcolyoStore()
  afterEach(() => {
    jest.clearAllMocks()
  })

  it('should render a loader', async () => {
    render(
      <Provider store={store}>
        <TemperatureComparison />
      </Provider>
    )
    await waitFor(() => {
      expect(screen.getByRole('progressbar')).toBeInTheDocument()
    })
  })

  it('should be rendered correctly with no data', async () => {
    mockFetchAvgTemperature.mockResolvedValueOnce(null)
    mockFetchAvgTemperature.mockResolvedValueOnce(0)
    const { container } = render(
      <Provider store={store}>
        <TemperatureComparison />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
  })
  it('should be rendered correctly with hot result', async () => {
    mockFetchAvgTemperature.mockResolvedValueOnce(1)
    mockFetchAvgTemperature.mockResolvedValueOnce(2)
    const { container } = render(
      <Provider store={store}>
        <TemperatureComparison />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
    expect(
      await screen.findByText('analysis.temperature_comparison.unit')
    ).toBeInTheDocument()
  })
  it('should be rendered correctly with cold result', async () => {
    mockFetchAvgTemperature.mockResolvedValueOnce(2)
    mockFetchAvgTemperature.mockResolvedValueOnce(1)
    const { container } = render(
      <Provider store={store}>
        <TemperatureComparison />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
  })

  it('should open the modal', async () => {
    mockFetchAvgTemperature.mockResolvedValueOnce(1)
    mockFetchAvgTemperature.mockResolvedValueOnce(2)
    const { container } = render(
      <Provider store={store}>
        <TemperatureComparison />
      </Provider>
    )
    await waitFor(() => container)
    await userEvent.click(
      screen.getByLabelText('analysis.temperature_comparison.info_button')
    )
    expect(screen.getByRole('dialog')).toBeInTheDocument()
  })
})