import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import { nextTick } from 'vue'
import BaseButton from '../../components/BaseButton.vue'
import BaseInput from '../../components/BaseInput.vue'
import DoseCalculator from '../../components/DoseCalculator.vue'

async function mountSerial(props: Record<string, unknown> = {}) {
  const wrapper = mount(DoseCalculator, { props: { mode: 'serial', ...props } })
  await nextTick()
  return wrapper
}

describe('DoseCalculator (6c)', () => {
  it('should enter the dilution factor in a BaseInput with a × suffix', async () => {
    const wrapper = await mountSerial()

    expect(wrapper.findAll('.mint-input-group__suffix').map((s) => s.text())).toContain('×')
  })

  it('should enter the number of dilutions in a BaseInput', async () => {
    const wrapper = await mountSerial()

    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('modelValue'))).toContain(8)
  })

  it('should recalculate when the dilution factor changes', async () => {
    const wrapper = await mountSerial()

    wrapper.findAllComponents(BaseInput).find((i) => i.props('modelValue') === 3)!.vm.$emit('update:modelValue', 2)
    await nextTick()

    expect(wrapper.emitted('calculate')?.at(-1)?.[0]).toMatchObject({ steps: expect.any(Array) })
  })

  it('should apply to wells with a primary BaseButton', async () => {
    const wrapper = await mountSerial({ targetWells: ['A1', 'A2'] })

    expect(wrapper.findComponent(BaseButton).props('variant')).toBe('primary')
  })

  it('should size the serial row fields to the 32px control height', async () => {
    const wrapper = await mountSerial()

    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('size'))).toEqual(['sm', 'sm'])
  })
})