From f5adc051e8ff185c1bfc1aa3dc72f5deda53f19c Mon Sep 17 00:00:00 2001 From: Marcel Raddatz Date: Wed, 8 Apr 2026 22:58:50 +0200 Subject: [PATCH] feat(recipes): add C5 quick action buttons to RecipeCard Always-visible "Jetzt kochen" and "Zur Woche +" buttons shown when onplan prop is provided. Restructured card to avoid nested interactive elements. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/recipes/RecipeCard.svelte | 105 ++++++++++++-------- frontend/src/lib/recipes/RecipeCard.test.ts | 28 +++++- 2 files changed, 87 insertions(+), 46 deletions(-) diff --git a/frontend/src/lib/recipes/RecipeCard.svelte b/frontend/src/lib/recipes/RecipeCard.svelte index 8140373..d38249b 100644 --- a/frontend/src/lib/recipes/RecipeCard.svelte +++ b/frontend/src/lib/recipes/RecipeCard.svelte @@ -1,7 +1,11 @@ - -
- {#if recipe.heroImageUrl} - {recipe.name} - {:else} -
-
+ {#if recipe.heroImageUrl} + {recipe.name} + {:else} +
- - - - - - -
- {/if} -
+ +
+ {/if} +
-
-

{recipe.name}

- {#if metadata} -

{metadata}

- {/if} -
- +
+

{recipe.name}

+ {#if metadata} +

{metadata}

+ {/if} +
+ + + {#if onplan} +
+ 🍳 Jetzt kochen + +
+ {/if} + diff --git a/frontend/src/lib/recipes/RecipeCard.test.ts b/frontend/src/lib/recipes/RecipeCard.test.ts index f9792a4..d606ab9 100644 --- a/frontend/src/lib/recipes/RecipeCard.test.ts +++ b/frontend/src/lib/recipes/RecipeCard.test.ts @@ -42,12 +42,36 @@ describe('RecipeCard', () => { expect(img).toHaveAttribute('alt', 'Spaghetti Bolognese'); }); - it('wraps in a link to the recipe detail page', () => { + it('has a link to the recipe detail page', () => { render(RecipeCard, { props: { recipe: mockRecipe } }); - const link = screen.getByRole('link'); + const link = screen.getByRole('link', { name: /Spaghetti Bolognese/i }); expect(link).toHaveAttribute('href', '/recipes/recipe-1'); }); + it('shows Jetzt kochen link when onplan provided', () => { + render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } }); + const cookLink = screen.getByRole('link', { name: /Jetzt kochen/i }); + expect(cookLink).toHaveAttribute('href', '/cook/recipe-1'); + }); + + it('does not show Jetzt kochen when onplan not provided', () => { + render(RecipeCard, { props: { recipe: mockRecipe } }); + expect(screen.queryByRole('link', { name: /Jetzt kochen/i })).toBeNull(); + }); + + it('shows Zur Woche + button when onplan provided', () => { + render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } }); + expect(screen.getByRole('button', { name: /Zur Woche/i })).toBeTruthy(); + }); + + it('calls onplan with recipeId and name when Zur Woche + clicked', async () => { + const onplan = vi.fn(); + const user = userEvent.setup(); + render(RecipeCard, { props: { recipe: mockRecipe, onplan } }); + await user.click(screen.getByRole('button', { name: /Zur Woche/i })); + expect(onplan).toHaveBeenCalledWith('recipe-1', 'Spaghetti Bolognese'); + }); + it('applies compact image height when compact prop is true', () => { render(RecipeCard, { props: { recipe: mockRecipe, compact: true } }); const imageArea = document.querySelector('[data-testid="image-area"]');