FluidButton.spec.tsx

import { FluidState, FluidType } from 'enums'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import { GlobalState } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import FluidButton from './FluidButton'

describe('FluidButton component', () => {
  const store = createMockEcolyoStore()

  it('should be rendered correctly', async () => {
    const wrapper = mount(
      <Provider store={store}>
        <FluidButton fluidType={FluidType.ELECTRICITY} isActive={false} />
      </Provider>
    )
    await waitForComponentToPaint(wrapper)
    expect(toJson(wrapper)).toMatchSnapshot()
  })

  it('should render multifluidButton', () => {
    const wrapper = mount(
      <Provider store={store}>
        <FluidButton fluidType={FluidType.MULTIFLUID} isActive={false} />
      </Provider>
    )
    expect(wrapper.find('.multifluid')).toBeTruthy()
  })
  it('should render active button', () => {
    const wrapper = mount(
      <Provider store={store}>
        <FluidButton fluidType={FluidType.GAS} isActive={false} />
      </Provider>
    )
    expect(wrapper.find('.active')).toBeTruthy()
  })

  it('should trigger nav event', () => {
    jest.mock('services/usageEvent.service')
    const mockAddEvent = jest.fn()
    UsageEventService.addEvent = mockAddEvent
    const wrapper = mount(
      <Provider store={store}>
        <FluidButton fluidType={FluidType.GAS} isActive={false} />
      </Provider>
    )
    wrapper.find('.fluid-button').simulate('click')
    expect(mockAddEvent).toHaveBeenCalled()
  })

  it('should render errored button', () => {
    const updatedInitialState: GlobalState = {
      ...mockGlobalState,
    }
    updatedInitialState.fluidStatus[FluidType.GAS].status = FluidState.ERROR
    const store = createMockEcolyoStore({
      global: updatedInitialState,
    })
    const wrapper = mount(
      <Provider store={store}>
        <FluidButton fluidType={FluidType.GAS} isActive={false} />
      </Provider>
    )
    expect(wrapper.find('.notif-error')).toBeTruthy()
  })
})