@navinc/base-react-components/src/standard-card.spec.js

Nav's Pattern Library

import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, screen } from '../tests/with-app-context.js'
import StandardCard from './standard-card.js'

describe('<StyledCard />', () => {
  it('renders the StandardCard.Header', () => {
    render(
      <StandardCard>
        <StandardCard.Header>The header</StandardCard.Header>
      </StandardCard>
    )
    expect(screen.getByText(/the header/i)).toBeInTheDocument()
  })

  it('renders the supplied label to the StandardCard.Header', () => {
    render(
      <StandardCard>
        <StandardCard.Header label="oh, a label">The header</StandardCard.Header>
      </StandardCard>
    )
    expect(screen.getByText(/oh, a label/i)).toBeInTheDocument()
  })

  it('renders the supplied title to the StandardCard.Header', () => {
    render(
      <StandardCard>
        <StandardCard.Header title="fancy title">The header</StandardCard.Header>
      </StandardCard>
    )
    expect(screen.getByText(/fancy title/i)).toBeInTheDocument()
  })

  it('does not render a back button if neither onBack or backHref are supplied to the Footer', () => {
    render(
      <StandardCard>
        <StandardCard.Footer>The Footer</StandardCard.Footer>
      </StandardCard>
    )
    expect(screen.queryByTestId('card:back')).not.toBeInTheDocument()
  })

  it('renders back button if an onBack is supplied to the Footer', () => {
    render(
      <StandardCard>
        <StandardCard.Footer onBack={() => {}}>The Footer</StandardCard.Footer>
      </StandardCard>
    )
    expect(screen.getByTestId('card:back')).toBeInTheDocument()
  })

  it('renders back button if an backHref is supplied to the Footer', () => {
    render(
      <StandardCard>
        <StandardCard.Footer backHref="/back">The Footer</StandardCard.Footer>
      </StandardCard>
    )
    expect(screen.getByTestId('card:back')).toBeInTheDocument()
  })

  it('renders an image if a imageFilename is given to StandardCard.LoadingContent', () => {
    render(
      <StandardCard>
        <StandardCard.LoadingContent imageFilename="image">Loading</StandardCard.LoadingContent>
      </StandardCard>
    )
    expect(screen.getByTestId('card:loading-image')).toBeInTheDocument()
  })

  it('does not render an image if there is no imageFilename given to StandardCard.LoadingContent', () => {
    render(
      <StandardCard>
        <StandardCard.LoadingContent>Loading</StandardCard.LoadingContent>
      </StandardCard>
    )
    expect(screen.queryByTestId('card:loading-image')).not.toBeInTheDocument()
  })

  it('renders StyledFooter', () => {
    render(
      <StandardCard>
        <StandardCard.Footer>Footer</StandardCard.Footer>
      </StandardCard>
    )
    expect(screen.getByText(/footer/i)).toBeInTheDocument()
  })

  it('renders with a button using default text if onAction is supplied', () => {
    render(
      <StandardCard>
        <StandardCard.Footer onAction={() => {}}>Footer</StandardCard.Footer>
      </StandardCard>
    )
    expect(screen.getByText(/next/i)).toBeInTheDocument()
  })

  it('renders with a button using default text if actionHref is supplied', () => {
    render(
      <StandardCard>
        <StandardCard.Footer actionHref="/onward">Footer</StandardCard.Footer>
      </StandardCard>
    )
    expect(screen.getByText(/next/i)).toBeInTheDocument()
  })

  it('renders with a button using default text if actionHref is supplied', () => {
    render(
      <StandardCard>
        <StandardCard.Footer actionHref="/next" actionText="Onward">
          Footer
        </StandardCard.Footer>
      </StandardCard>
    )
    expect(screen.getByText(/onward/i)).toBeInTheDocument()
  })
})