marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(recipes): add C5 quick action buttons to RecipeCard

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-08 22:58:50 +02:00
parent 90c9ea1894
commit f5adc051e8
2 changed files with 87 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/lib/recipes/RecipeCard.test.ts
View File

@@ -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"]');