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

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

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

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

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

  it('should render correctly with the passed number', () => {
    const wrapper = mount(UTag, {
      props: {
        count: 1,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    const UTagCount = wrapper.findComponent({
      name: 'UInnerTagCount',
    })
    expect(UTagCount.exists()).toBe(true)
    expect(UTagCount.text()).toBe('1')
  })

  it('should render correctly with isChecked true', () => {
    const wrapper = mount(UTag, {
      props: {
        isChecked: true,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    const UTagChecked = wrapper.findComponent({
      name: 'UInnerTagCheckbox',
    })
    expect(UTagChecked.exists()).toBe(true)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with closed', () => {
    const wrapper = mount(UTag, {
      props: {
        closed: true,
      },
    })
    const UTagClosed = wrapper.findComponent({ name: 'UInnerTagClose' })
    expect(UTagClosed.exists()).toBe(true)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render avatar with image correctly', () => {
    const wrapper = mount(UTag, {
      props: {
        avatarImagePath:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuUOrooQg0C2ttpGO1ZMVWzN9VupGoxcnJ_xCIWyA&s',
      },
    })
    const UTagAvatar = wrapper.findComponent({ name: 'UAvatar' })
    expect(UTagAvatar.exists()).toBe(true)
    expect(UTagAvatar.props('imagePath')).toBe(
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuUOrooQg0C2ttpGO1ZMVWzN9VupGoxcnJ_xCIWyA&s'
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render avatar with text correctly', () => {
    const wrapper = mount(UTag, {
      props: {
        avatarText: 'AR',
      },
    })
    const UTagAvatar = wrapper.findComponent({ name: 'UAvatar' })
    expect(UTagAvatar.exists()).toBe(true)
    expect(UTagAvatar.text()).toBe('AR')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should emit event when checkbox is clicked', async () => {
    const wrapper = mount(UTag, {
      props: {
        isChecked: true,
      },
    })
    const UTagChecked = wrapper.findComponent({
      name: 'UInnerTagCheckbox',
    })
    await UTagChecked.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('click')
  })

  it('should emit event when close is clicked', async () => {
    const wrapper = mount(UTag, {
      props: {
        closed: true,
      },
    })
    const UTagClosed = wrapper.findComponent({ name: 'UInnerTagClose' })
    await UTagClosed.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('delete')
  })
})