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

Nav's Pattern Library

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

const mockSlides = (slideCount = 3) => {
  return Array.from({ length: slideCount }).map((_, i) => <div key={i}>Slide {i}</div>)
}

describe('Carousel', () => {
  test('initially renders the first slide as active', () => {
    renderWithContext(<Carousel>{mockSlides()}</Carousel>)
    expect(screen.getByText('Slide 0')).toBeInTheDocument()
  })

  test('updates activeIndex when the right arrow is clicked', () => {
    renderWithContext(<Carousel>{mockSlides()}</Carousel>)
    fireEvent.click(screen.getByTestId('carousel:rightArrow'))
    expect(screen.getByText('Slide 0')).not.toBeVisible()
    expect(screen.getByText('Slide 1')).toBeInTheDocument()
  })

  test('updates activeIndex when the left arrow is clicked', () => {
    renderWithContext(<Carousel>{mockSlides()}</Carousel>)
    fireEvent.click(screen.getByTestId('carousel:rightArrow'))
    fireEvent.click(screen.getByTestId('carousel:leftArrow'))
    expect(screen.getByText('Slide 1')).not.toBeVisible()
    expect(screen.getByText('Slide 0')).toBeVisible()
  })

  test('updates activeIndex when a dot is clicked', () => {
    renderWithContext(<Carousel>{mockSlides()}</Carousel>)
    fireEvent.click(screen.getByTestId('carousel-dot-1'))
    expect(screen.getByText('Slide 0')).not.toBeVisible()
    expect(screen.getByText('Slide 1')).toBeVisible()
  })

  test('does not go beyond the first slide when the left arrow is clicked', () => {
    renderWithContext(<Carousel>{mockSlides()}</Carousel>)
    expect(screen.queryByTestId('carousel:leftArrow')).not.toBeInTheDocument()
    expect(screen.getByText('Slide 0')).toBeVisible()
    expect(screen.getByText('Slide 2')).not.toBeVisible()
  })

  test('does not go beyond the last slide when the right arrow is clicked', () => {
    const slideCount = 3
    renderWithContext(<Carousel>{mockSlides(slideCount)}</Carousel>)

    let clicks = 0
    while (clicks < slideCount - 1) {
      fireEvent.click(screen.getByTestId('carousel:rightArrow'))
      clicks += 1
    }
    expect(screen.queryByTestId('carousel:rightArrow')).not.toBeInTheDocument()
    expect(screen.getByText('Slide 2')).toBeVisible()
    expect(screen.getByText('Slide 0')).not.toBeVisible()
  })
})