import { describe, expect, it } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import ArticleCard from '~/components/ArticleCard.vue'
import type { ArticleSummary } from '#shared/types/blog'

const baseArticle: ArticleSummary = {
  title: 'Titolo di prova',
  slug: 'titolo-di-prova',
  publishedAt: '2025-01-15T10:00:00.000Z',
  cover: null,
  category: { name: 'Economia', slug: 'economia' },
}

describe('ArticleCard', () => {
  it('renders title, category and date, with no cover link when cover is null', async () => {
    const wrapper = await mountSuspended(ArticleCard, { props: { article: baseArticle } })
    expect(wrapper.text()).toContain('Titolo di prova')
    expect(wrapper.text()).toContain('Economia')
    expect(wrapper.find('.cover-link').exists()).toBe(false)
  })

  it('renders the cover image with alt text and no width/height attributes', async () => {
    const article: ArticleSummary = {
      ...baseArticle,
      cover: { url: '/api/files/articles/abc/cover.jpg', alt: 'Testo alternativo' },
    }
    const wrapper = await mountSuspended(ArticleCard, { props: { article } })
    const img = wrapper.find('img.cover')

    expect(img.exists()).toBe(true)
    expect(img.attributes('alt')).toBe('Testo alternativo')
    expect(img.attributes('src')).toContain('/api/files/articles/abc/cover.jpg')
    expect(img.attributes('width')).toBeUndefined()
    expect(img.attributes('height')).toBeUndefined()
  })

  it('falls back to an empty alt when the cover has none', async () => {
    const article: ArticleSummary = {
      ...baseArticle,
      cover: { url: '/api/files/articles/abc/cover.jpg', alt: null },
    }
    const wrapper = await mountSuspended(ArticleCard, { props: { article } })
    expect(wrapper.find('img.cover').attributes('alt')).toBe('')
  })
})