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

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

  it('should render correctly with xs size', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        size: 'xs',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with sm size', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        size: 'sm',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with md size', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        size: 'md',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with lg size', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        size: 'lg',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with xl size', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        size: 'xl',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with xxl size', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        size: 'xxl',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with image', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        imagePath:
          'https://static.vecteezy.com/system/resources/previews/000/439/863/original/vector-users-icon.jpg',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('img').exists()).toBe(true)
    expect(wrapper.find('img').attributes('src')).toBe(
      'https://static.vecteezy.com/system/resources/previews/000/439/863/original/vector-users-icon.jpg'
    )
  })

  it('should render correctly with icon', async () => {
    const wrapper = mount(UAvatar, {
      props: {
        avatarIcon: 'user3',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    const iconComponent = wrapper.findComponent({ name: 'UIcon' })
    expect(iconComponent.exists()).toBe(true)
    expect(iconComponent.props('icon')).toBe('$user3')
  })
})