feat(planner): RecipePicker uses scoreDelta/hasConflict, drop currentVarietyScore, add isLoading

- Suggestion interface: { recipe, scoreDelta, hasConflict } (no simulatedScore)
- Badge renders from hasConflict directly — no client-side delta computation needed
- New isLoading prop shows skeleton rows while suggestions fetch is in flight
- currentVarietyScore prop removed from component and both call sites follow in next commit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-09 11:38:47 +02:00
parent b6ad64ea53
commit 4549e9a7fd
2 changed files with 45 additions and 14 deletions

View File

@@ -4,8 +4,8 @@ import userEvent from '@testing-library/user-event';
import RecipePicker from './RecipePicker.svelte';
const suggestions = [
{ recipe: { id: 's1', name: 'Lachsfilet', effort: 'easy', cookTimeMin: 25 }, simulatedScore: 9.5 },
{ recipe: { id: 's2', name: 'Hähnchen-Curry', effort: 'easy', cookTimeMin: 35 }, simulatedScore: 6.0 }
{ recipe: { id: 's1', name: 'Lachsfilet', effort: 'easy', cookTimeMin: 25 }, scoreDelta: 1.5, hasConflict: false },
{ recipe: { id: 's2', name: 'Hähnchen-Curry', effort: 'easy', cookTimeMin: 35 }, scoreDelta: -1.5, hasConflict: true }
];
const allRecipes = [
@@ -18,7 +18,6 @@ const baseProps = {
planId: 'plan-1',
date: '2026-04-05',
dateLabel: 'Samstag, 5. April',
currentVarietyScore: 7.5,
suggestions,
allRecipes,
onpick: vi.fn()
@@ -41,16 +40,16 @@ describe('RecipePicker', () => {
expect(screen.getByText('Hähnchen-Curry')).toBeTruthy();
});
it('shows green badge for suggestions with positive delta', () => {
it('shows green badge when hasConflict is false', () => {
render(RecipePicker, { props: baseProps });
// Lachsfilet: simulatedScore 9.5 - currentVarietyScore 7.5 = +2 → green badge
// Lachsfilet: hasConflict = false → green badge
const badge = screen.getByTestId('badge-s1');
expect(badge.getAttribute('data-type')).toBe('good');
});
it('shows yellow badge for suggestions with zero or negative delta', () => {
it('shows yellow badge when hasConflict is true', () => {
render(RecipePicker, { props: baseProps });
// Hähnchen-Curry: 6.0 - 7.5 = -1.5 → yellow badge
// Hähnchen-Curry: hasConflict = true → yellow badge
const badge = screen.getByTestId('badge-s2');
expect(badge.getAttribute('data-type')).toBe('warning');
});
@@ -98,4 +97,16 @@ describe('RecipePicker', () => {
await userEvent.type(input, 'xyznotfound');
expect(screen.getByText(/Keine Treffer/i)).toBeTruthy();
});
it('shows loading skeleton instead of Empfohlen section when isLoading is true', () => {
render(RecipePicker, { props: { ...baseProps, isLoading: true } });
expect(screen.getByTestId('suggestions-loading')).toBeTruthy();
expect(screen.queryByText(/Empfohlen/i)).toBeNull();
});
it('hides loading skeleton when isLoading is false and suggestions are present', () => {
render(RecipePicker, { props: { ...baseProps, isLoading: false } });
expect(screen.queryByTestId('suggestions-loading')).toBeNull();
expect(screen.getByText(/Empfohlen/i)).toBeTruthy();
});
});