refactor(planner): delete orphaned SwapSuggestionList component and tests
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,126 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
interface Recipe {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
effort?: string | null;
|
|
||||||
cookTimeMin?: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
|
||||||
replacingName,
|
|
||||||
replacingMeta,
|
|
||||||
recipes,
|
|
||||||
currentWeekRecipeIds,
|
|
||||||
excludeRecipeId,
|
|
||||||
isLoading = false,
|
|
||||||
onpick,
|
|
||||||
oncancel
|
|
||||||
}: {
|
|
||||||
replacingName: string;
|
|
||||||
replacingMeta?: string;
|
|
||||||
recipes: Recipe[];
|
|
||||||
currentWeekRecipeIds: Set<string>;
|
|
||||||
excludeRecipeId?: string;
|
|
||||||
isLoading?: boolean;
|
|
||||||
onpick: (recipeId: string, recipeName: string) => void;
|
|
||||||
oncancel?: () => void;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
let visibleRecipes = $derived(
|
|
||||||
excludeRecipeId ? recipes.filter((r) => r.id !== excludeRecipeId) : recipes
|
|
||||||
);
|
|
||||||
|
|
||||||
function recipeMeta(recipe: Recipe): string {
|
|
||||||
return [
|
|
||||||
recipe.cookTimeMin != null ? `${recipe.cookTimeMin} min` : null,
|
|
||||||
recipe.effort ?? null
|
|
||||||
]
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(' · ');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Replacing banner -->
|
|
||||||
<div
|
|
||||||
style="background: var(--orange-tint); border: 1px solid #FBCDA4; border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 14px;"
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style="font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 4px 0; font-family: var(--font-sans);"
|
|
||||||
>
|
|
||||||
Wird ersetzt
|
|
||||||
</p>
|
|
||||||
<span
|
|
||||||
data-testid="replacing-name"
|
|
||||||
title={replacingName}
|
|
||||||
style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 14px; text-decoration: line-through; opacity: 0.6; color: var(--color-text);"
|
|
||||||
>
|
|
||||||
{replacingName}{#if replacingMeta} · {replacingMeta}{/if}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Eyebrow label -->
|
|
||||||
<p
|
|
||||||
style="font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 6px 0; font-family: var(--font-sans);"
|
|
||||||
>
|
|
||||||
Ersetzen durch (einfachste zuerst)
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Recipe list -->
|
|
||||||
{#if visibleRecipes.length === 0}
|
|
||||||
<p
|
|
||||||
data-testid="swap-empty-state"
|
|
||||||
style="text-align: center; color: var(--color-text-muted); font-family: var(--font-sans); margin: 0;"
|
|
||||||
>
|
|
||||||
Keine Rezepte verfügbar.
|
|
||||||
</p>
|
|
||||||
{:else}
|
|
||||||
{#each visibleRecipes as recipe (recipe.id)}
|
|
||||||
{@const meta = recipeMeta(recipe)}
|
|
||||||
{@const alreadyPlanned = currentWeekRecipeIds.has(recipe.id)}
|
|
||||||
<div
|
|
||||||
style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px;"
|
|
||||||
>
|
|
||||||
<div style="flex: 1; min-width: 0;">
|
|
||||||
<p
|
|
||||||
style="font-family: var(--font-display); font-size: 13px; color: var(--color-text); margin: 0;"
|
|
||||||
>
|
|
||||||
{recipe.name}
|
|
||||||
</p>
|
|
||||||
{#if meta}
|
|
||||||
<p
|
|
||||||
style="font-size: 9px; color: var(--color-text-muted); font-family: var(--font-sans); margin: 1px 0 0;"
|
|
||||||
>
|
|
||||||
{meta}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
{#if alreadyPlanned}
|
|
||||||
<p
|
|
||||||
data-testid="already-planned-{recipe.id}"
|
|
||||||
style="font-size: 9px; color: var(--yellow-text); font-family: var(--font-sans); margin: 1px 0 0;"
|
|
||||||
>
|
|
||||||
⚠ Bereits diese Woche
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={() => onpick(recipe.id, recipe.name)}
|
|
||||||
disabled={isLoading}
|
|
||||||
style="background: none; border: none; cursor: {isLoading ? 'default' : 'pointer'}; font-size: 11px; font-weight: 500; color: var(--green); font-family: var(--font-sans); flex-shrink: 0; opacity: {isLoading ? '0.4' : '1'};"
|
|
||||||
>
|
|
||||||
Wählen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- Cancel button (optional) -->
|
|
||||||
{#if oncancel}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={oncancel}
|
|
||||||
style="width: 100%; background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 8px 0; font-family: var(--font-sans);"
|
|
||||||
>
|
|
||||||
Abbrechen
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user