@navinc/base-react-components/src/sliding-tabs.spec.js

Nav's Pattern Library

import { screen, render, fireEvent } from '@testing-library/react'
import { Text } from './text.js'
import { SlidingTabs } from './sliding-tabs.js'

describe('SlidingTabs', () => {
  it('renders a group of tabs', () => {
    render(<SlidingTabs />)
    expect(screen.getByTestId('sliding-tabs'))
  })
  it('renders a tab for each Text child element', () => {
    render(
      <SlidingTabs>
        <Text>Tab #1 </Text>
        <Text>Tab #2</Text>
      </SlidingTabs>
    )
    expect(screen.getByTestId('sliding-tabs-children-0'))
    expect(screen.getByTestId('sliding-tabs-children-1'))
  })
  it('renders a glider that transforms onClick of a tab', () => {
    render(
      <SlidingTabs>
        <Text>Tab #1 </Text>
        <Text>Tab #2</Text>
      </SlidingTabs>
    )
    const secondTab = screen.getByTestId('sliding-tabs-children-1')
    const glider = screen.getByTestId('sliding-tabs-glider')
    expect(glider).toHaveStyle('transform: translateX(0);')
    fireEvent.click(secondTab)
    expect(glider).toHaveStyle('transform: translateX(100%);')
  })
})