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

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

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

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

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

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

  it('should be render correctly with profile name and text', () => {
    const wrapper = mount(UAvatarGroup, {
      props: {
        profileName: 'John Doe',
        profileText: 'John@test.com',
      },
    })
    expect(wrapper.findComponent({ name: 'UAvatarText' }).exists()).toBe(true)
    expect(
      wrapper.findComponent({ name: 'UAvatarSupportingText' }).exists()
    ).toBe(true)
    expect(wrapper.findComponent({ name: 'UAvatarText' }).text()).toBe(
      'John Doe'
    )
    expect(
      wrapper.findComponent({ name: 'UAvatarSupportingText' }).text()
    ).toBe('John@test.com')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should be render correctly with avatar note', () => {
    const wrapper = mount(UAvatarGroup, {
      props: {
        avatarNote: 'JD',
      },
    })
    expect(wrapper.findComponent({ name: 'UAvatar' }).exists()).toBe(true)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with image', async () => {
    const wrapper = mount(UAvatarGroup, {
      props: {
        imagePath:
          'https://static.vecteezy.com/system/resources/previews/000/439/863/original/vector-users-icon.jpg',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.findComponent({ name: 'UAvatar' }).exists()).toBe(true)
    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(UAvatarGroup, {
      props: {
        avatarIcon: 'user3',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    const iconComponent = wrapper.findComponent({ name: 'UIcon' })
    expect(iconComponent.exists()).toBe(true)
    expect(iconComponent.props('icon')).toBe('$user3')
  })

  it('should emit click event', async () => {
    const wrapper = mount(UAvatarGroup)
    await wrapper.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('click')
  })
})