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

import Icon from '../src/components/Icon/Icon.vue'
import { loadCatalogIcon } from '../src/icons/catalog/runtime'

describe('Icon component', () => {
  it('renders core registry icons synchronously', () => {
    const wrapper = mount(Icon, {
      props: {
        name: 'time/clock',
      },
    })

    expect(wrapper.html()).toContain('<svg')
  })

  it('loads catalog icons asynchronously by category/name', async () => {
    await loadCatalogIcon('setting/skin')

    const wrapper = mount(Icon, {
      props: {
        name: 'setting/skin',
      },
    })

    await flushPromises()
    await wrapper.vm.$nextTick()
    await flushPromises()

    expect(wrapper.html()).toContain('<svg')
    expect(wrapper.attributes('aria-label')).toBe('setting/skin')
  })
})