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

Nav's Pattern Library

import { renderWithContext } from './tests/with-app-context.js'
import { fireEvent, waitFor, screen } from '@testing-library/react'
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', async () => {
    const time = 500
    const onDismiss = jest.fn()
    renderWithContext(<BannerToast onDismiss={onDismiss} time={time} />)
    const timedBar = screen.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)

    await waitFor(() => expect(onDismiss).toHaveBeenCalled())
  })

  it('does not time out when shouldNotTimeout is set', async () => {
    const time = 500
    const onDismiss = jest.fn()
    // TODO: shouldNotTimeout shouldn't need to also include shouldShowTimedBar={false}
    renderWithContext(<BannerToast onDismiss={onDismiss} time={time} shouldNotTimeout shouldShowTimedBar={false} />)
    expect(screen.queryByTestId('BannerToast:AnimationBar')).not.toBeInTheDocument()
  })

  it('dismisses the banner on user action when shouldNotTimeout is set', async () => {
    const time = 500
    const onDismiss = jest.fn()
    renderWithContext(<BannerToast onDismiss={onDismiss} time={time} shouldNotTimeout />)
    const icon = await screen.findByTestId('banner-dismiss')
    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()
    renderWithContext(<BannerToast onDismiss={onDismiss} time={time} />)
    expect(screen.queryByTestId('banner-dismiss')).not.toBeInTheDocument()
  })

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