import { describe, expect, it } from 'vitest'
import { render, fireEvent, screen, waitFor } from '@testing-library/react'
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
} from './DropdownMenu'
import { spokenPhraseUntil } from './sr-test-utils'

describe('DropdownMenu [SR]', () => {
  it('announces trigger and menu item roles and checked state', async () => {
    render(
      <DropdownMenu>
        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Edit</DropdownMenuItem>
          <DropdownMenuCheckboxItem checked>Pinned</DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>,
    )
    const triggerPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('open menu'))
    expect(triggerPhrase.toLowerCase()).toContain('open menu')

    fireEvent.focus(screen.getByText('Open menu'))
    fireEvent.keyDown(screen.getByText('Open menu'), { key: 'ArrowDown' })
    await waitFor(() => expect(screen.getByRole('menuitem')).toBeTruthy())

    const editPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('edit'))
    expect(editPhrase.toLowerCase()).toContain('menuitem')
    expect(editPhrase.toLowerCase()).toContain('edit')

    const pinnedPhrase = await spokenPhraseUntil(document.body, (value) =>
      value.toLowerCase().includes('pinned') && value.toLowerCase().includes('checked')
    )
    expect(pinnedPhrase.toLowerCase()).toContain('pinned')
  })
})