FeedbackModal.spec.tsx

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import FeedbackModal from 'components/Feedback/FeedbackModal'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore, mockModalState } from 'tests/__mocks__/store'

// Value coming from jest.config
declare let __SAU_LINK__: string

jest.mock('services/environment.service', () => {
  return jest.fn(() => ({
    isProduction: () => true,
  }))
})

jest.mock('components/Hooks/useExploration', () => () => ['', jest.fn()])

describe('FeedbackModal component', () => {
  const store = createMockEcolyoStore({
    modal: { ...mockModalState, isFeedbacksOpen: true },
  })
  beforeEach(() => {
    jest.clearAllMocks()
  })
  it('should render the component', () => {
    const { baseElement } = render(
      <Provider store={store}>
        <FeedbackModal />
      </Provider>
    )
    expect(screen.getByRole('dialog')).toBeInTheDocument()
    expect(baseElement).toMatchSnapshot()
  })

  it('should open the SAU link', async () => {
    global.open = jest.fn()
    render(
      <Provider store={store}>
        <FeedbackModal />
      </Provider>
    )
    await userEvent.click(screen.getByText('feedback.lets_go'))
    expect(window.open).toHaveBeenCalledTimes(1)
    expect(global.open).toHaveBeenCalledWith(`${__SAU_LINK__}?version=0.0.0`)
  })
})