@navinc/base-react-components/src/user-feedback.spec.js

Nav's Pattern Library

import React from 'react'
import { render, screen, fireEvent, waitFor } from '../tests/with-app-context'
import Cookies from 'js-cookie'
import { UserFeedback } from './user-feedback.js'

describe('UserFeedback', () => {
  jest.mock('js-cookie', () => ({ get: () => '' }))
  beforeEach(() => {
    jest.spyOn(Cookies, 'get').mockImplementation(jest.fn())
  })

  describe('render()', () => {
    it('Renders UserFeedbackContainer.', async () => {
      render(<UserFeedback />)

      await waitFor(() => expect(screen.getByTestId('user-feedback:button-positive')).toBeInTheDocument())
    })
    it('Renders ThankYouMessage if they have given feedback.', async () => {
      render(<UserFeedback isTouched />)

      fireEvent.click(await screen.findByTestId('user-feedback:button-positive'))

      expect(screen.getByTestId('user-feedback:tell-us-more-link')).toBeInTheDocument()
    })
    it('Renders AdditionalFeedbackContainer if they clicked to give more feedback.', async () => {
      render(<UserFeedback />)

      fireEvent.click(await screen.findByTestId('user-feedback:button-positive'))
      fireEvent.click(await screen.findByTestId('user-feedback:tell-us-more-link'))

      expect(screen.queryByTestId('user-feedback:text-area')).toBeInTheDocument()
    })
  })

  describe('trackClick()', () => {
    it('Updates state and sets cookie.', async () => {
      const cookieCall = jest.spyOn(Cookies, 'set').mockImplementation(jest.fn())
      render(<UserFeedback trackingLabel="some_thing" />)

      fireEvent.click(await screen.findByTestId('user-feedback:button-positive'))

      expect(screen.queryByTestId('user-feedback:tell-us-more-link')).toBeInTheDocument()
      expect(cookieCall).toHaveBeenCalledWith('some_thing', true, {
        domain: undefined,
        expires: 30,
        path: '/',
      })
    })
  })

  describe('handleShowMoreFeedback()', () => {
    it('Updates state', async () => {
      render(<UserFeedback trackingLabel="some_thing" />)

      fireEvent.click(await screen.findByTestId('user-feedback:button-negative'))

      expect(screen.queryByTestId('user-feedback:text-area')).not.toBeInTheDocument()
      fireEvent.click(screen.getByTestId('user-feedback:tell-us-more-link'))
      expect(screen.queryByTestId('user-feedback:text-area')).toBeInTheDocument()
    })
  })

  describe('handleHideMoreFeedback()', () => {
    it('Updates state', async () => {
      render(<UserFeedback />)

      fireEvent.click(await screen.findByTestId('user-feedback:button-positive'))
      fireEvent.click(await screen.findByTestId('user-feedback:tell-us-more-link'))

      fireEvent.click(screen.getByTestId('user-feedback:cancel'))
      expect(screen.queryByTestId('user-feedback:text-area')).not.toBeInTheDocument()
    })
  })
})