@navinc/base-react-components/src/comparison-scale.spec.js

Nav's Pattern Library

import { ComparisonScale, ComparisonScaleWithInfo } from './comparison-scale.js'
import { renderWithContext } from './tests/with-app-context.js'
import { screen } from '@testing-library/react'

describe('<ComparisonScale />', () => {
  it('renders', () => {
    const { rerender } = renderWithContext(<ComparisonScale selected={0} options={['low', 'medium', 'high']} />)

    expect(screen.getByText(/low/i)).toBeInTheDocument()
    expect(screen.queryByText(/medium/i)).not.toBeInTheDocument()
    expect(screen.queryByText(/high/i)).not.toBeInTheDocument()

    rerender(<ComparisonScale selected={1} options={['low', 'medium', 'high']} />)

    expect(screen.queryByText(/low/i)).not.toBeInTheDocument()
    expect(screen.getByText(/medium/i)).toBeInTheDocument()
    expect(screen.queryByText(/high/i)).not.toBeInTheDocument()

    rerender(<ComparisonScale selected={2} options={['low', 'medium', 'high']} />)

    expect(screen.queryByText(/medium/i)).not.toBeInTheDocument()
    expect(screen.queryByText(/low/i)).not.toBeInTheDocument()
    expect(screen.getByText(/high/i)).toBeInTheDocument()
  })
})

describe('<ComparisonScaleWithInfo />', () => {
  it('renders', () => {
    renderWithContext(<ComparisonScaleWithInfo selected={1} options={['low', 'medium', 'high']} info="testing info" />)
    expect(screen.getByText(/medium/i)).toBeInTheDocument()
    expect(screen.queryByText(/low/i)).not.toBeInTheDocument()
    expect(screen.queryByText(/high/i)).not.toBeInTheDocument()
    expect(screen.getByText(/testing info/i)).toBeInTheDocument()
  })
})