oxios 1.5.2

Oxios Agent OS — Agent Operating System powered by oxi-sdk
import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { EvaluationCard } from '@/components/seed/evaluation-card'
import type { EvaluationResult } from '@/types/seed'

// Mock i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
    i18n: { language: 'en' },
  }),
}))

describe('EvaluationCard', () => {
  it('renders nothing when evaluation is undefined', () => {
    const { container } = render(<EvaluationCard evaluation={undefined} />)
    expect(container.innerHTML).toBe('')
  })

  it('renders all three evaluation categories', () => {
    const evaluation: EvaluationResult = {
      mechanical: { passed: true, details: 'All checks passed' },
      semantic: { passed: true, score: 0.95, details: 'Semantic check passed' },
      consensus: { agreed: true, details: 'Consensus reached' },
      score: 0.92,
      all_passed: true,
    }

    render(<EvaluationCard evaluation={evaluation} />)

    expect(screen.getByText('seeds.mechanical')).toBeInTheDocument()
    expect(screen.getByText('seeds.semantic')).toBeInTheDocument()
    expect(screen.getByText('seeds.consensus')).toBeInTheDocument()
  })

  it('renders pass state with green check icon', () => {
    const evaluation: EvaluationResult = {
      mechanical: { passed: true, details: 'OK' },
      semantic: { passed: true, score: 1.0, details: 'OK' },
      score: 1.0,
      all_passed: true,
    }

    render(<EvaluationCard evaluation={evaluation} />)

    // Green check icon has text-success
    const matches = screen.getAllByText('seeds.mechanical')
    const el = matches[0]!
    const checkIcons =
      el.closest('div[class*="rounded-lg"]')?.querySelector('.text-success') ?? null
    expect(checkIcons).toBeInTheDocument()
  })

  it('renders fail state with red X icon', () => {
    const evaluation: EvaluationResult = {
      mechanical: { passed: false, details: 'Failed' },
      semantic: { passed: true, score: 0.5, details: 'Partial' },
      score: 0.5,
      all_passed: false,
    }

    render(<EvaluationCard evaluation={evaluation} />)

    const failRow = screen.getByText('seeds.mechanical').closest('div[class*="rounded-lg"]')
    const xIcon = failRow?.querySelector('.text-error')
    expect(xIcon).toBeInTheDocument()
  })

  it('renders score bar and badge', () => {
    const evaluation: EvaluationResult = {
      mechanical: { passed: true, details: 'OK' },
      semantic: { passed: true, score: 0.9, details: 'OK' },
      score: 0.75,
      all_passed: true,
    }

    render(<EvaluationCard evaluation={evaluation} />)

    expect(screen.getByText('seeds.score:')).toBeInTheDocument()
    // Badge shows score
    expect(screen.getByText('0.75 / 1.0')).toBeInTheDocument()
  })

  it('renders score of 0 correctly', () => {
    const evaluation: EvaluationResult = {
      mechanical: { passed: false, details: 'Fail' },
      semantic: { passed: false, score: 0, details: 'Fail' },
      score: 0,
      all_passed: false,
    }

    render(<EvaluationCard evaluation={evaluation} />)

    expect(screen.getByText('0.00 / 1.0')).toBeInTheDocument()
  })

  it('renders detail text when provided', () => {
    const evaluation: EvaluationResult = {
      mechanical: { passed: true, details: 'All constraints met' },
      semantic: { passed: true, score: 0.9, details: 'High similarity' },
      consensus: { agreed: true, details: 'Unanimous' },
      score: 0.9,
      all_passed: true,
    }

    render(<EvaluationCard evaluation={evaluation} />)

    expect(screen.getByText('All constraints met')).toBeInTheDocument()
    expect(screen.getByText('High similarity')).toBeInTheDocument()
    expect(screen.getByText('Unanimous')).toBeInTheDocument()
  })
})