diff --git a/frontend/src/lib/recipes/RecipeForm.svelte b/frontend/src/lib/recipes/RecipeForm.svelte index f62df04..4dc67cc 100644 --- a/frontend/src/lib/recipes/RecipeForm.svelte +++ b/frontend/src/lib/recipes/RecipeForm.svelte @@ -1,4 +1,6 @@
+ + {#if $page.form?.error} +
{$page.form.error}
+ {/if} + diff --git a/frontend/src/lib/recipes/RecipeForm.test.ts b/frontend/src/lib/recipes/RecipeForm.test.ts index 3ecf980..64cb585 100644 --- a/frontend/src/lib/recipes/RecipeForm.test.ts +++ b/frontend/src/lib/recipes/RecipeForm.test.ts @@ -1,8 +1,17 @@ -import { describe, it, expect } from 'vitest'; +import { describe, it, expect, vi } from 'vitest'; import { render, screen } from '@testing-library/svelte'; import { userEvent } from '@testing-library/user-event'; +import { writable } from 'svelte/store'; import RecipeForm from './RecipeForm.svelte'; +vi.mock('$app/stores', () => ({ + page: writable({ form: null, url: new URL('http://localhost/recipes/new') }) +})); + +vi.mock('$app/forms', () => ({ + enhance: () => ({ destroy: () => {} }) +})); + const mockCategories = [ { id: 'c1', name: 'Pasta', tagType: 'category' }, { id: 'c2', name: 'Fleisch', tagType: 'category' } @@ -140,4 +149,17 @@ describe('RecipeForm', () => { const cancelLink = screen.getByRole('link', { name: /abbrechen/i }); expect(cancelLink).toHaveAttribute('href', '/recipes'); }); + + it('displays form error message when $page.form.error is set', async () => { + const { page } = await import('$app/stores'); + (page as ReturnType).set({ form: { error: 'Name ist erforderlich' }, url: new URL('http://localhost/recipes/new') }); + render(RecipeForm, { props: emptyProps }); + expect(screen.getByRole('alert')).toHaveTextContent('Name ist erforderlich'); + (page as ReturnType).set({ form: null, url: new URL('http://localhost/recipes/new') }); + }); + + it('does not display error banner when form has no error', () => { + render(RecipeForm, { props: emptyProps }); + expect(screen.queryByRole('alert')).not.toBeInTheDocument(); + }); });