achmad
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import ArticleGrid from '@/components/home/ArticleGrid'
|
|
import type { Article } from '@/lib/types'
|
|
|
|
const baseArticle: Article = {
|
|
id: '1',
|
|
title: 'Test Article',
|
|
slug: 'test-article',
|
|
status: 'published',
|
|
content: null,
|
|
excerpt: 'An excerpt.',
|
|
featured_image: null,
|
|
published_at: '2026-05-28T00:00:00Z',
|
|
date_created: '2026-05-28T00:00:00Z',
|
|
is_featured: false,
|
|
seo_title: null,
|
|
seo_description: null,
|
|
category: { id: '1', name: 'Anime', slug: 'anime', description: null },
|
|
tags: [],
|
|
}
|
|
|
|
const makeArticle = (overrides: Partial<Article>): Article => ({
|
|
...baseArticle,
|
|
...overrides,
|
|
})
|
|
|
|
describe('ArticleGrid', () => {
|
|
it('returns null when articles array is empty', () => {
|
|
const { container } = render(<ArticleGrid articles={[]} />)
|
|
expect(container.innerHTML).toBe('')
|
|
})
|
|
|
|
it('renders the title when provided', () => {
|
|
render(<ArticleGrid articles={[baseArticle]} title="Latest" />)
|
|
expect(screen.getByText('Latest')).toBeInTheDocument()
|
|
})
|
|
|
|
it('does not render a title section when title is omitted', () => {
|
|
render(<ArticleGrid articles={[baseArticle]} />)
|
|
expect(screen.queryByText('Latest')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('renders the correct number of ArticleCards', () => {
|
|
const articles = [
|
|
makeArticle({ id: '1', title: 'Article 1' }),
|
|
makeArticle({ id: '2', title: 'Article 2' }),
|
|
makeArticle({ id: '3', title: 'Article 3' }),
|
|
]
|
|
render(<ArticleGrid articles={articles} />)
|
|
expect(screen.getByText('Article 1')).toBeInTheDocument()
|
|
expect(screen.getByText('Article 2')).toBeInTheDocument()
|
|
expect(screen.getByText('Article 3')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders a section element with max-width class', () => {
|
|
const { container } = render(<ArticleGrid articles={[baseArticle]} title="Latest" />)
|
|
const section = container.querySelector('section')
|
|
expect(section).toHaveClass('max-w-[1200px]')
|
|
})
|
|
})
|