mealprep/frontend/src/lib/planner/MealActionSheet.test.ts

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { userEvent } from '@testing-library/user-event';
import MealActionSheet from './MealActionSheet.svelte';

const slot = {
	id: 's1',
	slotDate: '2026-04-08',
	recipe: { id: 'r1', name: 'Tomato pasta', effort: 'easy', cookTimeMin: 45 }
};

const baseProps = {
	open: true,
	slot,
	onswap: vi.fn(),
	oncancel: vi.fn(),
	onremove: vi.fn()
};

describe('MealActionSheet', () => {
	it('renders meal title', () => {
		render(MealActionSheet, { props: baseProps });
		expect(screen.getByText('Tomato pasta')).toBeTruthy();
	});

	it('renders meal metadata', () => {
		render(MealActionSheet, { props: baseProps });
		expect(screen.getByText(/45 min/i)).toBeTruthy();
		expect(screen.getByText(/easy/i)).toBeTruthy();
	});

	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 });
		expect(link.getAttribute('href')).toBe('/recipes/r1/cook');
	});

	it('Rezept ansehen links to the recipe detail route', () => {
		render(MealActionSheet, { props: baseProps });
		const link = screen.getByRole('link', { name: /Rezept ansehen/i });
		expect(link.getAttribute('href')).toBe('/recipes/r1');
	});

	it('clicking Gericht tauschen calls onswap', async () => {
		const onswap = vi.fn();
		const user = userEvent.setup();
		render(MealActionSheet, { props: { ...baseProps, onswap } });
		await user.click(screen.getByRole('button', { name: /Gericht tauschen/i }));
		expect(onswap).toHaveBeenCalledOnce();
	});

	it('clicking Abbrechen calls oncancel', async () => {
		const oncancel = vi.fn();
		const user = userEvent.setup();
		render(MealActionSheet, { props: { ...baseProps, oncancel } });
		await user.click(screen.getByRole('button', { name: /Abbrechen/i }));
		expect(oncancel).toHaveBeenCalledOnce();
	});

	it('clicking backdrop calls oncancel', async () => {
		const oncancel = vi.fn();
		const user = userEvent.setup();
		render(MealActionSheet, { props: { ...baseProps, oncancel } });
		await user.click(screen.getByTestId('sheet-backdrop'));
		expect(oncancel).toHaveBeenCalledOnce();
	});

	it('does not render when open is false', () => {
		render(MealActionSheet, { props: { ...baseProps, open: false } });
		expect(screen.queryByText('Tomato pasta')).toBeNull();
	});
});