import { describe, expect, it } from 'vitest'
import { render, fireEvent, waitFor, screen } from '@testing-library/react'
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogTrigger,
} from './Dialog'
import { spokenPhraseUntil } from './sr-test-utils'

describe('Dialog [SR]', () => {
  it('announces trigger and dialog title when opened', async () => {
    render(
      <Dialog>
        <DialogTrigger>Edit</DialogTrigger>
        <DialogContent>
          <DialogTitle>Profile</DialogTitle>
          <DialogDescription>Update profile details</DialogDescription>
        </DialogContent>
      </Dialog>,
    )

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

    fireEvent.click(screen.getByText('Edit'))
    await waitFor(() => expect(screen.getByRole('dialog', { name: 'Profile' })).toBeTruthy())

    const openedPhrase = await spokenPhraseUntil(document.body, (value) =>
      value.toLowerCase().includes('profile')
    )
    expect(openedPhrase.toLowerCase()).toContain('profile')
  })
})