fix(recipes): address review feedback — shared type, design system tokens, test coverage

- Extract RecipeSummary type to $lib/recipes/types.ts (was duplicated in 3 files)
- Fix +page.svelte header link: replace Skeleton UI classes with design system tokens
- Fix h1: use font-[var(--font-display)] and correct size
- Fix FilterChipRow: text-[11px] → text-[13px] + tracking-[0.04em] per design system
- Fix RecipeCard metadata: text-[11px] → text-[12px] for readability
- Remove unused imports (vi, beforeEach, afterEach) from page.test.ts
- Add combined search + effort filter test
- Add reset-to-Alle filter test

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-03 09:53:32 +02:00
parent 47c748145d
commit 9bb6293d9f
6 changed files with 40 additions and 22 deletions

View File

@@ -1,14 +1,7 @@
<script lang="ts">
import FilterChipRow from '$lib/recipes/FilterChipRow.svelte';
import RecipeGrid from '$lib/recipes/RecipeGrid.svelte';
type RecipeSummary = {
id: string;
name: string;
cookTimeMin?: number;
effort?: string;
heroImageUrl?: string;
};
import type { RecipeSummary } from '$lib/recipes/types';
let { data }: { data: { recipes: RecipeSummary[] } } = $props();
@@ -37,8 +30,8 @@
<div class="p-6 space-y-4">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-medium">Rezepte</h1>
<a href="/recipes/new" class="btn variant-filled-primary">Rezept hinzufügen</a>
<h1 class="font-[var(--font-display)] text-[28px] font-medium text-[var(--color-text)]">Rezepte</h1>
<a href="/recipes/new" class="font-sans text-[13px] font-medium tracking-[0.04em] rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-white">Rezept hinzufügen</a>
</div>
<input

View File

@@ -1,4 +1,4 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { userEvent } from '@testing-library/user-event';
import Page from './+page.svelte';
@@ -71,4 +71,29 @@ describe('recipe library page', () => {
render(Page, { props: { data: { recipes: [] } } });
expect(screen.getByText(/keine rezepte/i)).toBeInTheDocument();
});
it('applies search and effort filter together', async () => {
const user = userEvent.setup();
render(Page, { props: { data: mockData } });
await user.click(screen.getByRole('button', { name: 'Leicht' }));
const searchInput = screen.getByPlaceholderText(/suchen/i);
await user.type(searchInput, 'Gemüse');
expect(screen.getByText('Gemüsesuppe')).toBeInTheDocument();
expect(screen.queryByText('Spaghetti Bolognese')).not.toBeInTheDocument();
expect(screen.queryByText('Chicken Curry')).not.toBeInTheDocument();
});
it('resets to all recipes when Alle chip is clicked', async () => {
const user = userEvent.setup();
render(Page, { props: { data: mockData } });
await user.click(screen.getByRole('button', { name: 'Mittel' }));
expect(screen.queryByText('Spaghetti Bolognese')).not.toBeInTheDocument();
await user.click(screen.getByRole('button', { name: 'Alle' }));
expect(screen.getByText('Spaghetti Bolognese')).toBeInTheDocument();
expect(screen.getByText('Chicken Curry')).toBeInTheDocument();
});
});