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

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

const recipes = [
	{ id: 'r1', name: 'Quick carbonara', effort: 'easy', cookTimeMin: 20 },
	{ id: 'r2', name: 'Chicken stir-fry', effort: 'easy', cookTimeMin: 25 },
	{ id: 'r3', name: 'Mushroom risotto', effort: 'medium', cookTimeMin: 50 }
];

const baseProps = {
	replacingName: 'Tomato pasta',
	replacingMeta: '45 min · Easy',
	recipes,
	currentWeekRecipeIds: new Set<string>(),
	onpick: vi.fn()
};

describe('SwapSuggestionList', () => {
	it('renders the Replacing banner', () => {
		render(SwapSuggestionList, { props: baseProps });
		expect(screen.getByText(/Wird ersetzt/i)).toBeTruthy();
	});

	it('renders old meal name with strikethrough', () => {
		render(SwapSuggestionList, { props: baseProps });
		const struck = screen.getByTestId('replacing-name');
		expect(struck.textContent).toContain('Tomato pasta');
		expect(getComputedStyle(struck).textDecoration || struck.style.textDecoration).toContain('line-through');
	});

	it('replacing-name span has title attribute for full name', () => {
		render(SwapSuggestionList, { props: baseProps });
		const struck = screen.getByTestId('replacing-name');
		expect(struck.getAttribute('title')).toBe('Tomato pasta');
	});

	it('renders the easiest-first eyebrow label', () => {
		render(SwapSuggestionList, { props: baseProps });
		expect(screen.getByText(/einfachste zuerst/i)).toBeTruthy();
	});

	it('renders all recipe names', () => {
		render(SwapSuggestionList, { props: baseProps });
		expect(screen.getByText('Quick carbonara')).toBeTruthy();
		expect(screen.getByText('Chicken stir-fry')).toBeTruthy();
		expect(screen.getByText('Mushroom risotto')).toBeTruthy();
	});

	it('clicking Wählen calls onpick with recipeId and name', async () => {
		const onpick = vi.fn();
		const user = userEvent.setup();
		render(SwapSuggestionList, { props: { ...baseProps, onpick } });
		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
		await user.click(buttons[0]);
		expect(onpick).toHaveBeenCalledWith('r1', 'Quick carbonara');
	});

	it('shows already-planned warning for recipes in currentWeekRecipeIds', () => {
		render(SwapSuggestionList, {
			props: { ...baseProps, currentWeekRecipeIds: new Set(['r2']) }
		});
		expect(screen.getByTestId('already-planned-r2')).toBeTruthy();
	});

	it('does not show already-planned warning for recipes not in currentWeekRecipeIds', () => {
		render(SwapSuggestionList, { props: baseProps });
		expect(screen.queryByTestId('already-planned-r1')).toBeNull();
	});

	it('shows empty state when no recipes', () => {
		render(SwapSuggestionList, { props: { ...baseProps, recipes: [] } });
		expect(screen.getByTestId('swap-empty-state')).toBeTruthy();
	});

	it('excludes the recipe being replaced when excludeRecipeId is provided', () => {
		render(SwapSuggestionList, { props: { ...baseProps, excludeRecipeId: 'r2' } });
		expect(screen.queryByText('Chicken stir-fry')).toBeNull();
		expect(screen.getByText('Quick carbonara')).toBeTruthy();
		expect(screen.getByText('Mushroom risotto')).toBeTruthy();
	});

	it('shows all recipes when excludeRecipeId is not provided', () => {
		render(SwapSuggestionList, { props: baseProps });
		expect(screen.getByText('Quick carbonara')).toBeTruthy();
		expect(screen.getByText('Chicken stir-fry')).toBeTruthy();
		expect(screen.getByText('Mushroom risotto')).toBeTruthy();
	});

	it('disables all Wählen buttons when isLoading is true', () => {
		render(SwapSuggestionList, { props: { ...baseProps, isLoading: true } });
		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
		buttons.forEach((btn) => expect((btn as HTMLButtonElement).disabled).toBe(true));
	});

	it('Wählen buttons are enabled when isLoading is false', () => {
		render(SwapSuggestionList, { props: { ...baseProps, isLoading: false } });
		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
		buttons.forEach((btn) => expect((btn as HTMLButtonElement).disabled).toBe(false));
	});

	it('renders optional Abbrechen button when oncancel provided', () => {
		render(SwapSuggestionList, { props: { ...baseProps, oncancel: vi.fn() } });
		expect(screen.getByRole('button', { name: /Abbrechen/i })).toBeTruthy();
	});

	it('does not render Abbrechen button when oncancel not provided', () => {
		render(SwapSuggestionList, { props: baseProps });
		expect(screen.queryByRole('button', { name: /Abbrechen/i })).toBeNull();
	});

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