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

vi.mock('@iconify/vue', () => ({
  Icon: { props: ['icon'], template: '<svg data-iconify="true" :data-name="icon"></svg>' },
  loadIcon: vi.fn(() => Promise.resolve({ body: '<path />' })),
}))

import AppIcon from './AppIcon.vue'
import { loadIcon } from '@iconify/vue'

describe('AppIcon', () => {
  it('renders legacy Font Awesome classes', () => {
    const wrapper = mount(AppIcon, { props: { icon: 'fas fa-home' } })
    expect(wrapper.find('i').classes()).toContain('fas')
    expect(wrapper.find('i').classes()).toContain('fa-home')
  })

  it('renders Iconify after icon data is available', async () => {
    const wrapper = mount(AppIcon, { props: { icon: 'iconify:mdi:home' } })
    await nextTick()
    await nextTick()
    expect(wrapper.find('svg').attributes('data-name')).toBe('mdi:home')
  })

  it('uses the bundled fallback when Iconify loading fails', async () => {
    loadIcon.mockRejectedValueOnce(new Error('offline'))
    const wrapper = mount(AppIcon, { props: { icon: 'iconify:mdi:missing', fallback: 'fas fa-link' } })
    await nextTick()
    await nextTick()

    expect(wrapper.find('svg').exists()).toBe(false)
    expect(wrapper.find('i').classes()).toEqual(expect.arrayContaining(['fas', 'fa-link']))
  })
})