WelcomeModal.spec.tsx

import { act, render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import WelcomeModal from './WelcomeModal'

jest.mock('components/Hooks/useUserInstanceSettings', () => {
  return jest.fn(() => ({
    instanceSettings: {
      // eslint-disable-next-line camelcase
      public_name: 'mocked_public_name',
    },
  }))
})
jest.mock('services/environment.service', () => {
  return jest.fn(() => ({
    getPublicURL: () => 'https://ecolyo-agent-rec.grandlyon.com',
  }))
})
const mockSendMail = jest.fn()
jest.mock('services/mail.service', () => {
  return jest.fn(() => ({
    SendMail: mockSendMail,
  }))
})
jest.mock('notifications/welcome.hbs', () => {
  return jest.fn(() => ({
    welcomeTemplate: jest.fn(),
  }))
})
jest.mock('mjml-browser', () => {
  return jest.fn(() => ({
    mjml2html: jest.fn(),
  }))
})
jest.mock('services/profile.service')

const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')

describe('WelcomeModal component', () => {
  const store = createMockEcolyoStore()
  it('should be rendered correctly', () => {
    const { baseElement } = render(
      <Provider store={store}>
        <WelcomeModal open={true} />
      </Provider>
    )
    expect(baseElement).toMatchSnapshot()
    expect(screen.getByRole('dialog')).toBeInTheDocument()
  })

  it('should not be rendered', () => {
    const { container } = render(
      <Provider store={store}>
        <WelcomeModal open={false} />
      </Provider>
    )
    expect(container.firstChild).toBeNull()
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
  })

  describe('should test modal interactivity', () => {
    it('should send mail and update profile when user click on the ok button', async () => {
      render(
        <Provider store={store}>
          <WelcomeModal open={true} />
        </Provider>
      )
      await act(async () => {
        await userEvent.click(
          screen.getByText('onboarding.welcomeModal.button_valid')
        )
      })
      expect(mockSendMail).toHaveBeenCalled()
      expect(updateProfileSpy).toHaveBeenCalledWith({
        isFirstConnection: false,
        onboarding: {
          isWelcomeSeen: true,
        },
      })
    })

    it('should send mail and update profile when modal is closed by user', async () => {
      render(
        <Provider store={store}>
          <WelcomeModal open={true} />
        </Provider>
      )
      await act(async () => {
        await userEvent.click(
          screen.getAllByLabelText(
            'onboarding.welcomeModal.accessibility.button_valid'
          )[0]
        )
      })
      expect(mockSendMail).toHaveBeenCalled()
      expect(updateProfileSpy).toHaveBeenCalledWith({
        isFirstConnection: false,
        onboarding: {
          isWelcomeSeen: true,
        },
      })
    })
  })
})