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

Nav's Pattern Library

import { CarouselCard } from './carousel-card'
import { screen } from '@testing-library/react'
import { renderWithContext } from './tests/with-app-context.js'

const mockSlides = (slideCount = 3) => {
  return Array.from({ length: slideCount }).map((_, i) => (
    <div data-testid="test-slide-child" key={i}>
      Slide {i}
    </div>
  ))
}

describe('CarouselCard', () => {
  test('renders the carousel card component', () => {
    renderWithContext(<CarouselCard>{mockSlides()}</CarouselCard>)
    expect(screen.getByTestId('carousel')).toBeInTheDocument()
  })

  test('renders the child slides', () => {
    const slideCount = 5
    renderWithContext(<CarouselCard>{mockSlides(slideCount)}</CarouselCard>)
    const childSlides = screen.getAllByTestId('test-slide-child')
    const matchedSlides = childSlides.filter((child, i) => {
      return child.textContent === `Slide ${i}`
    })

    expect(matchedSlides).toHaveLength(slideCount)
  })

  test('does not render a header component when the renderHeader prop is not passed', () => {
    renderWithContext(<CarouselCard>{mockSlides()}</CarouselCard>)
    expect(screen.queryByTestId('carousel-card:header')).not.toBeInTheDocument()
  })

  test('does not render a footer component when the renderFooter prop is not passed', () => {
    renderWithContext(<CarouselCard>{mockSlides()}</CarouselCard>)
    expect(screen.queryByTestId('carousel-card:footer')).not.toBeInTheDocument()
  })

  test('renders a header component when the renderHeader prop is passed', () => {
    renderWithContext(
      <CarouselCard
        renderHeader={() => {
          return <div>Look at this amazing header!</div>
        }}
      >
        {mockSlides()}
      </CarouselCard>
    )

    expect(screen.getByTestId('carousel-card:header')).toBeInTheDocument()
    expect(screen.getByText('Look at this amazing header!')).toBeInTheDocument()
  })

  test('renders a footer component when the renderFooter prop is passed', () => {
    renderWithContext(
      <CarouselCard
        renderFooter={() => {
          return <div>Look at this cool footer!</div>
        }}
      >
        {mockSlides()}
      </CarouselCard>
    )

    expect(screen.getByTestId('carousel-card:footer')).toBeInTheDocument()
    expect(screen.getByText('Look at this cool footer!')).toBeInTheDocument()
  })
})