marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(planner): show score badges for all recipes in RecipePicker

Browse Source 
- +server.ts: pass topN=100 so all recipes are scored in one request
- RecipePicker: Empfohlen keeps top 5 with scoreDelta > 0; builds a
  scoreMap from all suggestions; shows green/yellow/red delta badge on
  every recipe in Alle Rezepte that has a score entry
- Extracted scoreBadge snippet to avoid duplication between sections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-09 13:03:10 +02:00
committed by marcel
parent 055ae11fa3
commit 55285e7d5d
4 changed files with 181 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/lib/planner/RecipePicker.test.ts
View File

@@ -1,5 +1,5 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { render, screen, within } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import RecipePicker from './RecipePicker.svelte';
@@ -34,10 +34,12 @@ describe('RecipePicker', () => {
expect(screen.getByText(/Empfohlen/i)).toBeTruthy();
});
it('shows all suggestion recipe names', () => {
it('shows only positive-delta suggestions in Empfohlen', () => {
render(RecipePicker, { props: baseProps });
// s1 (scoreDelta=1.5) appears in Empfohlen
expect(screen.getByText('Lachsfilet')).toBeTruthy();
expect(screen.getByText('Hähnchen-Curry')).toBeTruthy();
// s2 (scoreDelta=-1.5) is excluded from Empfohlen; not in allRecipes either → absent
expect(screen.queryByText('Hähnchen-Curry')).toBeNull();
});
it('shows green badge when hasConflict is false', () => {
@@ -47,10 +49,15 @@ describe('RecipePicker', () => {
expect(badge.getAttribute('data-type')).toBe('good');
});
it('shows red delta badge when hasConflict is true', () => {
render(RecipePicker, { props: baseProps });
// Hähnchen-Curry: hasConflict = true, scoreDelta = -1.5 → red badge with delta
const badge = screen.getByTestId('badge-s2');
it('shows red delta badge in Alle Rezepte when hasConflict is true', () => {
// r2 is in allRecipes; scoring it negative via suggestions → red badge in Alle Rezepte
const withR2Scored = [
...suggestions,
{ recipe: { id: 'r2', name: 'Spaghetti Carbonara', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: -1.5, hasConflict: true }
];
render(RecipePicker, { props: { ...baseProps, suggestions: withR2Scored } });
const alleRezepte = screen.getByTestId('alle-rezepte-section');
const badge = within(alleRezepte).getByTestId('badge-r2');
expect(badge.getAttribute('data-type')).toBe('bad');
expect(badge.textContent).toContain('-1.5');
});
@@ -87,8 +94,8 @@ describe('RecipePicker', () => {
const onpick = vi.fn();
render(RecipePicker, { props: { ...baseProps, onpick } });
const buttons = screen.getAllByRole('button', { name: /Wählen/i });
// First 2 are suggestions, rest are allRecipes
await userEvent.click(buttons[2]);
// First 1 is the positive-delta suggestion (s1), rest are allRecipes
await userEvent.click(buttons[1]);
expect(onpick).toHaveBeenCalledWith('r1', 'Beef Bourguignon');
});
@@ -99,16 +106,63 @@ describe('RecipePicker', () => {
expect(screen.getByText(/Keine Treffer/i)).toBeTruthy();
});
it('shows yellow neutral badge when scoreDelta is zero', () => {
it('shows yellow neutral badge in Alle Rezepte when scoreDelta is zero', () => {
// r1 is in allRecipes; scoring it neutral via suggestions → yellow badge in Alle Rezepte
const neutralSuggestions = [
{ recipe: { id: 'sn', name: 'Neutrales Rezept', effort: 'easy', cookTimeMin: 20 }, scoreDelta: 0.0, hasConflict: false }
{ recipe: { id: 'r1', name: 'Beef Bourguignon', effort: 'hard' as const, cookTimeMin: 150 }, scoreDelta: 0.0, hasConflict: false }
];
render(RecipePicker, { props: { ...baseProps, suggestions: neutralSuggestions } });
const badge = screen.getByTestId('badge-sn');
const alleRezepte = screen.getByTestId('alle-rezepte-section');
const badge = within(alleRezepte).getByTestId('badge-r1');
expect(badge.getAttribute('data-type')).toBe('neutral');
expect(badge.textContent).toContain('0.0');
});
it('Empfohlen shows only positive-delta suggestions, capped at 5', () => {
const sixImproving = Array.from({ length: 6 }, (_, i) => ({
recipe: { id: `imp${i}`, name: `Improving ${i}`, effort: 'easy' as const, cookTimeMin: 20 },
scoreDelta: 1.0,
hasConflict: false
}));
render(RecipePicker, { props: { ...baseProps, suggestions: sixImproving } });
const empfohlen = screen.getByTestId('empfohlen-section');
const buttons = empfohlen.querySelectorAll('button');
expect(buttons).toHaveLength(5);
});
it('Empfohlen excludes neutral and negative suggestions', () => {
const mixed = [
{ recipe: { id: 'pos', name: 'Positiv', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: 1.0, hasConflict: false },
{ recipe: { id: 'neu', name: 'Neutral', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: 0.0, hasConflict: false },
{ recipe: { id: 'neg', name: 'Negativ', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: -1.0, hasConflict: true }
];
render(RecipePicker, { props: { ...baseProps, suggestions: mixed } });
const empfohlen = screen.getByTestId('empfohlen-section');
expect(empfohlen.textContent).toContain('Positiv');
expect(empfohlen.textContent).not.toContain('Neutral');
expect(empfohlen.textContent).not.toContain('Negativ');
});
it('shows score badge inside Alle Rezepte for a recipe that has a matching suggestion', () => {
// r1 is in allRecipes; scoreDelta=-0.3 → not in Empfohlen (needs >0), but scoreMap provides badge
const withR1Scored = [
...suggestions,
{ recipe: { id: 'r1', name: 'Beef Bourguignon', effort: 'hard' as const, cookTimeMin: 150 }, scoreDelta: -0.3, hasConflict: true }
];
render(RecipePicker, { props: { ...baseProps, suggestions: withR1Scored } });
const alleRezepte = screen.getByTestId('alle-rezepte-section');
const badge = within(alleRezepte).getByTestId('badge-r1');
expect(badge.getAttribute('data-type')).toBe('bad');
});
it('shows no badge in Alle Rezepte for recipes with no suggestion score', () => {
// r2 and r3 have no suggestion entry
render(RecipePicker, { props: baseProps });
const alleRezepte = screen.getByTestId('alle-rezepte-section');
expect(within(alleRezepte).queryByTestId('badge-r2')).toBeNull();
expect(within(alleRezepte).queryByTestId('badge-r3')).toBeNull();
});
it('shows loading skeleton instead of Empfohlen section when isLoading is true', () => {
render(RecipePicker, { props: { ...baseProps, isLoading: true } });
expect(screen.getByTestId('suggestions-loading')).toBeTruthy();