diff --git a/src/components/card-list.test.tsx b/src/components/card-list.test.tsx
index 02178a4..46907c7 100644
--- a/src/components/card-list.test.tsx
+++ b/src/components/card-list.test.tsx
@@ -27,7 +27,7 @@ const CARDS = [
question: 'Cest quoi un commit ?',
response: 'Un snapshot du projet',
theme: 'git',
- tags: [],
+ tags: ['commit', 'repo'],
createdAt: new Date('2026-01-01T08:00:00Z'),
updatedAt: new Date('2026-01-01T08:00:00Z'),
},
@@ -68,6 +68,14 @@ it('affiche le thème de chaque carte', async () => {
expect(within(item as HTMLElement).getByText('git')).toBeInTheDocument()
})
+it('affiche les tags de chaque carte', async () => {
+ vi.mocked(cardsApi.list).mockResolvedValue(CARDS)
+ render()
+ const item = (await screen.findByText('Cest quoi un commit ?')).closest('li')
+ expect(within(item as HTMLElement).getByText('#commit')).toBeInTheDocument()
+ expect(within(item as HTMLElement).getByText('#repo')).toBeInTheDocument()
+})
+
it('affiche un message si aucune carte', async () => {
vi.mocked(cardsApi.list).mockResolvedValue([])
render()
diff --git a/src/components/card-list.tsx b/src/components/card-list.tsx
index 575b6e9..1ed1337 100644
--- a/src/components/card-list.tsx
+++ b/src/components/card-list.tsx
@@ -8,6 +8,7 @@ interface ListedCard {
id: string
question: string
theme: string
+ tags: string[]
}
export function CardList() {
@@ -25,6 +26,7 @@ export function CardList() {
id: card.id,
question: card.question,
theme: card.theme,
+ tags: card.tags,
})),
)
}
@@ -62,7 +64,21 @@ export function CardList() {
href={`/cards/${card.id}`}
className="flex items-center justify-between px-4 py-3 hover:bg-slate-50"
>
- {card.question}
+
+ {card.question}
+ {card.tags.length > 0 && (
+
+ {card.tags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+ )}
+
{card.theme}