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

const HOURS = Array.from({length: 24}, (_, i) => i)

const mountWheel = (modelValue = 9) =>
  mount(TimeWheel, {
    props: {modelValue, values: HOURS, ariaLabel: 'Heures'},
    attachTo: document.body,
  })

describe('MalioTimeWheel', () => {
  it('expose le rôle spinbutton et les attributs aria', () => {
    const wrapper = mountWheel(9)
    const el = wrapper.get('[role="spinbutton"]')
    expect(el.attributes('aria-label')).toBe('Heures')
    expect(el.attributes('aria-valuenow')).toBe('9')
    expect(el.attributes('aria-valuemin')).toBe('0')
    expect(el.attributes('aria-valuemax')).toBe('23')
    expect(el.attributes('aria-valuetext')).toBe('09')
  })

  it('rend 3 copies des valeurs (buffer infini)', () => {
    const wrapper = mountWheel()
    expect(wrapper.findAll('[data-test="wheel-item"]')).toHaveLength(24 * 3)
  })

  it('émet la nouvelle valeur au clavier ArrowDown', async () => {
    const wrapper = mountWheel(9)
    await wrapper.get('[role="spinbutton"]').trigger('keydown', {key: 'ArrowDown'})
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([10])
  })

  it('émet la valeur cliquée', async () => {
    const wrapper = mountWheel(9)
    const item = wrapper.findAll('[data-test="wheel-item"]').find((w) => w.text() === '11')!
    await item.trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([11])
  })
})