import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import KsFormGrid from '../KsFormGrid.vue'
import KsFormSection from '../KsFormSection.vue'
import KsFormSpan from '../KsFormSpan.vue'
import KsValidationSummary from '../KsValidationSummary.vue'

describe('KBX-derived vendor-neutral form components', () => {
  it('keeps grid semantics and collapses its layout by tokenized CSS', () => {
    const wrapper = mount(KsFormGrid, { props: { columns: 2, ariaLabel: '고객 정보' }, slots: { default: '<input aria-label="이름">' } })
    expect(wrapper.attributes('role')).toBe('group')
    expect(wrapper.attributes('aria-label')).toBe('고객 정보')
    expect(wrapper.attributes('data-columns')).toBe('2')
  })

  it('allows a field to span the full form row', () => {
    expect(mount(KsFormSpan, { props: { span: 'full' } }).attributes('data-span')).toBe('full')
  })

  it('provides an explicit heading and optional actions without a provider dependency', () => {
    const wrapper = mount(KsFormSection, { props: { title: '주문 조건', labelledBy: 'order-condition' }, slots: { actions: '<button>초기화</button>' } })
    expect(wrapper.find('h2').attributes('id')).toBe('order-condition')
    expect(wrapper.get('button').text()).toBe('초기화')
  })

  it('announces every supplied validation error', () => {
    const wrapper = mount(KsValidationSummary, { props: { errors: [{ field: 'amount', message: '금액을 입력하세요.' }, { field: 'date', message: '일자를 확인하세요.' }] } })
    expect(wrapper.attributes('role')).toBe('alert')
    expect(wrapper.findAll('li')).toHaveLength(2)
  })
})
