feat(ui): page édition d'une carte pré-remplie (P3-5, F-06)

Page /cards/:id/edit : charge la carte via cardsApi, pré-remplit CardForm
en mode edit et enregistre via cardsApi.update. Ajoute un test F-06 au
form (pré-remplissage + update + navigation). Coche P3-5 dans TODO.
This commit is contained in:
devcodetools committed 2026-09-21 19:06:38 +02:00
1 parent 2e131dddcb
commit 03a6b7b455
2 files changed
+67

No files matched your search

+45
View File
@@ -0,0 +1,45 @@
import type { Metadata } from 'next'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { CardForm } from '@/components/card-form'
import type { Card, CardInput } from '@/domain/card'
import { ApiClientError, cardsApi } from '@/lib/api-client'
export const metadata: Metadata = { title: 'Modifier la carte' }
export default async function EditCardPage({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id } = await params
let card: Card | null = null
try {
card = await cardsApi.get(id)
} catch (e) {
if (e instanceof ApiClientError && e.status === 404) notFound()
throw e
}
const initial: CardInput = {
question: card.question,
response: card.response,
theme: card.theme,
tags: card.tags,
}
return (
<main className="mx-auto max-w-3xl px-4 py-8">
<div className="mb-6">
<Link
href={`/cards/${id}`}
className="text-sm font-medium text-slate-600 underline-offset-4 hover:underline"
>
← Retour au détail
</Link>
<h1 className="mt-2 text-2xl font-bold text-slate-900">{card.question}</h1>
</div>
<CardForm mode="edit" cardId={card.id} initial={initial} />
</main>
)
}
+22
View File
@@ -36,3 +36,25 @@ it('crée une carte puis navigue vers son détail (F-05)', async () => {
})
await screen.findByText('Enregistrement…')
})
it('pré-remplit le formulaire et enregistre une modification (F-06 édition)', async () => {
vi.mocked(cardsApi.update).mockResolvedValue({ id: 'c1' } as never)
render(
<CardForm
mode="edit"
cardId="c1"
initial={{ question: 'Ancienne question', response: 'Ancienne réponse', theme: 'git' }}
/>,
)
const question = screen.getByLabelText('Question')
expect(question).toHaveValue('Ancienne question')
await userEvent.clear(question)
await userEvent.type(question, 'Nouvelle question')
await userEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
expect(vi.mocked(cardsApi.update)).toHaveBeenCalledWith('c1', {
question: 'Nouvelle question',
response: 'Ancienne réponse',
theme: 'git',
})
expect(routerMock.push).toHaveBeenCalledWith('/cards/c1')
})