diff --git a/frontend/src/lib/planner/EffortBar.svelte b/frontend/src/lib/planner/EffortBar.svelte new file mode 100644 index 0000000..10d9f07 --- /dev/null +++ b/frontend/src/lib/planner/EffortBar.svelte @@ -0,0 +1,66 @@ + + + +
+ +
+ {#if easy > 0} +
+ {/if} + {#if medium > 0} +
+ {/if} + {#if hard > 0} +
+ {/if} +
+ + +
+ {#if easy > 0} + + Einfach ×{easy} + + {/if} + {#if medium > 0} + + Mittel ×{medium} + + {/if} + {#if hard > 0} + + Aufwändig ×{hard} + + {/if} +
+
diff --git a/frontend/src/lib/planner/EffortBar.test.ts b/frontend/src/lib/planner/EffortBar.test.ts new file mode 100644 index 0000000..f08302f --- /dev/null +++ b/frontend/src/lib/planner/EffortBar.test.ts @@ -0,0 +1,31 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import EffortBar from './EffortBar.svelte'; + +describe('EffortBar', () => { + it('renders segment for easy effort', () => { + render(EffortBar, { props: { easy: 3, medium: 3, hard: 1 } }); + expect(screen.getByTestId('effort-easy').textContent).toContain('3'); + }); + + it('renders segment for medium effort', () => { + render(EffortBar, { props: { easy: 3, medium: 3, hard: 1 } }); + expect(screen.getByTestId('effort-medium').textContent).toContain('3'); + }); + + it('renders segment for hard effort', () => { + render(EffortBar, { props: { easy: 3, medium: 3, hard: 1 } }); + expect(screen.getByTestId('effort-hard').textContent).toContain('1'); + }); + + it('hides zero-count segments', () => { + render(EffortBar, { props: { easy: 7, medium: 0, hard: 0 } }); + expect(screen.queryByTestId('effort-medium')).toBeNull(); + expect(screen.queryByTestId('effort-hard')).toBeNull(); + }); + + it('renders label with ×N count', () => { + render(EffortBar, { props: { easy: 3, medium: 3, hard: 1 } }); + expect(screen.getByTestId('effort-easy').textContent).toContain('×3'); + }); +}); diff --git a/frontend/src/lib/planner/ScoreBreakdownList.svelte b/frontend/src/lib/planner/ScoreBreakdownList.svelte new file mode 100644 index 0000000..3e4f98f --- /dev/null +++ b/frontend/src/lib/planner/ScoreBreakdownList.svelte @@ -0,0 +1,39 @@ + + + diff --git a/frontend/src/lib/planner/ScoreBreakdownList.test.ts b/frontend/src/lib/planner/ScoreBreakdownList.test.ts new file mode 100644 index 0000000..b5dc51e --- /dev/null +++ b/frontend/src/lib/planner/ScoreBreakdownList.test.ts @@ -0,0 +1,35 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import ScoreBreakdownList from './ScoreBreakdownList.svelte'; + +const subScores = { + proteinDiversity: 9, + ingredientOverlap: 7, + effortBalance: 8 +}; + +describe('ScoreBreakdownList', () => { + it('renders protein diversity row', () => { + render(ScoreBreakdownList, { props: { subScores } }); + expect(screen.getByTestId('sub-protein').textContent).toContain('9'); + }); + + it('renders ingredient overlap row', () => { + render(ScoreBreakdownList, { props: { subScores } }); + expect(screen.getByTestId('sub-ingredient').textContent).toContain('7'); + }); + + it('renders effort balance row', () => { + render(ScoreBreakdownList, { props: { subScores } }); + expect(screen.getByTestId('sub-effort').textContent).toContain('8'); + }); + + it('renders all rows with /10 suffix', () => { + render(ScoreBreakdownList, { props: { subScores } }); + const items = screen.getAllByTestId(/^sub-/); + expect(items.length).toBe(3); + items.forEach((item) => { + expect(item.textContent).toContain('/10'); + }); + }); +}); diff --git a/frontend/src/lib/planner/VarietyScoreHero.svelte b/frontend/src/lib/planner/VarietyScoreHero.svelte new file mode 100644 index 0000000..2d758e6 --- /dev/null +++ b/frontend/src/lib/planner/VarietyScoreHero.svelte @@ -0,0 +1,56 @@ + + +
+ +
+ + {score} + + + / 10 + + + {description.label} + +
+ + +
+
+
+
diff --git a/frontend/src/lib/planner/VarietyScoreHero.test.ts b/frontend/src/lib/planner/VarietyScoreHero.test.ts new file mode 100644 index 0000000..16a69ae --- /dev/null +++ b/frontend/src/lib/planner/VarietyScoreHero.test.ts @@ -0,0 +1,43 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import VarietyScoreHero from './VarietyScoreHero.svelte'; + +describe('VarietyScoreHero', () => { + it('renders the score number', () => { + render(VarietyScoreHero, { props: { score: 8.2 } }); + expect(screen.getByTestId('score-value').textContent).toContain('8.2'); + }); + + it('renders "out of 10" label', () => { + render(VarietyScoreHero, { props: { score: 8.2 } }); + expect(screen.getByTestId('score-label').textContent).toContain('10'); + }); + + it('renders a progressbar with correct aria attributes', () => { + render(VarietyScoreHero, { props: { score: 8.2 } }); + const bar = screen.getByRole('progressbar'); + expect(bar.getAttribute('aria-valuenow')).toBe('8.2'); + expect(bar.getAttribute('aria-valuemin')).toBe('0'); + expect(bar.getAttribute('aria-valuemax')).toBe('10'); + }); + + it('shows "Excellent variety" description for score >= 9', () => { + render(VarietyScoreHero, { props: { score: 9.5 } }); + expect(screen.getByTestId('score-description').textContent).toContain('Ausgezeichnet'); + }); + + it('shows "Good variety" description for score 7-8.9', () => { + render(VarietyScoreHero, { props: { score: 7.5 } }); + expect(screen.getByTestId('score-description').textContent).toContain('Gut'); + }); + + it('shows "Getting there" description for score 4-6.9', () => { + render(VarietyScoreHero, { props: { score: 5.0 } }); + expect(screen.getByTestId('score-description').textContent).toContain('Verbesserbar'); + }); + + it('shows "Needs improvement" description for score < 4', () => { + render(VarietyScoreHero, { props: { score: 2.1 } }); + expect(screen.getByTestId('score-description').textContent).toContain('Unzureichend'); + }); +}); diff --git a/frontend/src/lib/planner/VarietyWarningCards.svelte b/frontend/src/lib/planner/VarietyWarningCards.svelte new file mode 100644 index 0000000..977252c --- /dev/null +++ b/frontend/src/lib/planner/VarietyWarningCards.svelte @@ -0,0 +1,22 @@ + + +{#each warnings as warning} +
+

+ {warning.title} +

+

+ {warning.explanation} +

+
+{/each} diff --git a/frontend/src/lib/planner/VarietyWarningCards.test.ts b/frontend/src/lib/planner/VarietyWarningCards.test.ts new file mode 100644 index 0000000..4ae479e --- /dev/null +++ b/frontend/src/lib/planner/VarietyWarningCards.test.ts @@ -0,0 +1,32 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import VarietyWarningCards from './VarietyWarningCards.svelte'; + +const warnings = [ + { title: 'Chicken zweimal diese Woche', explanation: 'Mo, Mi — erwäge einen Tausch.' }, + { title: 'Tomaten in 3 Gerichten', explanation: 'Mo, Di, Mi — sorge für Abwechslung.' } +]; + +describe('VarietyWarningCards', () => { + it('renders one card per warning', () => { + render(VarietyWarningCards, { props: { warnings } }); + const cards = screen.getAllByTestId('warning-card'); + expect(cards.length).toBe(2); + }); + + it('renders warning titles', () => { + render(VarietyWarningCards, { props: { warnings } }); + expect(screen.getByText(/Chicken zweimal/)).toBeTruthy(); + expect(screen.getByText(/Tomaten in 3/)).toBeTruthy(); + }); + + it('renders warning explanations', () => { + render(VarietyWarningCards, { props: { warnings } }); + expect(screen.getByText(/erwäge einen Tausch/)).toBeTruthy(); + }); + + it('renders nothing when warnings is empty', () => { + render(VarietyWarningCards, { props: { warnings: [] } }); + expect(screen.queryAllByTestId('warning-card').length).toBe(0); + }); +}); diff --git a/frontend/src/routes/(app)/planner/variety/+page.server.ts b/frontend/src/routes/(app)/planner/variety/+page.server.ts new file mode 100644 index 0000000..e511637 --- /dev/null +++ b/frontend/src/routes/(app)/planner/variety/+page.server.ts @@ -0,0 +1,28 @@ +import type { PageServerLoad } from './$types'; +import { apiClient } from '$lib/server/api'; +import { getWeekStart } from '$lib/planner/week'; + +export const load: PageServerLoad = async ({ fetch, url }) => { + const weekParam = url.searchParams.get('week'); + const weekStart = weekParam ?? getWeekStart(new Date()); + + const api = apiClient(fetch); + + const { data: weekPlan, error: weekPlanError } = await api.GET('/v1/week-plans', { + params: { query: { weekStart } } + }); + + if (weekPlanError || !weekPlan?.id) { + return { weekPlan: null, varietyScore: null, weekStart }; + } + + const { data: varietyScore } = await api.GET('/v1/week-plans/{id}/variety-score', { + params: { path: { id: weekPlan.id } } + }); + + return { + weekPlan, + varietyScore: varietyScore ?? null, + weekStart + }; +}; diff --git a/frontend/src/routes/(app)/planner/variety/+page.svelte b/frontend/src/routes/(app)/planner/variety/+page.svelte new file mode 100644 index 0000000..3a3b2f6 --- /dev/null +++ b/frontend/src/routes/(app)/planner/variety/+page.svelte @@ -0,0 +1,277 @@ + + + + Abwechslung überprüfen — Mealplan + + + +
+ +
+ + ‹ + +

+ Abwechslungs-Analyse +

+
+ +
+ {#if !varietyScore} +
+

+ Noch keine Gerichte geplant. Plane zuerst einige Mahlzeiten. +

+ + Zum Wochenplaner → + +
+ {:else} + +
+ +
+ + +
+

+ Bewertung im Detail +

+ +
+ + + {#if warnings().length > 0} +
+

+ Hinweise +

+ +
+ {/if} + {/if} +
+
+ + + diff --git a/frontend/src/routes/(app)/planner/variety/page.server.test.ts b/frontend/src/routes/(app)/planner/variety/page.server.test.ts new file mode 100644 index 0000000..6eea40d --- /dev/null +++ b/frontend/src/routes/(app)/planner/variety/page.server.test.ts @@ -0,0 +1,98 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest'; + +vi.mock('$env/dynamic/private', () => ({ + env: { BACKEND_URL: 'http://localhost:8080' } +})); + +const mockGet = vi.fn(); +vi.mock('$lib/server/api', () => ({ + apiClient: () => ({ GET: mockGet }) +})); + +const mockVarietyScore = { + score: 8.2, + tagRepeats: [ + { tagName: 'Chicken', tagType: 'protein', days: ['MON', 'WED'] } + ], + ingredientOverlaps: [ + { ingredientName: 'Tomaten', days: ['MON', 'TUE', 'WED'] } + ], + recentRepeats: ['Pasta Bolognese'], + duplicatesInPlan: ['Hühnchen Curry'] +}; + +const mockWeekPlan = { + id: 'plan-1', + weekStart: '2026-03-30', + status: 'draft', + slots: [ + { id: 's1', slotDate: '2026-03-30', recipe: { id: 'r1', name: 'Pasta', effort: 'Easy', cookTimeMin: 20 } }, + { id: 's2', slotDate: '2026-03-31', recipe: { id: 'r2', name: 'Curry', effort: 'Medium', cookTimeMin: 45 } }, + { id: 's3', slotDate: '2026-04-01', recipe: { id: 'r3', name: 'Steak', effort: 'Hard', cookTimeMin: 60 } } + ] +}; + +describe('variety page — load', () => { + let load: any; + + beforeEach(async () => { + mockGet.mockReset(); + vi.resetModules(); + const mod = await import('./+page.server'); + load = mod.load; + }); + + it('fetches week plan and variety score', async () => { + mockGet.mockResolvedValueOnce({ data: mockWeekPlan, error: undefined }); + mockGet.mockResolvedValueOnce({ data: mockVarietyScore, error: undefined }); + const url = new URL('http://localhost/planner/variety?week=2026-03-30'); + await load({ fetch: vi.fn(), url, locals: { benutzer: { id: 'u1', name: 'Planer', rolle: 'planer' } } }); + expect(mockGet).toHaveBeenCalledWith('/v1/week-plans', expect.anything()); + expect(mockGet).toHaveBeenCalledWith('/v1/week-plans/{id}/variety-score', expect.objectContaining({ + params: { path: { id: 'plan-1' } } + })); + }); + + it('returns varietyScore and weekPlan in result', async () => { + mockGet.mockResolvedValueOnce({ data: mockWeekPlan, error: undefined }); + mockGet.mockResolvedValueOnce({ data: mockVarietyScore, error: undefined }); + const url = new URL('http://localhost/planner/variety?week=2026-03-30'); + const result = await load({ fetch: vi.fn(), url, locals: { benutzer: { id: 'u1', name: 'Planer', rolle: 'planer' } } }); + expect(result.varietyScore?.score).toBe(8.2); + expect(result.weekPlan?.id).toBe('plan-1'); + }); + + it('returns weekStart from URL param', async () => { + mockGet.mockResolvedValueOnce({ data: mockWeekPlan, error: undefined }); + mockGet.mockResolvedValueOnce({ data: mockVarietyScore, error: undefined }); + const url = new URL('http://localhost/planner/variety?week=2026-03-30'); + const result = await load({ fetch: vi.fn(), url, locals: {} }); + expect(result.weekStart).toBe('2026-03-30'); + }); + + it('returns null data when week plan not found', async () => { + mockGet.mockResolvedValueOnce({ data: undefined, error: { status: 404 } }); + const url = new URL('http://localhost/planner/variety?week=2026-03-30'); + const result = await load({ fetch: vi.fn(), url, locals: {} }); + expect(result.weekPlan).toBeNull(); + expect(result.varietyScore).toBeNull(); + }); + + it('returns null varietyScore when score endpoint fails', async () => { + mockGet.mockResolvedValueOnce({ data: mockWeekPlan, error: undefined }); + mockGet.mockResolvedValueOnce({ data: undefined, error: { status: 500 } }); + const url = new URL('http://localhost/planner/variety?week=2026-03-30'); + const result = await load({ fetch: vi.fn(), url, locals: {} }); + expect(result.weekPlan?.id).toBe('plan-1'); + expect(result.varietyScore).toBeNull(); + }); + + it('uses current week when no week param provided', async () => { + mockGet.mockResolvedValueOnce({ data: mockWeekPlan, error: undefined }); + mockGet.mockResolvedValueOnce({ data: mockVarietyScore, error: undefined }); + const url = new URL('http://localhost/planner/variety'); + const result = await load({ fetch: vi.fn(), url, locals: {} }); + // weekStart should be a valid YYYY-MM-DD + expect(result.weekStart).toMatch(/^\d{4}-\d{2}-\d{2}$/); + }); +});