import { mount } from '@vue/test-utils'
import { h } from 'vue'
import { describe, expect, it } from 'vitest'
import FieldShell from '../FieldShell.vue'
import KsCommandBar from '../KsCommandBar.vue'

describe('shared UI accessibility contract', () => {
  it('connects a required invalid field to its accessible error', () => {
    const wrapper = mount(FieldShell, {
      props: { label: 'Client', inputId: 'client', required: true, error: 'Required' },
      slots: { default: field => h('input', { id: field.inputId, 'aria-describedby': field.describedBy, 'aria-required': field.required, 'aria-invalid': field.invalid }) }
    })
    expect(wrapper.get('label').attributes('for')).toBe('client')
    expect(wrapper.get('[role="alert"]').attributes('id')).toBe('client-message')
    expect(wrapper.get('input').attributes()).toMatchObject({ 'aria-describedby': 'client-message', 'aria-required': 'true', 'aria-invalid': 'true' })
  })

  it('exposes busy commands and blocks their action event', async () => {
    const wrapper = mount(KsCommandBar, { props: { actions: [{ id: 'publish', label: 'Publish', busy: true }] }, global: { stubs: { KsButton: { name: 'KsButton', template: '<button />' } } } })
    expect(wrapper.get('nav').attributes('aria-busy')).toBe('true')
    wrapper.findComponent({ name: 'KsButton' }).vm.$emit('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('execute')).toBeUndefined()
  })
})
