diff --git a/frontend/src/lib/geschichte/StoryReader.svelte b/frontend/src/lib/geschichte/StoryReader.svelte new file mode 100644 index 00000000..bcb04800 --- /dev/null +++ b/frontend/src/lib/geschichte/StoryReader.svelte @@ -0,0 +1,120 @@ + + + +
+ + {@html sanitized} +
+ + +{#if g.persons && g.persons.length > 0} +
+

+ {m.geschichten_persons_section()} +

+ +
+{/if} + + +{#if g.items && g.items.some((i) => i.document)} +
+

+ {m.geschichten_documents_section()} +

+ +
+{/if} + + +{#if canBlogWrite} +
+ + {m.btn_edit()} + + +
+{/if} diff --git a/frontend/src/lib/geschichte/StoryReader.svelte.spec.ts b/frontend/src/lib/geschichte/StoryReader.svelte.spec.ts new file mode 100644 index 00000000..7ef5ada8 --- /dev/null +++ b/frontend/src/lib/geschichte/StoryReader.svelte.spec.ts @@ -0,0 +1,135 @@ +import { describe, it, expect, afterEach } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import { createConfirmService, CONFIRM_KEY } from '$lib/shared/services/confirm.svelte.js'; +import type { components } from '$lib/generated/api'; + +const { default: StoryReader } = await import('./StoryReader.svelte'); + +afterEach(cleanup); + +type GeschichteView = components['schemas']['GeschichteView']; + +const baseGeschichte = (overrides: Partial = {}): GeschichteView => ({ + id: 'g1', + title: 'Die Reise nach Berlin', + body: '

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('XSS: Story body is sanitised — injected payload does not execute', async () => { + // StoryReader uses {@html safeHtml(g.body)} — DOMPurify must strip the payload. + render(StoryReader, { + context: ctx(), + props: { + geschichte: baseGeschichte({ + body: '' + }), + canBlogWrite: false + } + }); + + expect((window as { __xss_story?: number }).__xss_story).toBeUndefined(); + }); +}); diff --git a/frontend/src/routes/geschichten/[id]/+page.svelte b/frontend/src/routes/geschichten/[id]/+page.svelte index cacdb2e2..23a00d42 100644 --- a/frontend/src/routes/geschichten/[id]/+page.svelte +++ b/frontend/src/routes/geschichten/[id]/+page.svelte @@ -1,17 +1,15 @@ @@ -50,93 +28,28 @@ async function handleDelete() {
-

- {g.title} -

+
+

+ {g.title} +

+ {#if isJourney} + + {m.journey_badge_detail()} + + {/if} +

{authorName()} {#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}

- -
- - {@html sanitized} -
+ {#if isJourney} + + {:else} + + {/if}
- - - {#if g.persons && g.persons.length > 0} -
-

- {m.geschichten_persons_section()} -

- -
- {/if} - - - {#if g.items && g.items.some((i) => i.documentId)} -
-

- {m.geschichten_documents_section()} -

- -
- {/if} - - - {#if data.canBlogWrite} -
- - {m.btn_edit()} - - -
- {/if}