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

describe('FormField', () => {
  it('should stack label above control by default', () => {
    const wrapper = mount(FormField, {
      props: { label: 'Threshold' },
      slots: { default: '<input class="ctl" />' },
    })
    expect(wrapper.classes()).not.toContain('mint-form-field--row')
    expect(wrapper.find('.mint-form-field__control').exists()).toBe(false)
  })

  it('should wrap the control in a fixed column when layout is row', () => {
    const wrapper = mount(FormField, {
      props: { label: 'Threshold', layout: 'row' },
      slots: { default: '<input class="ctl" />' },
    })
    expect(wrapper.classes()).toContain('mint-form-field--row')
    const children = wrapper.element.children
    expect(children[0].className).toContain('mint-form-field__label-row')
    expect(children[1].className).toContain('mint-form-field__control')
    expect(wrapper.find('.mint-form-field__control .ctl').exists()).toBe(true)
  })
})