import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import DoseCalculatorVolumeField from '../../components/DoseCalculatorVolumeField.vue'
import FormField from '../../components/FormField.vue'
import UnitInput from '../../components/UnitInput.vue'
import type { VolumeUnit } from '../../composables/useDoseCalculator'

const units: VolumeUnit[] = ['µL', 'mL', 'L']

function mountField(modelValue = { value: 1, unit: 'mL' as VolumeUnit }) {
  return mount(DoseCalculatorVolumeField, { props: { label: 'Final Volume', modelValue, units } })
}

describe('DoseCalculatorVolumeField', () => {
  it('should emit value updates while preserving the current unit', async () => {
    const wrapper = mountField()

    await wrapper.get('input').setValue('2.5')

    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ value: 2.5, unit: 'mL' }])
  })

  it('should emit unit updates while preserving the current value', () => {
    const wrapper = mountField({ value: 100, unit: 'µL' })

    wrapper.findComponent(UnitInput).vm.$emit('update:unit', 'mL')

    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ value: 100, unit: 'mL' }])
  })

  it('should ignore an emptied value', async () => {
    const wrapper = mountField()

    await wrapper.get('input').setValue('')

    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })

  it('should offer every volume unit in the UnitInput segment (6c)', () => {
    const wrapper = mountField()

    expect(wrapper.findComponent(UnitInput).props('units').map((u: { value: string }) => u.value)).toEqual(units)
  })

  it('should lay the field out as a FormField row (6c)', () => {
    const wrapper = mountField()

    expect(wrapper.findComponent(FormField).props('layout')).toBe('row')
  })

  it('should size the volume field to the 32px control height', () => {
    const wrapper = mountField()

    expect(wrapper.findComponent(UnitInput).props('size')).toBe('sm')
  })
})