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

describe('UListItem', () => {
  it('should render correctly', () => {
    const wrapper = mount(UListItem)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('is Vue instance', () => {
    const wrapper = mount(UListItem)
    expect(wrapper.vm).toBeTruthy()
  })

  it('should render default slot when type is default', () => {
    const wrapper = mount(UListItem, {
      slots: {
        default: 'UListItem',
      },
      props: {
        type: 'default',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should not render default slot when type is small', () => {
    const wrapper = mount(UListItem, {
      slots: {
        default: 'UListItem',
      },
      props: {
        type: 'small',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should emit currentItemId', async () => {
    const wrapper = mount(UListItem, {
      props: {
        itemId: 1,
      },
    })
    await wrapper.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('currentItemId')
  })

  it('should render prependIcon when prependIcon is true', () => {
    const wrapper = mount(UListItem, {
      props: {
        prependIcon: 'user1',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    const iconComponent = wrapper.findComponent({ name: 'UIcon' })
    expect(iconComponent.exists()).toBe(true)
    expect(iconComponent.props('icon')).toBe('$user1')
  })

  it('should set isHover to true on hover', async () => {
    const wrapper = mount(UListItem)
    await wrapper.trigger('mouseover')
    expect(wrapper.vm.isHover).toBe(true)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should set isHover to false on mouseleave', async () => {
    const wrapper = mount(UListItem)
    await wrapper.trigger('mouseover')
    await wrapper.trigger('mouseleave')
    expect(wrapper.vm.isHover).toBe(false)
  })

  it('should emit currentItemId on click', async () => {
    const wrapper = mount(UListItem, {
      props: {
        itemId: 1,
      },
    })
    await wrapper.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('currentItemId')
    expect(wrapper.emitted().currentItemId[0][0]).toBe(1)
  })
})