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

describe('FormItem.label dual-form', () => {
  it('renders label as text via prop', () => {
    const wrapper = mount(FormItem, { props: { label: 'Email' } })

    expect(wrapper.find('.form-item__label').text()).toContain('Email')
  })

  it('renders #label slot when provided', () => {
    const wrapper = mount(FormItem, {
      props: { label: 'Fallback' },
      slots: { label: '<strong>Rich Label</strong>' },
    })

    const label = wrapper.find('.form-item__label')
    expect(label.html()).toContain('<strong>Rich Label</strong>')
    expect(label.text()).not.toContain('Fallback')
  })

  it('renders required asterisk regardless of slot/prop form', () => {
    const wrapperPropForm = mount(FormItem, { props: { label: 'A', required: true } })
    expect(wrapperPropForm.find('.form-item__required').exists()).toBe(true)

    const wrapperSlotForm = mount(FormItem, {
      props: { required: true },
      slots: { label: '<span>B</span>' },
    })
    expect(wrapperSlotForm.find('.form-item__required').exists()).toBe(true)
  })
})