+ {authorName} + {#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if} +
+ {#if geschichte.body} + +{plainExcerpt(geschichte.body, 150)}
+ {/if} + diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts new file mode 100644 index 00000000..c0aa748d --- /dev/null +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts @@ -0,0 +1,65 @@ +import { describe, it, expect, afterEach } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; + +const { default: GeschichteListRow } = await import('./GeschichteListRow.svelte'); + +afterEach(cleanup); + +const baseRow = (overrides = {}) => ({ + id: 'g1', + title: 'Die Reise nach Berlin', + body: 'Im Jahr 1923...
', + type: 'STORY' as 'STORY' | 'JOURNEY', + status: 'PUBLISHED' as 'PUBLISHED' | 'DRAFT', + author: { firstName: 'Anna', lastName: 'Schmidt', email: 'a@x' }, + publishedAt: '2026-04-15T10:00:00Z', + ...overrides +}); + +describe('GeschichteListRow', () => { + it('renders the title', async () => { + render(GeschichteListRow, { props: { geschichte: baseRow() } }); + await expect + .element(page.getByRole('heading', { level: 2 })) + .toHaveTextContent('Die Reise nach Berlin'); + }); + + it('shows no badge for STORY type', async () => { + render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } }); + expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull(); + }); + + it('shows no badge when type is undefined', async () => { + render(GeschichteListRow, { + props: { geschichte: baseRow({ type: undefined as unknown as 'STORY' | 'JOURNEY' }) } + }); + expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull(); + }); + + it('shows REISE badge for JOURNEY type', async () => { + render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } }); + const badge = document.querySelector('[data-testid="journey-badge"]'); + expect(badge).not.toBeNull(); + expect(badge?.textContent?.trim()).toBe('REISE'); + }); + + it('badge is a plain , not a nested interactive element', async () => { + render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } }); + const badge = document.querySelector('[data-testid="journey-badge"]'); + expect(badge?.tagName.toLowerCase()).toBe('span'); + }); + + it('badge has small font size appropriate for a label', async () => { + render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } }); + const badge = document.querySelector('[data-testid="journey-badge"]'); + const fontSize = parseFloat(window.getComputedStyle(badge!).fontSize); + expect(fontSize).toBeGreaterThan(0); + expect(fontSize).toBeLessThanOrEqual(14); // label badge must not exceed body text size + }); + + it('renders author name in meta line', async () => { + render(GeschichteListRow, { props: { geschichte: baseRow() } }); + expect(document.body.textContent).toContain('Anna Schmidt'); + }); +}); diff --git a/frontend/src/lib/geschichte/GeschichtenCard.svelte.spec.ts b/frontend/src/lib/geschichte/GeschichtenCard.svelte.spec.ts index 90e3bdb7..2aeefc5a 100644 --- a/frontend/src/lib/geschichte/GeschichtenCard.svelte.spec.ts +++ b/frontend/src/lib/geschichte/GeschichtenCard.svelte.spec.ts @@ -121,6 +121,16 @@ describe('GeschichtenCard', () => { expect(link.getAttribute('href')).toBe('/geschichten?personId=p1'); }); + it('JOURNEY type does not bleed a REISE badge into the person-sidebar card', async () => { + render(GeschichtenCard, { + geschichten: [{ ...makeStory('g1', 'Reise Berlin'), type: 'JOURNEY' as const }], + personId: 'p1', + personName: 'Franz', + canWrite: false + }); + expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull(); + }); + it('renders a plain-text excerpt without HTML markup', async () => { render(GeschichtenCard, { geschichten: [ diff --git a/frontend/src/lib/geschichte/JourneyInterlude.svelte b/frontend/src/lib/geschichte/JourneyInterlude.svelte new file mode 100644 index 00000000..9bfcca9e --- /dev/null +++ b/frontend/src/lib/geschichte/JourneyInterlude.svelte @@ -0,0 +1,24 @@ + + +{note}
++ + {item.note} +
+{/if} diff --git a/frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts b/frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts new file mode 100644 index 00000000..75a77516 --- /dev/null +++ b/frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts @@ -0,0 +1,124 @@ +import { describe, it, expect, afterEach } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import type { components } from '$lib/generated/api'; + +const { default: JourneyItemCard } = await import('./JourneyItemCard.svelte'); + +afterEach(cleanup); + +declare global { + interface Window { + __xss_note?: number; + } +} + +type JourneyItemView = components['schemas']['JourneyItemView']; + +const baseItem = (overrides: Partial{introText}
+{/if} + +{#if validItems.length === 0} ++ {m.journey_empty_state()} +
+{:else} +{item.note}
+ {/if} +Im Jahr 1923 fuhr Helene...
', + type: 'STORY', + status: 'PUBLISHED', + author: { id: 'u1', displayName: 'Anna Schmidt' }, + persons: [], + items: [], + createdAt: '2026-01-01T00:00:00Z', + updatedAt: '2026-01-01T00:00:00Z', + ...overrides +}); + +const ctx = () => new Map([[CONFIRM_KEY, createConfirmService()]]); + +describe('StoryReader', () => { + it('renders body HTML content', async () => { + render(StoryReader, { + context: ctx(), + props: { geschichte: baseGeschichte(), canBlogWrite: false } + }); + + await expect.element(page.getByText(/Im Jahr 1923/)).toBeVisible(); + }); + + it('omits persons section when persons array is empty', async () => { + render(StoryReader, { + context: ctx(), + props: { geschichte: baseGeschichte({ persons: [] }), canBlogWrite: false } + }); + + await expect.element(page.getByText(/Personen in dieser Geschichte/i)).not.toBeInTheDocument(); + }); + + it('renders persons section with firstName + lastName joined', async () => { + render(StoryReader, { + context: ctx(), + props: { + geschichte: baseGeschichte({ + persons: [ + { id: 'p1', firstName: 'Helene', lastName: 'Schmidt' }, + { id: 'p2', firstName: 'Karl', lastName: 'Müller' } + ] + }), + canBlogWrite: false + } + }); + + await expect.element(page.getByText('Personen in dieser Geschichte')).toBeVisible(); + await expect.element(page.getByText('Helene Schmidt')).toBeVisible(); + await expect.element(page.getByText('Karl Müller')).toBeVisible(); + }); + + it('omits documents section when no items have documents', async () => { + render(StoryReader, { + context: ctx(), + props: { geschichte: baseGeschichte({ items: [] }), canBlogWrite: false } + }); + + await expect.element(page.getByText('Erwähnte Dokumente')).not.toBeInTheDocument(); + }); + + it('renders documents section for items with documents', async () => { + render(StoryReader, { + context: ctx(), + props: { + geschichte: baseGeschichte({ + items: [ + { + id: 'i1', + position: 0, + document: { id: 'd1', title: 'Brief 1', datePrecision: 'FULL' }, + note: 'Wichtiger Brief' + } + ] + }), + canBlogWrite: false + } + }); + + await expect.element(page.getByText('Erwähnte Dokumente')).toBeVisible(); + await expect.element(page.getByText('Dokument öffnen')).toBeVisible(); + await expect.element(page.getByText('Wichtiger Brief')).toBeVisible(); + }); + + it('shows edit/delete actions when canBlogWrite is true', async () => { + render(StoryReader, { + context: ctx(), + props: { geschichte: baseGeschichte(), canBlogWrite: true } + }); + + await expect + .element(page.getByRole('link', { name: /bearbeiten/i })) + .toHaveAttribute('href', '/geschichten/g1/edit'); + await expect.element(page.getByRole('button', { name: /löschen/i })).toBeVisible(); + }); + + it('hides edit/delete actions when canBlogWrite is false', async () => { + render(StoryReader, { + context: ctx(), + props: { geschichte: baseGeschichte(), canBlogWrite: false } + }); + + await expect.element(page.getByRole('link', { name: /bearbeiten/i })).not.toBeInTheDocument(); + await expect.element(page.getByRole('button', { name: /löschen/i })).not.toBeInTheDocument(); + }); + + it('clicking delete button calls ondelete prop', async () => { + const ondelete = vi.fn().mockResolvedValue(undefined); + render(StoryReader, { + context: ctx(), + props: { geschichte: baseGeschichte(), canBlogWrite: true, ondelete } + }); + + await userEvent.click(page.getByRole('button', { name: /löschen/i })); + + expect(ondelete).toHaveBeenCalledOnce(); + }); + + it('person chip link meets 44px touch-target minimum height', async () => { + render(StoryReader, { + context: ctx(), + props: { + geschichte: baseGeschichte({ + persons: [{ id: 'p1', firstName: 'Helene', lastName: 'Schmidt' }] + }), + canBlogWrite: false + } + }); + + const link = document.querySelectorshort
', 80)).toBe('short'); diff --git a/frontend/src/routes/geschichten/+page.svelte b/frontend/src/routes/geschichten/+page.svelte index 3149d9e2..048ceded 100644 --- a/frontend/src/routes/geschichten/+page.svelte +++ b/frontend/src/routes/geschichten/+page.svelte @@ -1,9 +1,8 @@- {authorName(g)} - {#if publishedAt(g)}· {m.geschichten_published_on({ date: publishedAt(g)! })}{/if} -
- {#if g.body} -{plainExcerpt(g.body, 150)}
- {/if} - + +- {authorName()} + {authorName} {#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}
{item.note}
- {/if} -Im Jahr 1923 fuhr Helene...
', - publishedAt: '2026-04-15T10:00:00Z' as string | null, - author: { firstName: 'Anna', lastName: 'Schmidt', email: 'anna@example.com' } as { - firstName?: string; - lastName?: string; - email: string; - } | null, - persons: [] as { id: string; displayName: string }[], - items: [] as { id: string; documentId?: string; position: number; note?: string }[], + type: 'STORY', + status: 'PUBLISHED', + author: { id: 'u1', displayName: 'Anna Schmidt' }, + persons: [], + items: [], + createdAt: '2026-01-01T00:00:00Z', + updatedAt: '2026-01-01T00:00:00Z', + publishedAt: '2026-04-15T10:00:00Z', ...overrides }); @@ -55,9 +81,7 @@ describe('geschichten/[id] page', () => { context: new Map([[CONFIRM_KEY, createConfirmService()]]), props: { data: baseData({ - geschichte: baseGeschichte({ - author: { firstName: undefined, lastName: undefined, email: 'fallback@example.com' } - }) + geschichte: baseGeschichte({ author: { id: 'u2', displayName: 'fallback@example.com' } }) }) } }); @@ -65,10 +89,10 @@ describe('geschichten/[id] page', () => { await expect.element(page.getByText(/fallback@example.com/)).toBeVisible(); }); - it('renders an empty author when author is null', async () => { + it('renders an empty author when author is absent', async () => { render(GeschichtePage, { context: new Map([[CONFIRM_KEY, createConfirmService()]]), - props: { data: baseData({ geschichte: baseGeschichte({ author: null }) }) } + props: { data: baseData({ geschichte: baseGeschichte({ author: undefined }) }) } }); await expect.element(page.getByRole('heading', { level: 1 })).toBeVisible(); @@ -86,7 +110,9 @@ describe('geschichten/[id] page', () => { it('omits the publishedAt suffix when publishedAt is null', async () => { render(GeschichtePage, { context: new Map([[CONFIRM_KEY, createConfirmService()]]), - props: { data: baseData({ geschichte: baseGeschichte({ publishedAt: null }) }) } + props: { + data: baseData({ geschichte: baseGeschichte({ publishedAt: undefined }) }) + } }); await expect.element(page.getByText(/veröffentlicht am/i)).not.toBeInTheDocument(); @@ -108,8 +134,8 @@ describe('geschichten/[id] page', () => { data: baseData({ geschichte: baseGeschichte({ persons: [ - { id: 'p1', displayName: 'Helene Schmidt' }, - { id: 'p2', displayName: 'Karl Müller' } + { id: 'p1', firstName: 'Helene', lastName: 'Schmidt' }, + { id: 'p2', firstName: 'Karl', lastName: 'Müller' } ] }) }) @@ -136,7 +162,14 @@ describe('geschichten/[id] page', () => { props: { data: baseData({ geschichte: baseGeschichte({ - items: [{ id: 'item1', documentId: 'd1', position: 0, note: 'Brief aus 1923' }] + items: [ + { + id: 'item1', + position: 0, + document: { id: 'd1', title: 'Brief 1923', datePrecision: 'FULL' }, + note: 'Brief aus 1923' + } + ] }) }) } @@ -168,4 +201,77 @@ describe('geschichten/[id] page', () => { await expect.element(page.getByRole('link', { name: /bearbeiten/i })).not.toBeInTheDocument(); await expect.element(page.getByRole('button', { name: /löschen/i })).not.toBeInTheDocument(); }); + + it('STORY with items:[] renders rich-text body and no empty-state message', async () => { + render(GeschichtePage, { + context: new Map([[CONFIRM_KEY, createConfirmService()]]), + props: { data: baseData({ geschichte: baseGeschichte({ type: 'STORY', items: [] }) }) } + }); + + await expect.element(page.getByText(/Im Jahr 1923/)).toBeVisible(); + await expect.element(page.getByText(/Diese Lesereise ist noch leer/)).not.toBeInTheDocument(); + }); + + it('type:undefined + non-empty body renders StoryReader and no empty-state', async () => { + render(GeschichtePage, { + context: new Map([[CONFIRM_KEY, createConfirmService()]]), + props: { + data: baseData({ + geschichte: baseGeschichte({ + type: undefined as unknown as 'STORY' | 'JOURNEY', + items: [] + }) + }) + } + }); + + await expect.element(page.getByText(/Im Jahr 1923/)).toBeVisible(); + await expect.element(page.getByText(/Diese Lesereise ist noch leer/)).not.toBeInTheDocument(); + }); + + it('delete success: navigates to /geschichten after confirmed DELETE returns ok', async () => { + vi.mocked(csrfFetch).mockResolvedValue(new Response(null, { status: 200 })); + const confirmService = createConfirmService(); + render(GeschichtePage, { + context: new Map([[CONFIRM_KEY, confirmService]]), + props: { data: baseData({ canBlogWrite: true }) } + }); + + // Trigger delete — opens confirm dialog + const deleteBtn = page.getByRole('button', { name: /löschen/i }); + await userEvent.click(deleteBtn); + + // Settle the confirmation dialog + confirmService.settle(true); + + // Wait for the async delete to complete, then check goto was called + await vi.waitFor(() => { + expect(vi.mocked(goto)).toHaveBeenCalledWith('/geschichten'); + }); + }); + + it('delete failure: shows error message when DELETE returns non-ok', async () => { + vi.mocked(csrfFetch).mockResolvedValue( + new Response(JSON.stringify({ code: 'FORBIDDEN' }), { + status: 403, + headers: { 'Content-Type': 'application/json' } + }) + ); + const confirmService = createConfirmService(); + render(GeschichtePage, { + context: new Map([[CONFIRM_KEY, confirmService]]), + props: { data: baseData({ canBlogWrite: true }) } + }); + + // Trigger delete — opens confirm dialog + const deleteBtn = page.getByRole('button', { name: /löschen/i }); + await userEvent.click(deleteBtn); + + // Settle the confirmation dialog + confirmService.settle(true); + + // Wait for the error to appear inline + await expect.element(page.getByRole('alert')).toBeVisible(); + expect(vi.mocked(goto)).not.toHaveBeenCalled(); + }); }); diff --git a/frontend/src/routes/geschichten/new/+page.server.ts b/frontend/src/routes/geschichten/new/+page.server.ts index 4763555d..652aa86c 100644 --- a/frontend/src/routes/geschichten/new/+page.server.ts +++ b/frontend/src/routes/geschichten/new/+page.server.ts @@ -19,5 +19,12 @@ export const load: PageServerLoad = async ({ url, fetch, parent }) => { const initialPersons = personResult && personResult.response.ok && personResult.data ? [personResult.data] : []; - return { initialPersons }; + // Validate ?type against the known union — prevents unexpected strings from reaching the API. + // Security note: strict equality rejects encoded variants (e.g. STORY%00JOURNEY) and + // only the FIRST value is returned by searchParams.get() on repeated params. + const rawType = url.searchParams.get('type'); + const selectedType: 'STORY' | 'JOURNEY' | null = + rawType === 'STORY' || rawType === 'JOURNEY' ? rawType : null; + + return { initialPersons, selectedType }; }; diff --git a/frontend/src/routes/geschichten/new/+page.svelte b/frontend/src/routes/geschichten/new/+page.svelte index ad80d87b..0eff0a68 100644 --- a/frontend/src/routes/geschichten/new/+page.svelte +++ b/frontend/src/routes/geschichten/new/+page.svelte @@ -1,42 +1,12 @@{m.journey_placeholder_heading()}
+ + {m.journey_placeholder_back()} ++ {m.journey_selector_question()} +
+ +