fix(planner): address all PR review blockers
- Fix logic bug `{#if !isPlanner === false}` - view/cook buttons now visible for all roles, swap only for planner
- Convert Tauschen from dead button to link with suggestions href
- Add week.ts unit tests (23 tests covering getWeekStart Sunday edge case, prevWeek/nextWeek, weekDays, isToday, formatWeekRange)
- Fix isToday to use UTC consistently (.toISOString().slice(0,10)) instead of local date
- Add server-side role guard to createPlan action (403 for members)
- Add weekStart format validation in createPlan action
- Add isSelected prop to DayMealCard with green treatment
- Make variety banner sticky on mobile (always visible per spec)
- Add day name abbreviation above date badge in desktop column headers
- Remove placeholder Navigation text from desktop sidebar
- Add aria-label to desktop empty tile buttons
- Add variety score partial failure test, multiple overlaps test, WeekStrip today+selected test
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -15,10 +15,12 @@
|
||||
let {
|
||||
slot,
|
||||
isToday = false,
|
||||
isSelected = false,
|
||||
readonly = false
|
||||
}: {
|
||||
slot: Slot;
|
||||
isToday?: boolean;
|
||||
isSelected?: boolean;
|
||||
readonly?: boolean;
|
||||
} = $props();
|
||||
|
||||
@@ -30,13 +32,21 @@
|
||||
.filter(Boolean)
|
||||
.join(' · ')
|
||||
);
|
||||
|
||||
let borderClass = $derived(
|
||||
isToday
|
||||
? 'border-[var(--yellow)] bg-[var(--yellow-tint)]'
|
||||
: isSelected
|
||||
? 'border-[var(--green)] bg-[var(--green-tint)]'
|
||||
: 'border-[var(--color-border)] bg-[var(--color-surface)]'
|
||||
);
|
||||
</script>
|
||||
|
||||
<div
|
||||
data-testid="day-meal-card"
|
||||
data-today={isToday}
|
||||
class="rounded-[var(--radius-lg)] border-2 p-4 transition-colors
|
||||
{isToday ? 'border-[var(--yellow)] bg-[var(--yellow-tint)]' : 'border-[var(--color-border)] bg-[var(--color-surface)]'}"
|
||||
data-selected={isSelected}
|
||||
class="rounded-[var(--radius-lg)] border-2 p-4 transition-colors {borderClass}"
|
||||
>
|
||||
{#if slot.recipe}
|
||||
<h3 class="font-[var(--font-display)] text-[20px] font-[300] leading-tight text-[var(--color-text)]">
|
||||
@@ -54,19 +64,19 @@
|
||||
>
|
||||
Jetzt kochen
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
<a
|
||||
href="/planner/suggestions?day={slot.slotDate}"
|
||||
class="rounded-[var(--radius-md)] border border-[var(--color-border)] px-3 py-2 text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-[var(--color-text)]"
|
||||
>
|
||||
Tauschen
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="font-[var(--font-sans)] text-[14px] text-[var(--color-text-muted)]">Kein Gericht geplant</p>
|
||||
{#if !readonly}
|
||||
<a
|
||||
href="/planner/suggestions"
|
||||
href="/planner/suggestions?day={slot.slotDate}"
|
||||
class="mt-2 inline-block rounded-[var(--radius-md)] border border-dashed border-[var(--color-border)] px-3 py-2 text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-[var(--color-text-muted)]"
|
||||
>
|
||||
+ Gericht hinzufügen
|
||||
|
||||
@@ -14,16 +14,22 @@ describe('DayMealCard', () => {
|
||||
expect(screen.getByText('Pasta Bolognese')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('shows Cook now and Swap buttons when not readonly', () => {
|
||||
it('shows Cook now and Tauschen links when not readonly', () => {
|
||||
render(DayMealCard, { props: { slot, isToday: false, readonly: false } });
|
||||
expect(screen.getByRole('link', { name: /Jetzt kochen/i })).toBeTruthy();
|
||||
expect(screen.getByRole('button', { name: /Tauschen/i })).toBeTruthy();
|
||||
expect(screen.getByRole('link', { name: /Tauschen/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
it('hides action buttons when readonly', () => {
|
||||
it('Tauschen link navigates to suggestions for the slot day', () => {
|
||||
render(DayMealCard, { props: { slot, isToday: false, readonly: false } });
|
||||
const link = screen.getByRole('link', { name: /Tauschen/i });
|
||||
expect(link.getAttribute('href')).toContain('2026-03-30');
|
||||
});
|
||||
|
||||
it('hides action links when readonly', () => {
|
||||
render(DayMealCard, { props: { slot, isToday: false, readonly: true } });
|
||||
expect(screen.queryByRole('link', { name: /Jetzt kochen/i })).toBeNull();
|
||||
expect(screen.queryByRole('button', { name: /Tauschen/i })).toBeNull();
|
||||
expect(screen.queryByRole('link', { name: /Tauschen/i })).toBeNull();
|
||||
});
|
||||
|
||||
it('applies today styling when isToday is true', () => {
|
||||
@@ -32,6 +38,12 @@ describe('DayMealCard', () => {
|
||||
expect(card.getAttribute('data-today')).toBe('true');
|
||||
});
|
||||
|
||||
it('applies selected styling when isSelected is true and not today', () => {
|
||||
render(DayMealCard, { props: { slot, isToday: false, isSelected: true, readonly: false } });
|
||||
const card = screen.getByTestId('day-meal-card');
|
||||
expect(card.getAttribute('data-selected')).toBe('true');
|
||||
});
|
||||
|
||||
it('renders empty state when slot has no recipe', () => {
|
||||
render(DayMealCard, { props: { slot: { id: 's2', slotDate: '2026-03-31', recipe: null }, isToday: false, readonly: false } });
|
||||
expect(screen.getByText(/Kein Gericht/i)).toBeTruthy();
|
||||
@@ -42,4 +54,10 @@ describe('DayMealCard', () => {
|
||||
expect(screen.getByText(/30 Min/)).toBeTruthy();
|
||||
expect(screen.getByText(/Easy/)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('empty state shows add link with suggestions href', () => {
|
||||
render(DayMealCard, { props: { slot: { id: 's2', slotDate: '2026-03-31', recipe: null }, isToday: false, readonly: false } });
|
||||
const link = screen.getByRole('link', { name: /Gericht hinzufügen/i });
|
||||
expect(link.getAttribute('href')).toContain('2026-03-31');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -53,4 +53,21 @@ describe('VarietyScoreCard', () => {
|
||||
render(VarietyScoreCard, { props: { ...baseProps, score: 0 } });
|
||||
expect(screen.getByText('0')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders multiple ingredient overlap warnings', () => {
|
||||
render(VarietyScoreCard, {
|
||||
props: {
|
||||
...baseProps,
|
||||
ingredientOverlaps: [
|
||||
{ ingredientName: 'Tomate', days: ['2026-03-30', '2026-03-31'] },
|
||||
{ ingredientName: 'Zwiebel', days: ['2026-03-30', '2026-04-01', '2026-04-02'] },
|
||||
{ ingredientName: 'Knoblauch', days: ['2026-03-31', '2026-04-01'] }
|
||||
]
|
||||
}
|
||||
});
|
||||
expect(screen.getByText(/Tomate/)).toBeTruthy();
|
||||
expect(screen.getByText(/Zwiebel/)).toBeTruthy();
|
||||
expect(screen.getByText(/Knoblauch/)).toBeTruthy();
|
||||
expect(screen.getByText(/3 Mahlzeiten/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -41,6 +41,13 @@ describe('WeekStrip', () => {
|
||||
expect(dot.getAttribute('data-has-meal')).toBe('false');
|
||||
});
|
||||
|
||||
it('when today equals selected day, both data-today and data-selected are true', () => {
|
||||
render(WeekStrip, { props: { weekStart, slots, selectedDay: '2026-04-03', today: '2026-04-03' } });
|
||||
const chip = screen.getByTestId('day-chip-2026-04-03');
|
||||
expect(chip.getAttribute('data-today')).toBe('true');
|
||||
expect(chip.getAttribute('data-selected')).toBe('true');
|
||||
});
|
||||
|
||||
it('calls onselectDay callback when chip is clicked', async () => {
|
||||
let emitted: string | null = null;
|
||||
render(WeekStrip, {
|
||||
|
||||
146
frontend/src/lib/planner/week.test.ts
Normal file
146
frontend/src/lib/planner/week.test.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
import { describe, it, expect, vi, afterEach } from 'vitest';
|
||||
import {
|
||||
getWeekStart,
|
||||
prevWeek,
|
||||
nextWeek,
|
||||
weekDays,
|
||||
isToday,
|
||||
formatWeekRange,
|
||||
formatDayLabel
|
||||
} from './week';
|
||||
|
||||
describe('getWeekStart', () => {
|
||||
it('returns Monday for a Monday input', () => {
|
||||
// 2026-03-30 is a Monday
|
||||
const d = new Date('2026-03-30T12:00:00Z');
|
||||
expect(getWeekStart(d)).toBe('2026-03-30');
|
||||
});
|
||||
|
||||
it('returns Monday for a Wednesday input', () => {
|
||||
// 2026-04-01 is a Wednesday → week starts 2026-03-30
|
||||
const d = new Date('2026-04-01T12:00:00Z');
|
||||
expect(getWeekStart(d)).toBe('2026-03-30');
|
||||
});
|
||||
|
||||
it('returns Monday for a Sunday input (edge case — goes back 6 days)', () => {
|
||||
// 2026-04-05 is a Sunday → week starts 2026-03-30
|
||||
const d = new Date('2026-04-05T12:00:00Z');
|
||||
expect(getWeekStart(d)).toBe('2026-03-30');
|
||||
});
|
||||
|
||||
it('returns Monday for a Saturday input', () => {
|
||||
// 2026-04-04 is a Saturday → week starts 2026-03-30
|
||||
const d = new Date('2026-04-04T12:00:00Z');
|
||||
expect(getWeekStart(d)).toBe('2026-03-30');
|
||||
});
|
||||
|
||||
it('handles year boundary correctly (Dec 28 2025 → week starts Dec 22 2025)', () => {
|
||||
const d = new Date('2025-12-28T12:00:00Z');
|
||||
expect(getWeekStart(d)).toBe('2025-12-22');
|
||||
});
|
||||
});
|
||||
|
||||
describe('prevWeek', () => {
|
||||
it('returns the Monday 7 days before', () => {
|
||||
expect(prevWeek('2026-03-30')).toBe('2026-03-23');
|
||||
});
|
||||
|
||||
it('handles month boundary', () => {
|
||||
expect(prevWeek('2026-04-06')).toBe('2026-03-30');
|
||||
});
|
||||
|
||||
it('handles year boundary', () => {
|
||||
expect(prevWeek('2026-01-05')).toBe('2025-12-29');
|
||||
});
|
||||
});
|
||||
|
||||
describe('nextWeek', () => {
|
||||
it('returns the Monday 7 days after', () => {
|
||||
expect(nextWeek('2026-03-30')).toBe('2026-04-06');
|
||||
});
|
||||
|
||||
it('handles month boundary', () => {
|
||||
expect(nextWeek('2026-03-30')).toBe('2026-04-06');
|
||||
});
|
||||
|
||||
it('handles year boundary', () => {
|
||||
expect(nextWeek('2025-12-29')).toBe('2026-01-05');
|
||||
});
|
||||
});
|
||||
|
||||
describe('weekDays', () => {
|
||||
it('returns exactly 7 dates', () => {
|
||||
expect(weekDays('2026-03-30')).toHaveLength(7);
|
||||
});
|
||||
|
||||
it('starts on the given weekStart', () => {
|
||||
const days = weekDays('2026-03-30');
|
||||
expect(days[0]).toBe('2026-03-30');
|
||||
});
|
||||
|
||||
it('ends 6 days after weekStart', () => {
|
||||
const days = weekDays('2026-03-30');
|
||||
expect(days[6]).toBe('2026-04-05');
|
||||
});
|
||||
|
||||
it('has consecutive daily dates', () => {
|
||||
const days = weekDays('2026-03-30');
|
||||
for (let i = 1; i < 7; i++) {
|
||||
const prev = new Date(days[i - 1] + 'T00:00:00Z');
|
||||
const curr = new Date(days[i] + 'T00:00:00Z');
|
||||
expect(curr.getTime() - prev.getTime()).toBe(86400000);
|
||||
}
|
||||
});
|
||||
|
||||
it('handles month boundary correctly', () => {
|
||||
const days = weekDays('2026-03-30');
|
||||
expect(days[1]).toBe('2026-03-31');
|
||||
expect(days[2]).toBe('2026-04-01');
|
||||
});
|
||||
});
|
||||
|
||||
describe('isToday', () => {
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('returns true for today (UTC)', () => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date('2026-04-03T10:00:00Z'));
|
||||
expect(isToday('2026-04-03')).toBe(true);
|
||||
});
|
||||
|
||||
it('returns false for yesterday', () => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date('2026-04-03T10:00:00Z'));
|
||||
expect(isToday('2026-04-02')).toBe(false);
|
||||
});
|
||||
|
||||
it('returns false for tomorrow', () => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date('2026-04-03T10:00:00Z'));
|
||||
expect(isToday('2026-04-04')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('formatWeekRange', () => {
|
||||
it('returns a non-empty string', () => {
|
||||
expect(formatWeekRange('2026-03-30')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('contains both start and end month info', () => {
|
||||
const range = formatWeekRange('2026-03-30');
|
||||
// Start is March 30, end is April 5 — range should span both months
|
||||
expect(range).toContain('–');
|
||||
});
|
||||
});
|
||||
|
||||
describe('formatDayLabel', () => {
|
||||
it('returns a non-empty string', () => {
|
||||
expect(formatDayLabel('2026-03-30')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('contains a comma separator', () => {
|
||||
expect(formatDayLabel('2026-03-30')).toContain(',');
|
||||
});
|
||||
});
|
||||
@@ -67,11 +67,11 @@ export function formatDayFull(dateStr: string): string {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if dateStr is today (local time).
|
||||
* Returns true if dateStr is today (UTC date).
|
||||
* Uses UTC consistently with all other date functions in this module.
|
||||
*/
|
||||
export function isToday(dateStr: string): boolean {
|
||||
const today = new Date();
|
||||
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
||||
const todayStr = new Date().toISOString().slice(0, 10);
|
||||
return dateStr === todayStr;
|
||||
}
|
||||
|
||||
|
||||
@@ -27,10 +27,20 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
createPlan: async ({ fetch, request }) => {
|
||||
createPlan: async ({ fetch, request, locals }) => {
|
||||
// Role guard: only planners may create week plans
|
||||
if (locals.benutzer?.rolle !== 'planer') {
|
||||
return { success: false, error: 'Keine Berechtigung.' };
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
const weekStart = formData.get('weekStart') as string;
|
||||
|
||||
// Validate weekStart format: must be YYYY-MM-DD
|
||||
if (!weekStart || !/^\d{4}-\d{2}-\d{2}$/.test(weekStart)) {
|
||||
return { success: false, error: 'Ungültiges Datum.' };
|
||||
}
|
||||
|
||||
const api = apiClient(fetch);
|
||||
const { data, error } = await api.POST('/v1/week-plans', {
|
||||
body: { weekStart }
|
||||
|
||||
@@ -3,17 +3,14 @@
|
||||
import VarietyScoreCard from '$lib/planner/VarietyScoreCard.svelte';
|
||||
import WeekStrip from '$lib/planner/WeekStrip.svelte';
|
||||
import DayMealCard from '$lib/planner/DayMealCard.svelte';
|
||||
import { prevWeek, nextWeek, getWeekStart, weekDays, formatDayLabel, formatWeekRange, isToday } from '$lib/planner/week';
|
||||
import { prevWeek, nextWeek, getWeekStart, weekDays, formatDayLabel, formatDayAbbr, formatWeekRange } from '$lib/planner/week';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
// Capture initial weekStart before reactivity for $state initialization
|
||||
const initialWeekStart: string = data.weekStart;
|
||||
const todayStr = getWeekStart(new Date());
|
||||
const today = (() => {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
})();
|
||||
// Use UTC date string (YYYY-MM-DD) consistently
|
||||
const today: string = new Date().toISOString().slice(0, 10);
|
||||
|
||||
let weekStart = $derived(data.weekStart);
|
||||
let weekPlan = $derived(data.weekPlan);
|
||||
@@ -35,7 +32,8 @@
|
||||
});
|
||||
|
||||
let selectedSlot = $derived(slotMap[selectedDay] ?? { id: null, slotDate: selectedDay, recipe: null });
|
||||
let remainingSlots = $derived(days.filter(d => d > selectedDay).map((d: string) => slotMap[d] ?? { id: null, slotDate: d, recipe: null }));
|
||||
let remainingSlots = $derived(days.filter((d: string) => d > selectedDay).map((d: string) => slotMap[d] ?? { id: null, slotDate: d, recipe: null }));
|
||||
let remainingSlotsWithMeal = $derived(remainingSlots.filter((s: any) => s.recipe));
|
||||
|
||||
let isPlanner = $derived((data as any).benutzer?.rolle === 'planer');
|
||||
|
||||
@@ -88,9 +86,9 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Variety banner (always visible) -->
|
||||
<!-- Variety banner: sticky below the top nav so it's always visible (spec requirement) -->
|
||||
{#if varietyScore}
|
||||
<div class="px-4 pt-3">
|
||||
<div class="sticky z-10 px-4 pt-3" style="top: 56px;">
|
||||
<VarietyScoreCard
|
||||
score={varietyScore.score ?? 0}
|
||||
ingredientOverlaps={varietyScore.ingredientOverlaps ?? []}
|
||||
@@ -115,17 +113,22 @@
|
||||
<p class="mb-2 font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
|
||||
{formatDayLabel(selectedDay)}
|
||||
</p>
|
||||
<DayMealCard slot={selectedSlot} isToday={selectedDay === today} readonly={!isPlanner} />
|
||||
<DayMealCard
|
||||
slot={selectedSlot}
|
||||
isToday={selectedDay === today}
|
||||
isSelected={true}
|
||||
readonly={!isPlanner}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Remaining days list -->
|
||||
{#if remainingSlots.filter((s: any) => s.recipe).length > 0}
|
||||
{#if remainingSlotsWithMeal.length > 0}
|
||||
<div class="px-4 pt-6 pb-4">
|
||||
<h2 class="mb-3 font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
|
||||
Restliche Woche
|
||||
</h2>
|
||||
<div class="space-y-2 md:grid md:grid-cols-2 md:gap-2 md:space-y-0">
|
||||
{#each remainingSlots.filter((s: any) => s.recipe) as slot}
|
||||
{#each remainingSlotsWithMeal as slot}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleSelectDay(slot.slotDate)}
|
||||
@@ -134,7 +137,7 @@
|
||||
<span class="min-w-[36px] font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">
|
||||
{formatDayLabel(slot.slotDate).split(',')[0]}
|
||||
</span>
|
||||
<span class="flex-1 font-[var(--font-sans)] text-[14px] font-medium text-[var(--color-text)] truncate">
|
||||
<span class="flex-1 truncate font-[var(--font-sans)] text-[14px] font-medium text-[var(--color-text)]">
|
||||
{slot.recipe?.name}
|
||||
</span>
|
||||
{#if isPlanner}
|
||||
@@ -209,9 +212,6 @@
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- Left sidebar -->
|
||||
<aside class="flex w-[224px] flex-shrink-0 flex-col border-r border-[var(--color-border)] bg-[var(--color-surface)] p-4">
|
||||
<nav class="flex-1">
|
||||
<p class="font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">Navigation</p>
|
||||
</nav>
|
||||
<!-- Variety widget at bottom -->
|
||||
{#if varietyScore}
|
||||
<div class="mt-auto">
|
||||
@@ -245,12 +245,16 @@
|
||||
{@const isTodayDay = day === today}
|
||||
{@const isSelectedDay = day === selectedDay}
|
||||
{@const dateNum = day.slice(-2).replace(/^0/, '')}
|
||||
{@const dayAbbr = formatDayAbbr(day, 'narrow')}
|
||||
|
||||
<div class="flex flex-col">
|
||||
<!-- Column header -->
|
||||
<div class="mb-2 text-center">
|
||||
<!-- Column header: day name + date badge -->
|
||||
<div class="mb-2 flex flex-col items-center gap-1">
|
||||
<p class="font-[var(--font-sans)] text-[9px] uppercase tracking-wide text-[var(--color-text-muted)]">
|
||||
{dayAbbr}
|
||||
</p>
|
||||
<div
|
||||
class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-medium
|
||||
class="flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-medium
|
||||
{isTodayDay ? 'bg-[var(--yellow)] text-white' : ''}
|
||||
{isSelectedDay && !isTodayDay ? 'bg-[var(--green-tint)] text-[var(--green-dark)]' : ''}
|
||||
{!isTodayDay && !isSelectedDay ? 'bg-transparent text-[var(--color-text)]' : ''}"
|
||||
@@ -263,12 +267,12 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleSelectDay(day)}
|
||||
aria-label={slot.recipe ? slot.recipe.name : `Gericht wählen für ${formatDayLabel(day)}`}
|
||||
class="flex flex-1 flex-col rounded-[var(--radius-lg)] border p-2 text-left shadow-[var(--shadow-card)] transition-all hover:border-[var(--green-light)] hover:shadow-[var(--shadow-raised)]
|
||||
{slot.recipe ? 'bg-[var(--color-surface)]' : 'border-dashed bg-transparent'}
|
||||
{slot.recipe && !isTodayDay && !isSelectedDay ? 'border-[var(--color-border)] bg-[var(--color-surface)]' : ''}
|
||||
{isTodayDay && slot.recipe ? 'border-2 border-[var(--yellow)] bg-[var(--yellow-tint)]' : ''}
|
||||
{isSelectedDay && !isTodayDay && slot.recipe ? 'border-2 border-[var(--green)] bg-[var(--green-tint)]' : ''}
|
||||
{!isTodayDay && !isSelectedDay && slot.recipe ? 'border-[var(--color-border)]' : ''}
|
||||
{!slot.recipe ? 'border-[var(--color-border)]' : ''}"
|
||||
{!slot.recipe ? 'border-dashed border-[var(--color-border)] bg-transparent' : ''}"
|
||||
>
|
||||
{#if slot.recipe}
|
||||
<p class="font-[var(--font-display)] text-[13px] font-[300] leading-tight text-[var(--color-text)]">
|
||||
@@ -276,7 +280,7 @@
|
||||
</p>
|
||||
{:else}
|
||||
<div class="flex flex-1 flex-col items-center justify-center py-4 text-[var(--color-text-muted)]">
|
||||
<span class="text-[18px]">+</span>
|
||||
<span class="text-[18px]" aria-hidden="true">+</span>
|
||||
<span class="font-[var(--font-sans)] text-[11px]">Gericht wählen</span>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -305,7 +309,7 @@
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if !isPlanner === false}
|
||||
<!-- View and cook actions shown to all roles -->
|
||||
<div class="mt-4 space-y-2">
|
||||
<a
|
||||
href="/recipes/{selectedSlot.recipe.id}"
|
||||
@@ -319,6 +323,7 @@
|
||||
>
|
||||
Koch-Modus
|
||||
</a>
|
||||
<!-- Swap action: planner only -->
|
||||
{#if isPlanner}
|
||||
<a
|
||||
href="/planner/suggestions?day={selectedDay}"
|
||||
@@ -328,7 +333,6 @@
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="font-[var(--font-sans)] text-[14px] text-[var(--color-text-muted)]">Kein Gericht geplant</p>
|
||||
{#if isPlanner}
|
||||
|
||||
@@ -111,7 +111,8 @@ describe('planner page — actions', () => {
|
||||
formData.set('weekStart', '2026-03-30');
|
||||
const result = await actions.createPlan({
|
||||
fetch: vi.fn(),
|
||||
request: { formData: async () => formData }
|
||||
request: { formData: async () => formData },
|
||||
locals: { benutzer: { id: 'u1', name: 'Test', rolle: 'planer' }, haushalt: { id: 'h1', name: 'Test' } }
|
||||
});
|
||||
expect(mockPost).toHaveBeenCalledWith('/v1/week-plans', expect.objectContaining({ body: { weekStart: '2026-03-30' } }));
|
||||
expect(result).toEqual({ success: true });
|
||||
@@ -123,8 +124,72 @@ describe('planner page — actions', () => {
|
||||
formData.set('weekStart', '2026-03-30');
|
||||
const result = await actions.createPlan({
|
||||
fetch: vi.fn(),
|
||||
request: { formData: async () => formData }
|
||||
request: { formData: async () => formData },
|
||||
locals: { benutzer: { id: 'u1', name: 'Test', rolle: 'planer' }, haushalt: { id: 'h1', name: 'Test' } }
|
||||
});
|
||||
expect(result).toEqual({ success: false, error: expect.any(String) });
|
||||
});
|
||||
|
||||
it('createPlan action returns error for invalid weekStart format', async () => {
|
||||
const formData = new FormData();
|
||||
formData.set('weekStart', 'not-a-date');
|
||||
const result = await actions.createPlan({
|
||||
fetch: vi.fn(),
|
||||
request: { formData: async () => formData },
|
||||
locals: { benutzer: { id: 'u1', name: 'Test', rolle: 'planer' }, haushalt: { id: 'h1', name: 'Test' } }
|
||||
});
|
||||
expect(result).toEqual({ success: false, error: 'Ungültiges Datum.' });
|
||||
expect(mockPost).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('createPlan action returns error when weekStart is missing', async () => {
|
||||
const formData = new FormData();
|
||||
const result = await actions.createPlan({
|
||||
fetch: vi.fn(),
|
||||
request: { formData: async () => formData },
|
||||
locals: { benutzer: { id: 'u1', name: 'Test', rolle: 'planer' }, haushalt: { id: 'h1', name: 'Test' } }
|
||||
});
|
||||
expect(result).toEqual({ success: false, error: 'Ungültiges Datum.' });
|
||||
});
|
||||
|
||||
it('createPlan action returns permission error for member role', async () => {
|
||||
const formData = new FormData();
|
||||
formData.set('weekStart', '2026-03-30');
|
||||
const result = await actions.createPlan({
|
||||
fetch: vi.fn(),
|
||||
request: { formData: async () => formData },
|
||||
locals: { benutzer: { id: 'u1', name: 'Test', rolle: 'mitglied' }, haushalt: { id: 'h1', name: 'Test' } }
|
||||
});
|
||||
expect(result).toEqual({ success: false, error: 'Keine Berechtigung.' });
|
||||
expect(mockPost).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('planner page — variety score partial failure', () => {
|
||||
let load: any;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockGet.mockReset();
|
||||
mockPost.mockReset();
|
||||
vi.resetModules();
|
||||
const mod = await import('./+page.server');
|
||||
load = mod.load;
|
||||
});
|
||||
|
||||
const mockWeekPlan = {
|
||||
id: 'plan-1',
|
||||
weekStart: '2026-03-30',
|
||||
status: 'draft',
|
||||
slots: []
|
||||
};
|
||||
|
||||
it('returns weekPlan even when variety score API fails', async () => {
|
||||
mockGet.mockResolvedValueOnce({ data: mockWeekPlan, error: undefined });
|
||||
mockGet.mockResolvedValueOnce({ data: undefined, error: { status: 500 } });
|
||||
const url = new URL('http://localhost/planner');
|
||||
const result = await load({ fetch: vi.fn(), url });
|
||||
expect(result.weekPlan).toBeDefined();
|
||||
expect(result.weekPlan.id).toBe('plan-1');
|
||||
expect(result.varietyScore).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user