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

describe('FieldShell', () => {
  it('connects label, required state, invalid state, and error to the control', () => {
    const wrapper = mount(FieldShell, {
      props: { label: 'Customer name', inputId: 'customer-name', required: true, error: 'Required field' },
      slots: {
        default: ({ inputId, describedBy, invalid, required }) => h('input', {
          id: inputId,
          'aria-describedby': describedBy,
          'aria-invalid': invalid,
          'aria-required': required
        })
      }
    })

    expect(wrapper.get('label').attributes('for')).toBe('customer-name')
    expect(wrapper.get('input').attributes()).toMatchObject({
      id: 'customer-name',
      'aria-describedby': 'customer-name-message',
      'aria-invalid': 'true',
      'aria-required': 'true'
    })
    expect(wrapper.get('[role="alert"]').attributes('id')).toBe('customer-name-message')
    expect(wrapper.text()).toContain('Required field')
  })

  it('uses help text without announcing it as an error', () => {
    const wrapper = mount(FieldShell, {
      props: { label: 'Settlement date', inputId: 'settlement-date', help: 'Use the market calendar date.' },
      slots: { default: ({ inputId, describedBy }) => h('input', { id: inputId, 'aria-describedby': describedBy }) }
    })

    expect(wrapper.get('small').attributes()).toMatchObject({ id: 'settlement-date-message' })
    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
  })
})
