import { describe, expect, it } from 'vitest'
import { render, fireEvent, screen } from '@testing-library/react'
import { RadioGroup, Radio } from './RadioGroup'
import { spokenPhraseUntil } from './sr-test-utils'

describe('RadioGroup [SR]', () => {
  it('announces radiogroup and radio selection changes', async () => {
    render(
      <RadioGroup aria-label="Plan">
        <Radio value="free" aria-label="Free" />
        <Radio value="pro" aria-label="Pro" />
      </RadioGroup>,
    )

    const groupPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('plan'))
    expect(groupPhrase.toLowerCase()).toContain('plan')

    const pro = screen.getByRole('radio', { name: 'Pro' })
    fireEvent.click(pro)
    const selectedPhrase = await spokenPhraseUntil(document.body, (value) => {
      const lowered = value.toLowerCase()
      return lowered.includes('pro') && lowered.includes('checked') && !lowered.includes('not checked')
    })
    expect(selectedPhrase.toLowerCase()).toContain('pro')
    expect(selectedPhrase.toLowerCase()).not.toContain('not checked')
  })
})