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

describe('OrientationPicker', () => {
  it('renders both landscape and portrait options', () => {
    const wrapper = mount(OrientationPicker, { props: { modelValue: 'landscape' } })
    const buttons = wrapper.findAll('[role="radio"]')
    expect(buttons).toHaveLength(2)
    const labels = buttons.map(b => b.find('.orientation-opt__label').text())
    expect(labels).toEqual(['Landscape', 'Portrait'])
  })

  it('marks the active option with --active and aria-checked=true', () => {
    const wrapper = mount(OrientationPicker, { props: { modelValue: 'portrait' } })
    const buttons = wrapper.findAll('[role="radio"]')
    const portrait = buttons.find(b => b.text().includes('Portrait'))!
    const landscape = buttons.find(b => b.text().includes('Landscape'))!
    expect(portrait.classes()).toContain('orientation-opt--active')
    expect(portrait.attributes('aria-checked')).toBe('true')
    expect(landscape.classes()).not.toContain('orientation-opt--active')
    expect(landscape.attributes('aria-checked')).toBe('false')
  })

  it('emits update:modelValue when an option is clicked', async () => {
    const wrapper = mount(OrientationPicker, { props: { modelValue: 'landscape' } })
    const portrait = wrapper.findAll('[role="radio"]').find(b => b.text().includes('Portrait'))!
    await portrait.trigger('click')
    expect(wrapper.emitted('update:modelValue')).toEqual([['portrait']])
  })

  it('renders an SVG diagram per option', () => {
    const wrapper = mount(OrientationPicker, { props: { modelValue: 'landscape' } })
    expect(wrapper.findAll('svg.orientation-opt__diagram')).toHaveLength(2)
  })
})
