import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { ScoreCard } from './ScoreCard'
import { SCORE_MULTIDEAL, SCORE_PRESS, SCORE_ZYNC } from './fixtures/scoreboard'

describe('ScoreCard', () => {
  it('renders value/max and an up trend', () => {
    render(<ScoreCard {...SCORE_MULTIDEAL} />)
    expect(screen.getByText('8')).toBeInTheDocument()
    expect(screen.getByText('/34')).toBeInTheDocument()
    expect(screen.getByText('▲ +2 wk')).toBeInTheDocument()
  })

  it('sizes the progress bar fill to value/max', () => {
    const { container } = render(<ScoreCard {...SCORE_MULTIDEAL} />)
    const fill = container.querySelector('i') as HTMLElement
    expect(Number.parseFloat(fill.style.width)).toBeCloseTo(23.529, 2)
  })

  it('renders a flat trend in the danger color', () => {
    render(<ScoreCard {...SCORE_ZYNC} />)
    expect(screen.getByText(/■ flat 9d/)).toBeInTheDocument()
  })

  it('honors a custom bar color class', () => {
    const { container } = render(<ScoreCard {...SCORE_PRESS} />)
    expect(container.querySelector('i')).toHaveClass('bg-info')
  })
})