import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import ArticleBody from '@/components/article/ArticleBody'

describe('ArticleBody', () => {
  it('renders HTML content', () => {
    render(<ArticleBody html="<p>Hello world</p>" />)
    expect(screen.getByText('Hello world')).toBeInTheDocument()
  })

  it('renders multiple HTML elements', () => {
    render(<ArticleBody html="<h1>Title</h1><p>Paragraph</p>" />)
    expect(screen.getByText('Title')).toBeInTheDocument()
    expect(screen.getByText('Paragraph')).toBeInTheDocument()
  })

  it('applies the article-body class', () => {
    const { container } = render(<ArticleBody html="<p>Test</p>" />)
    expect(container.firstChild).toHaveClass('article-body')
  })

  it('renders complex HTML including images and links', () => {
    const html = '<p>Text with <a href="/test">a link</a> and <img src="img.jpg" alt="pic" /></p>'
    render(<ArticleBody html={html} />)
    expect(screen.getByText('a link')).toBeInTheDocument()
    expect(screen.getByAltText('pic')).toBeInTheDocument()
  })

  it('renders empty string without crashing', () => {
    const { container } = render(<ArticleBody html="" />)
    expect(container.firstChild).toBeInTheDocument()
  })
})