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

const sampleItems = [
  {
    id: 1, modality: 'bh_email', sender_id: 'jane@example.com',
    captured_at: '2026-07-13T07:00:00Z', type: 'donation', stage: 'new',
  },
  {
    id: 2, modality: 'voice', sender_id: null,
    captured_at: '2026-07-12T18:00:00Z', type: null, stage: 'new',
  },
]

describe('TriageList', () => {
  it('renders one row per item', () => {
    const wrapper = mount(TriageList, { props: { items: sampleItems } })
    const rows = wrapper.findAll('[data-test="item-row"]')
    expect(rows.length).toBe(2)
  })

  it('emits select-item with the item id when a row is clicked', async () => {
    const wrapper = mount(TriageList, { props: { items: sampleItems } })
    await wrapper.findAll('[data-test="item-row"]')[0].trigger('click')
    expect(wrapper.emitted('select-item')[0]).toEqual([1])
  })

  it('shows the modality badge text for each row', () => {
    const wrapper = mount(TriageList, { props: { items: sampleItems } })
    expect(wrapper.text()).toContain('bh_email')
    expect(wrapper.text()).toContain('voice')
  })
})