import { describe, expect, it } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { axe } from 'vitest-axe'
import { Tooltip } from './Tooltip'

describe('Tooltip', () => {
  it('reveals content on focus (never hover-only) so it is keyboard-reachable', async () => {
    render(
      <Tooltip content="Saved automatically">
        <button type="button">Save</button>
      </Tooltip>,
    )
    fireEvent.focus(screen.getByRole('button', { name: 'Save' }))
    // Radix renders the tooltip content (role=tooltip) on focus; allow the open microtask.
    expect(await screen.findAllByText('Saved automatically')).not.toHaveLength(0)
  })

  it('uses token-backed tooltip chrome and stays axe-clean', async () => {
    const { container } = render(
      <Tooltip content="Saved automatically">
        <button type="button">Save</button>
      </Tooltip>,
    )
    fireEvent.focus(screen.getByRole('button', { name: 'Save' }))
    const visibleTooltipText = (await screen.findAllByText('Saved automatically')).find(
      (element) => element.closest('[data-state]') !== null,
    )
    expect(visibleTooltipText?.closest('[data-state]')?.className).toContain('shadow-[var(--mod-shadow-sm)]')
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})