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

Nav's Pattern Library

import { renderWithContext } from './tests/with-app-context.js'
import { fireEvent, screen } from '@testing-library/react'
import { Banner } from './banner.js'

describe('Banner', () => {
  it('renders BannerContainer', () => {
    renderWithContext(<Banner>My Banner</Banner>)
    expect(screen.getByText(/my banner/i)).toBeInTheDocument()
  })

  it('renders the supplied icon', async () => {
    renderWithContext(<Banner icon="actions/minus">My Banner</Banner>)
    const icon = await screen.findByTestId('banner-icon')
    expect(icon).toBeInTheDocument()
  })
  it('renders an actionIcon with onClick of onDismiss if there is onDismiss', async () => {
    const onDismiss = jest.fn()
    renderWithContext(<Banner onDismiss={onDismiss}>My Banner</Banner>)
    const icon = await screen.findByTestId('banner-dismiss')
    fireEvent.click(icon)
    expect(onDismiss).toHaveBeenCalled()
  })

  it('renders the supplied actionIcon', async () => {
    renderWithContext(
      <Banner actionIcon="actions/close" actionHref="/asdf">
        My Banner
      </Banner>
    )
    const icon = await screen.findByTestId('action-icon')
    expect(icon).toBeInTheDocument()
  })
  it('renders the title and Copy component', () => {
    renderWithContext(
      <Banner actionIcon="actions/close" title="my title">
        My Banner
      </Banner>
    )
    expect(screen.getByText(/my title/i)).toBeInTheDocument()
  })
  it('renders the copy and Copy component', () => {
    renderWithContext(<Banner actionIcon="actions/close" copy="my copy" />)
    expect(screen.getByText(/my copy/i)).toBeInTheDocument()
  })
  it('renders a Link if there is an actionLabel and action', () => {
    renderWithContext(<Banner actionLabel="action label" action={jest.fn()} />)
    expect(screen.getByText(/action label/i)).toBeInTheDocument()
  })

  it('renders a Link if there is an actionHref and action', () => {
    renderWithContext(<Banner actionHref="/action-href" />)
    expect(screen.getByRole('link')).toBeInTheDocument()
  })
  it('passes action props to underlying links', () => {
    renderWithContext(<Banner actionTarget="_blank" actionHref="/home" actionLabel="action label" />)
    expect(screen.getByText(/action label/i).target).toBe('_blank')
  })
})