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

describe('Input', () => {
  it('associates with Field label for an accessible name', () => {
    render(
      <Field label="Email">
        <Input />
      </Field>,
    )
    const input = screen.getByRole('textbox', { name: 'Email' })
    expect(input.getAttribute('id')).toBeTruthy()
    expect(screen.getByText('Email').getAttribute('for')).toBe(input.getAttribute('id'))
  })

  it('marks invalid state via aria-invalid (edge: explicit invalid prop)', () => {
    render(<Input aria-label="Code" invalid />)
    expect(screen.getByRole('textbox', { name: 'Code' }).getAttribute('aria-invalid')).toBe('true')
  })

  it('applies token size classes without inline styles', () => {
    render(<Input aria-label="Small" size="sm" />)
    const input = screen.getByRole('textbox', { name: 'Small' })
    expect(input.className).toContain('text-sm')
    expect(input.className).toContain('focus-visible:outline-[var(--mod-focus-ring-color)]')
    expect(input.getAttribute('style')).toBeNull()
  })

  it('stays axe-clean for labeled field markup', async () => {
    const { container } = render(
      <Field label="Email">
        <Input />
      </Field>,
    )
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})