marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

refactor(dashboard): ReaderDraftsModule mint left-border, card-head, row structure (TDD, #483)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 17:10:20 +02:00
parent e598f5a506
commit 60326cfb0a
2 changed files with 79 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/lib/shared/dashboard/ReaderDraftsModule.svelte.spec.ts
View File

@@ -36,10 +36,12 @@ describe('ReaderDraftsModule', () => {
await expect.element(link2).toHaveAttribute('href', '/geschichten/g2/edit');
});
it('shows heading "Meine Entwürfe"', async () => {
it('shows heading as h3 (not h2)', async () => {
render(ReaderDraftsModule, { drafts: [draft1] });
const heading = page.getByRole('heading', { name: /Meine Entwürfe/i });
await expect.element(heading).toBeInTheDocument();
const h3 = page.getByRole('heading', { level: 3 });
await expect.element(h3).toBeInTheDocument();
const h2 = page.getByRole('heading', { level: 2 });
await expect.element(h2).not.toBeInTheDocument();
});
it('shows empty state when drafts is empty', async () => {
@@ -53,4 +55,45 @@ describe('ReaderDraftsModule', () => {
const emptyText = page.getByText(/Keine Entwürfe/i);
await expect.element(emptyText).not.toBeInTheDocument();
});
it('card wrapper has mint left-border classes', async () => {
render(ReaderDraftsModule, { drafts: [draft1] });
const h3 = page.getByRole('heading', { level: 3 });
const card = ((await h3.element()) as HTMLElement).closest('div[class]');
const rootCard = card?.parentElement;
const cls = rootCard?.className ?? '';
expect(cls).toMatch(/border-l-\[3px\]/);
expect(cls).toMatch(/border-l-brand-mint/);
});
it('draft-row link has min-h-[44px] touch target', async () => {
render(ReaderDraftsModule, { drafts: [draft1] });
const link = page.getByRole('link', { name: /Mein erster Entwurf/ });
const cls = ((await link.element()) as HTMLElement).className;
expect(cls).toMatch(/min-h-\[44px\]/);
});
it('draft title has text-brand-navy class', async () => {
render(ReaderDraftsModule, { drafts: [draft1] });
const link = page.getByRole('link', { name: /Mein erster Entwurf/ });
const el = (await link.element()) as HTMLElement;
const titleEl = el.querySelector('[class*="text-brand-navy"]');
expect(titleEl).not.toBeNull();
expect(titleEl?.textContent?.trim()).toBe('Mein erster Entwurf');
});
it('draft meta contains "Entwurf" text', async () => {
render(ReaderDraftsModule, { drafts: [draft1] });
const link = page.getByRole('link', { name: /Mein erster Entwurf/ });
const el = (await link.element()) as HTMLElement;
expect(el.textContent).toMatch(/Entwurf/);
});
it('chevron SVG is present in each draft row', async () => {
render(ReaderDraftsModule, { drafts: [draft1] });
const link = page.getByRole('link', { name: /Mein erster Entwurf/ });
const el = (await link.element()) as HTMLElement;
const svg = el.querySelector('svg');
expect(svg).not.toBeNull();
});
});