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 });