import { describe, it, expect } from 'vitest'
import { h } from 'vue'
import { mount } from '@vue/test-utils'
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../src/lib'

const RIVERS = ['Styx', 'Acheron', 'Cocytus']

function mountSelect(modelValue: string | undefined) {
  return mount(Select, {
    props: { modelValue },
    slots: {
      default: () => [
        h(SelectTrigger, undefined, {
          default: () => h(SelectValue, { placeholder: 'Choose a river' }),
        }),
        h(SelectContent, undefined, {
          default: () => RIVERS.map((r) => h(SelectItem, { value: r }, { default: () => r })),
        }),
      ],
    },
    attachTo: document.body,
  })
}

describe('Select', () => {
  it('renders the trigger with the placeholder when no value is selected', () => {
    const wrapper = mountSelect(undefined)
    expect(wrapper.text()).toContain('Choose a river')
  })

  it('shows the selected value in the trigger once the item has rendered', async () => {
    const wrapper = mountSelect('Styx')
    // SelectValue resolves its display label from the matching SelectItem, which only
    // mounts once the dropdown has opened at least once.
    await wrapper.get('button[role="combobox"]').trigger('click')
    expect(wrapper.text()).toContain('Styx')
  })
})