diff --git a/frontend/src/lib/shared/dashboard/ReaderDraftsModule.svelte.test.ts b/frontend/src/lib/shared/dashboard/ReaderDraftsModule.svelte.test.ts new file mode 100644 index 00000000..28fd507f --- /dev/null +++ b/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 = {}) => ({ + id: 'g1', + title: 'My Draft Story', + body: '

Draft content

', + 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'); + }); +});