import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import InputBoxBase from '../src/canonical/InputBoxBase.vue'

// showClear === feature==='yes' && status==='Value' && ux==='click' && !!modelValue
const clearProps = { feature: 'yes', status: 'Value', ux: 'click', modelValue: 'hello' } as const

describe('InputBoxBase clear affordance (CANONICAL-013 a11y)', () => {
  it('renders the clear control as a native <button type="button"> with an accessible name', () => {
    const wrapper = mount(InputBoxBase, { props: { ...clearProps } })
    const btn = wrapper.find('button.input-clear-icon')
    expect(btn.exists()).toBe(true)
    expect(btn.attributes('type')).toBe('button')
    expect(btn.attributes('aria-label')).toBe('Clear value')
    // must NOT be a bare span anymore
    expect(wrapper.find('span.input-clear-icon').exists()).toBe(false)
  })

  it('emits update:modelValue with empty string when clear button is activated', async () => {
    const wrapper = mount(InputBoxBase, { props: { ...clearProps } })
    await wrapper.find('button.input-clear-icon').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
  })

  it('does not render the clear control when value is empty', () => {
    const wrapper = mount(InputBoxBase, { props: { ...clearProps, modelValue: '' } })
    expect(wrapper.find('button.input-clear-icon').exists()).toBe(false)
  })

  it('clear button is natively focusable/keyboard-activatable (it is a <button>, so Enter/Space fire click)', async () => {
    const wrapper = mount(InputBoxBase, { props: { ...clearProps } })
    const btn = wrapper.find('button.input-clear-icon')
    // native <button> is focusable without an explicit tabindex; firing a click (what Enter/Space do for buttons) clears
    await btn.trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
  })
})