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

Nav's Pattern Library

import React from 'react'
import { 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', () => {
    const { getByTestId } = render(<SlidingTabs />)
    expect(getByTestId('sliding-tabs'))
  })
  it('renders a tab for each Text child element', () => {
    const { getByTestId } = render(
      <SlidingTabs>
        <Text>Tab #1 </Text>
        <Text>Tab #2</Text>
      </SlidingTabs>
    )
    expect(getByTestId('sliding-tabs-children-0'))
    expect(getByTestId('sliding-tabs-children-1'))
  })
  it('renders a glider that transforms onClick of a tab', () => {
    const { getByTestId } = render(
      <SlidingTabs>
        <Text>Tab #1 </Text>
        <Text>Tab #2</Text>
      </SlidingTabs>
    )
    const secondTab = getByTestId('sliding-tabs-children-1')
    const glider = getByTestId('sliding-tabs-glider')
    expect(glider.getAttribute('style')).toBe('transform: translateX(0);')
    fireEvent.click(secondTab)
    expect(glider.getAttribute('style')).toBe('transform: translateX(100%);')
  })
})