@navinc/base-react-components/src/banner-toast.spec.js

Nav's Pattern Library

import React from 'react'
import { render, fireEvent, waitFor, screen } from '../tests/with-app-context.js'
import BannerToast from './banner-toast.js'

const throwError = (err = new Error()) => {
  throw err
}

describe('<BannerToast />', () => {
  it('stops/starts animating when moused over/out then dismisses', (done) => {
    const time = 500
    const onDismiss = jest.fn()
    const { getByTestId } = render(<BannerToast onDismiss={onDismiss} time={time} />)
    const timedBar = getByTestId('BannerToast:AnimationBar')

    fireEvent.mouseOver(timedBar)

    expect(timedBar).toHaveStyleRule('animation-play-state', 'paused')

    fireEvent.mouseOut(timedBar)

    expect(timedBar).toHaveStyleRule('animation-play-state', 'running')
    fireEvent.animationEnd(timedBar)

    waitFor(() => expect(onDismiss).toHaveBeenCalled()).then(done)
  })

  it('does not time out when shouldNotTimeout is set', (done) => {
    const time = 500
    const onDismiss = jest.fn()
    render(<BannerToast onDismiss={onDismiss} time={time} shouldNotTimeout />)
    waitFor(throwError).catch(() => {
      expect(onDismiss).not.toHaveBeenCalled()
      done()
    })
  })

  it('dismisses the banner on user action when shouldNotTimeout is set', () => {
    const time = 500
    const onDismiss = jest.fn()
    render(<BannerToast onDismiss={onDismiss} time={time} shouldNotTimeout />)
    screen.findByTestId('banner-dismiss').then((icon) => {
      fireEvent.click(icon)
      expect(onDismiss).toHaveBeenCalled()
    })
  })

  it(`doesn't allow the banner to be dismissed on user action if shouldNotTimeout is not set`, () => {
    const time = 500
    const onDismiss = jest.fn()
    const { getByTestId } = render(<BannerToast onDismiss={onDismiss} time={time} />)
    expect(() => getByTestId('banner-dismiss')).toThrow()
  })

  it('hides the timed bar if the shouldShowTimedBar prop is false', () => {
    const { queryByTestId } = render(<BannerToast shouldShowTimedBar={false} />)
    expect(queryByTestId('BannerToast:AnimationBar')).not.toBeInTheDocument()
  })
})