@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 * as utils from '@navinc/utils'
import Cookies from 'js-cookie'

import { UserFeedback } from './user-feedback.js'

const mockOnce = jest.fn((event, handler) => handler())
jest.mock('in-view', () => (selector) => ({
  once: mockOnce,
}))

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

  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('trackInview()', () => {
    it('sends track call', () => {
      render(<UserFeedback trackingLabel="some_thing" />)

      expect(utils.track).toHaveBeenCalledWith({
        payload: {
          label: 'some_thing: was seen.',
          name: 'some_thing: was seen.',
        },
        type: 'user_feedback',
      })
    })
  })

  describe('trackClick()', () => {
    it('Updates state, track call, 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(utils.track).toHaveBeenCalledWith({
        payload: {
          label: 'some_thing: Thumbs Up',
          name: 'some_thing: Thumbs Up',
        },
        type: 'user_feedback',
      })
      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()
      expect(utils.track).toHaveBeenCalledWith({
        payload: {
          label: 'some_thing: Thumbs Down - Clicked Additional Feedback',
          name: 'some_thing: Thumbs Down - Clicked Additional Feedback',
        },
        type: 'user_feedback',
      })
    })
  })

  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()
    })
  })

  describe('handleSubmitMoreFeedback()', () => {
    it('Updates state, track call, and sets cookie.', async () => {
      render(<UserFeedback trackingLabel="some_thing" />)

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

      fireEvent.change(screen.getByTestId('user-feedback:text-area'), { target: { value: 'It gud!' } })
      fireEvent.click(screen.getByTestId('user-feedback:submit'))

      expect(utils.track).toHaveBeenCalledWith({
        payload: {
          label: 'some_thing: Thumbs Down - Additional Feedback Given',
          name: 'some_thing: Thumbs Down - Additional Feedback Given',
          feedBack: 'It gud!',
        },
        type: 'user_feedback',
      })
    })
  })
})