import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import {
  GROK_ACCOUNT_PARITY_RUNS,
  GROK_ACCOUNT_PARITY_SEGMENTS,
  OPT_DATA_INTEGRITY_RUNS,
  OPT_DATA_INTEGRITY_SEGMENTS,
} from './fixtures/forensics'
import { RunLanes } from './RunLanes'

const runs = [...OPT_DATA_INTEGRITY_RUNS, ...GROK_ACCOUNT_PARITY_RUNS]
const segments = [...OPT_DATA_INTEGRITY_SEGMENTS, ...GROK_ACCOUNT_PARITY_SEGMENTS]

describe('RunLanes', () => {
  it('renders a landed X/Y summary for a done run', () => {
    render(<RunLanes runs={runs} segments={segments} />)
    expect(screen.getByText(/landed 4\/4/)).toBeInTheDocument()
  })

  it('renders a crashed outcome in the danger color with a cap marker', () => {
    const { container } = render(<RunLanes runs={runs} segments={segments} />)
    expect(screen.getByText('crash')).toHaveClass('text-danger')
    expect(container.querySelectorAll('.bg-danger')).toHaveLength(1)
  })

  it('attributes each segment to its own run by time range, not to every run', () => {
    const { container } = render(<RunLanes runs={runs} segments={segments} />)
    const lanes = container.querySelectorAll('.grid')
    const doneLaneSegs = lanes[0]?.querySelectorAll('.flex > i')
    const crashLaneSegs = lanes[1]?.querySelectorAll('.flex > i')
    expect(doneLaneSegs).toHaveLength(6)
    expect(crashLaneSegs).toHaveLength(2)
  })
})