@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', () => {
    renderWithContext(<ComparisonScale selected={1} options={['low', 'medium', 'high']} />)
    const outterContainer = screen.getByTestId('comparison-scale')
    expect(outterContainer.children.length).toBe(3)
    expect(screen.getByText(/medium/i)).toBeInTheDocument()
    expect(screen.queryByText(/low/i)).not.toBeInTheDocument()
    expect(screen.queryByText(/high/i)).not.toBeInTheDocument()
  })
})

describe('<ComparisonScaleWithInfo />', () => {
  it('renders', () => {
    renderWithContext(<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(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()
  })
})