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

Nav's Pattern Library

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

describe('Banner', () => {
  it('renders BannerContainer', () => {
    const { getByText } = render(<Banner>My Banner</Banner>)
    expect(getByText(/my banner/i)).toBeTruthy()
  })

  it('renders the supplied icon', async () => {
    render(<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()
    render(<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 () => {
    render(
      <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', () => {
    const { getByText } = render(
      <Banner actionIcon="actions/close" title="my title">
        My Banner
      </Banner>
    )
    expect(getByText(/my title/i)).toBeTruthy()
  })
  it('renders the copy and Copy component', () => {
    const { getByText } = render(<Banner actionIcon="actions/close" copy="my copy" />)
    expect(getByText(/my copy/i)).toBeTruthy()
  })
  it('renders a Link if there is an actionLabel and action', () => {
    const { getByText } = render(<Banner actionLabel="action label" action={jest.fn()} />)
    expect(getByText(/action label/i)).toBeTruthy()
  })

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