frontend/src/lib/shared/dashboard/ReaderDraftsModule.svelte.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ReaderDraftsModule from './ReaderDraftsModule.svelte';
+
+afterEach(cleanup);
+
+const makeDraft = (overrides: Record<string, unknown> = {}) => ({
+	id: 'g1',
+	title: 'My Draft Story',
+	body: '<p>Draft content</p>',
+	publishedAt: null,
+	updatedAt: '2026-04-15T10:00:00Z',
+	...overrides
+});
+
+describe('ReaderDraftsModule', () => {
+	it('renders the heading', async () => {
+		render(ReaderDraftsModule, { props: { drafts: [] } });
+
+		await expect.element(page.getByRole('heading', { name: /meine entwürfe/i })).toBeVisible();
+	});
+
+	it('renders the empty placeholder when drafts is empty', async () => {
+		render(ReaderDraftsModule, { props: { drafts: [] } });
+
+		await expect.element(page.getByText('Keine Entwürfe')).toBeVisible();
+	});
+
+	it('renders one row per draft', async () => {
+		render(ReaderDraftsModule, {
+			props: {
+				drafts: [
+					makeDraft({ id: 'g1', title: 'Draft 1' }),
+					makeDraft({ id: 'g2', title: 'Draft 2' })
+				]
+			}
+		});
+
+		await expect.element(page.getByText('Draft 1')).toBeVisible();
+		await expect.element(page.getByText('Draft 2')).toBeVisible();
+	});
+
+	it('renders the draft link to /geschichten/{id}/edit', async () => {
+		render(ReaderDraftsModule, { props: { drafts: [makeDraft({ id: 'g-42' })] } });
+
+		const link = document.querySelector('a[href="/geschichten/g-42/edit"]');
+		expect(link).not.toBeNull();
+	});
+
+	it('renders the meta line with relative time', async () => {
+		render(ReaderDraftsModule, { props: { drafts: [makeDraft()] } });
+
+		expect(document.body.textContent).toContain('Entwurf');
+	});
+});