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

describe('Tabs [SR]', () => {
  it('announces selected tab and updates when another tab is activated', async () => {
    render(
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent value="overview">Overview content</TabsContent>
        <TabsContent value="settings">Settings content</TabsContent>
      </Tabs>,
    )

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

    fireEvent.click(screen.getByRole('tab', { name: 'Settings' }))
    const settingsPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('settings'))
    expect(settingsPhrase.toLowerCase()).toContain('settings')
  })
})