devcodetools
d82a82baf3
Composant CardList : charge les cartes via cardsApi.list(), affiche question + thème, chaque entrée est un lien vers le détail. Gère les états chargement, vide et erreur (ApiClientError).
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { render, screen, within } from '@testing-library/react'
|
|
import { describe, expect, it, vi, beforeEach } from 'vitest'
|
|
import { CardList } from './card-list'
|
|
|
|
vi.mock('@/lib/api-client', () => {
|
|
class ApiClientErrorMock extends Error {
|
|
status: number
|
|
constructor(status: number, name: string, message: string) {
|
|
super(message)
|
|
this.name = name
|
|
this.status = status
|
|
}
|
|
}
|
|
return {
|
|
ApiClientError: ApiClientErrorMock,
|
|
cardsApi: {
|
|
list: vi.fn(),
|
|
},
|
|
}
|
|
})
|
|
|
|
import { cardsApi, ApiClientError } from '@/lib/api-client'
|
|
|
|
const CARDS = [
|
|
{ id: '1', question: 'Cest quoi un commit ?', response: 'Un snapshot du projet', theme: 'git', tags: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
|
|
{ id: '2', question: 'Cest quoi une closure ?', response: 'Une fonction + son scope', theme: 'javascript', tags: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
|
|
]
|
|
|
|
beforeEach(() => {
|
|
vi.mocked(cardsApi.list).mockReset()
|
|
})
|
|
|
|
it('affiche le nom de chaque carte', async () => {
|
|
vi.mocked(cardsApi.list).mockResolvedValue(CARDS)
|
|
render(<CardList />)
|
|
const question = await screen.findByText('Cest quoi un commit ?')
|
|
expect(question).toBeInTheDocument()
|
|
expect(screen.getByText('Cest quoi une closure ?')).toBeInTheDocument()
|
|
})
|
|
|
|
it('affiche un lien vers le détail de chaque carte', async () => {
|
|
vi.mocked(cardsApi.list).mockResolvedValue(CARDS)
|
|
render(<CardList />)
|
|
const link = await screen.findByRole('link', { name: /Cest quoi un commit \?/ })
|
|
expect(link).toHaveAttribute('href', '/cards/1')
|
|
})
|
|
|
|
it("affiche le thème de chaque carte", async () => {
|
|
vi.mocked(cardsApi.list).mockResolvedValue(CARDS)
|
|
render(<CardList />)
|
|
const item = (await screen.findByText('Cest quoi un commit ?')).closest('li')
|
|
expect(within(item as HTMLElement).getByText('git')).toBeInTheDocument()
|
|
})
|
|
|
|
it('affiche un message si aucune carte', async () => {
|
|
vi.mocked(cardsApi.list).mockResolvedValue([])
|
|
render(<CardList />)
|
|
expect(await screen.findByRole('status')).toHaveTextContent('Aucune carte')
|
|
})
|
|
|
|
it('affiche un message derreur si le chargement échoue', async () => {
|
|
vi.mocked(cardsApi.list).mockRejectedValue(new ApiClientError(500, 'InternalServerError', 'Boom'))
|
|
render(<CardList />)
|
|
expect(await screen.findByRole('alert')).toHaveTextContent('Boom')
|
|
})
|