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

import LayoutResizeHandle from '../../components/LayoutResizeHandle.vue'

describe('LayoutResizeHandle', () => {
  it('exposes splitter values and supports arrow, Home, and End keys', async () => {
    const wrapper = mount(LayoutResizeHandle, {
      props: { modelValue: 320, min: 240, max: 480, step: 20, label: 'Resize sidebar', orientation: 'vertical' },
    })

    expect(wrapper.attributes('role')).toBe('separator')
    expect(wrapper.attributes('aria-valuenow')).toBe('320')
    await wrapper.trigger('keydown', { key: 'ArrowRight' })
    await wrapper.trigger('keydown', { key: 'Home' })
    await wrapper.trigger('keydown', { key: 'End' })
    expect(wrapper.emitted('update:modelValue')?.map(event => event[0])).toEqual([340, 240, 480])
  })
})