import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { CriterionRow } from './CriterionRow'

describe('CriterionRow', () => {
  it('renders id, text, and the verdict badge', () => {
    render(<CriterionRow id="AC-1" text="Login redirects to dashboard" verdict="works" />)
    expect(screen.getByText('AC-1')).toBeInTheDocument()
    expect(screen.getByText('Login redirects to dashboard')).toBeInTheDocument()
    expect(screen.getByText('WORKS')).toBeInTheDocument()
  })

  it('renders an em dash when reachedAt is null', () => {
    render(<CriterionRow id="AC-2" text="Handles empty state" verdict="missing" reachedAt={null} />)
    expect(screen.getByText('—')).toBeInTheDocument()
  })

  it('renders an em dash when reachedAt is omitted', () => {
    render(<CriterionRow id="AC-3" text="Handles error state" verdict="broken" />)
    expect(screen.getByText('—')).toBeInTheDocument()
  })

  it('renders the reachedAt date string when present', () => {
    render(
      <CriterionRow id="AC-4" text="Passes lint" verdict="works" reachedAt="2026-07-12" />,
    )
    expect(screen.getByText('2026-07-12')).toBeInTheDocument()
  })

  it('renders an evidence subline when evidence is present', () => {
    render(
      <CriterionRow
        id="AC-5"
        text="Rate limits requests"
        verdict="unverified"
        evidence="see load-test-report.log"
      />,
    )
    expect(screen.getByText('see load-test-report.log')).toBeInTheDocument()
  })

  it('renders no subline when evidence is absent', () => {
    const { container } = render(<CriterionRow id="AC-6" text="Retries on failure" verdict="missing" />)
    expect(container.querySelectorAll('div').length).toBe(2)
  })
})