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

Nav's Pattern Library

import { ComparisonScale, ComparisonScaleWithInfo } from './comparison-scale.js'
import { render, screen } from '../tests/with-app-context.js'

describe('<ComparisonScale />', () => {
  it('renders', () => {
    const { queryByText } = render(<ComparisonScale selected={1} options={['low', 'medium', 'high']} />)
    const outterContainer = screen.getByTestId('comparison-scale')
    expect(outterContainer.children.length).toBe(3)
    expect(queryByText(/medium/i)).toBeInTheDocument()
    expect(queryByText(/low/i)).not.toBeInTheDocument()
    expect(queryByText(/high/i)).not.toBeInTheDocument()
  })
})

describe('<ComparisonScaleWithInfo />', () => {
  it('renders', () => {
    const { queryByText } = render(
      <ComparisonScaleWithInfo selected={1} options={['low', 'medium', 'high']} info="testing info" />
    )
    const outterContainer = screen.getByTestId('comparison-scale-with-info')
    expect(outterContainer.children.length).toBe(2)
    expect(queryByText(/medium/i)).toBeInTheDocument()
    expect(queryByText(/low/i)).not.toBeInTheDocument()
    expect(queryByText(/high/i)).not.toBeInTheDocument()
    expect(queryByText(/testing info/i)).toBeInTheDocument()
  })
})