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

describe('Avatar', () => {
  it('shows the fallback when the image has not loaded (jsdom never loads images)', () => {
    render(<Avatar src="/x.png" alt="Alex Doe" fallback="AD" />)
    expect(screen.getByText('AD')).toBeTruthy()
  })

  it('renders the fallback when no src is given (edge)', () => {
    render(<Avatar alt="No image" fallback="NI" />)
    expect(screen.getByText('NI')).toBeTruthy()
  })

  it('uses token-backed chrome and stays axe-clean', async () => {
    const { container } = render(<Avatar alt="Alex Doe" fallback="AD" />)
    const root = container.firstElementChild as HTMLElement
    expect(root.className).toContain('border-border')
    expect(root.className).toContain('bg-[var(--mod-color-accent-3)]')
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})