diff --git a/frontend/src/lib/planner/MealActionSheet.svelte b/frontend/src/lib/planner/MealActionSheet.svelte index d0b6fde..d5a5d44 100644 --- a/frontend/src/lib/planner/MealActionSheet.svelte +++ b/frontend/src/lib/planner/MealActionSheet.svelte @@ -17,9 +17,10 @@ slot: Slot; onswap: () => void; oncancel: () => void; + onremove?: () => void; } - let { open, slot, onswap, oncancel }: Props = $props(); + let { open, slot, onswap, oncancel, onremove }: Props = $props(); const meta = $derived.by(() => { const parts: string[] = []; @@ -82,6 +83,16 @@ ↻ Gericht tauschen + {#if onremove} + + {/if} + {#if slot.recipe} { @@ -28,14 +29,29 @@ describe('MealActionSheet', () => { expect(screen.getByText(/easy/i)).toBeTruthy(); }); - it('renders all 4 action buttons', () => { + it('renders all 5 action buttons', () => { render(MealActionSheet, { props: baseProps }); expect(screen.getByRole('button', { name: /Gericht tauschen/i })).toBeTruthy(); expect(screen.getByRole('link', { name: /Jetzt kochen/i })).toBeTruthy(); expect(screen.getByRole('link', { name: /Rezept ansehen/i })).toBeTruthy(); + expect(screen.getByRole('button', { name: /Entfernen/i })).toBeTruthy(); expect(screen.getByRole('button', { name: /Abbrechen/i })).toBeTruthy(); }); + it('clicking Entfernen calls onremove', async () => { + const onremove = vi.fn(); + const user = userEvent.setup(); + render(MealActionSheet, { props: { ...baseProps, onremove } }); + await user.click(screen.getByRole('button', { name: /Entfernen/i })); + expect(onremove).toHaveBeenCalledOnce(); + }); + + it('does not render Entfernen button when onremove is not provided', () => { + const { onremove: _, ...propsWithoutRemove } = baseProps; + render(MealActionSheet, { props: propsWithoutRemove }); + expect(screen.queryByRole('button', { name: /Entfernen/i })).toBeNull(); + }); + it('Jetzt kochen links to the cook route', () => { render(MealActionSheet, { props: baseProps }); const link = screen.getByRole('link', { name: /Jetzt kochen/i });