import { renderWithContext } from './tests/with-app-context.js'
import { screen } from '@testing-library/react'
import { NumericFlowSteps } from './numeric-flow-steps.js'

describe('<NumericFlowSteps />', () => {
  it('renders with correct classes', () => {
    renderWithContext(
      <NumericFlowSteps
        currentIndex={2}
        steps={[{ content: 'First' }, { content: 'Second' }, { content: 'Third' }, { content: 'Fourth' }]}
      />
    )

    const firstEl = screen.getByText('First')
    const secondEl = screen.getByText('Second')
    const thirdEl = screen.getByText('Third')
    const fourthEl = screen.getByText('Fourth')

    expect(firstEl.parentElement).toHaveClass('complete')
    expect(firstEl.previousElementSibling).toHaveClass('first')
    expect(secondEl.parentElement).toHaveClass('complete')
    expect(thirdEl.parentElement).toHaveClass('active')
    expect(fourthEl.parentElement).toHaveClass('incomplete')
    expect(fourthEl.previousElementSibling).toHaveClass('last')
  })
})