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

describe('SampleSelectorSampleRow', () => {
  it('renders selected and dragging states', () => {
    const sampleName = 'A very long sample name that gets truncated in narrow panes'
    const wrapper = mount(SampleSelectorSampleRow, {
      props: {
        sample: sampleName,
        selected: true,
        dragging: true,
      },
    })

    expect(wrapper.classes()).toContain('mint-sample-selector__sample--dragging')
    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
    expect(wrapper.text()).toContain(sampleName)
    expect(wrapper.attributes('title')).toBe(sampleName)
    expect(wrapper.attributes('aria-label')).toBe(`Sample: ${sampleName}`)
  })

  it('emits toggle and remove actions', async () => {
    const wrapper = mount(SampleSelectorSampleRow, {
      props: {
        sample: 'S2',
        selected: false,
        removable: true,
      },
    })

    await wrapper.get('input').trigger('change')
    await wrapper.get('button').trigger('click')

    expect(wrapper.emitted('toggle')).toHaveLength(1)
    expect(wrapper.emitted('remove')).toHaveLength(1)
  })

  it('should render a BaseCheckbox sm when mounted', () => {
    const wrapper = mount(SampleSelectorSampleRow, { props: { sample: 'S1', selected: false } })
    expect(wrapper.find('.mint-checkbox__box--sm').exists()).toBe(true)
  })
})