import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import TabItem from '../src/components/Tab/TabItem.vue'

describe('TabItem a11y (CANONICAL-016)', () => {
  it('exposes role=tab and aria-selected reflecting active state', () => {
    const active = mount(TabItem, { props: { value: 'a', state: 'active' }, slots: { default: 'Tab A' } })
    expect(active.attributes('role')).toBe('tab')
    expect(active.attributes('aria-selected')).toBe('true')
    expect(active.attributes('tabindex')).toBe('0')

    const normal = mount(TabItem, { props: { value: 'b', state: 'normal' }, slots: { default: 'Tab B' } })
    expect(normal.attributes('aria-selected')).toBe('false')
    expect(normal.attributes('tabindex')).toBe('-1')
  })

  it('disabled item is aria-disabled and not focusable', () => {
    const w = mount(TabItem, { props: { value: 'c', state: 'active', disabled: true }, slots: { default: 'Tab C' } })
    expect(w.attributes('aria-disabled')).toBe('true')
    expect(w.attributes('tabindex')).toBe('-1')
  })

  it('activates on Enter and Space keydown', async () => {
    const selected: (string | number)[] = []
    const w = mount(TabItem, { props: { value: 'd' }, slots: { default: 'Tab D' },
      global: { provide: { tabSelectTab: (v: string | number) => selected.push(v) } } })
    await w.trigger('keydown', { key: 'Enter' })
    await w.trigger('keydown', { key: ' ' })
    expect(selected).toEqual(['d', 'd'])
  })

  it('disabled item does not activate on keydown', async () => {
    const selected: (string | number)[] = []
    const w = mount(TabItem, { props: { value: 'e', disabled: true }, slots: { default: 'Tab E' },
      global: { provide: { tabSelectTab: (v: string | number) => selected.push(v) } } })
    await w.trigger('keydown', { key: 'Enter' })
    expect(selected).toEqual([])
  })
})