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

refactor(dashboard): ReaderRecentStories card-head link, touch targets (TDD, #483)

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

42
frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
View File

@@ -52,7 +52,7 @@ describe('ReaderRecentStories', () => {
await expect.element(links).not.toBeInTheDocument();
});
it('renders "Alle Geschichten" link', async () => {
it('renders "Alle Geschichten" link pointing to /geschichten', async () => {
render(ReaderRecentStories, { stories: [story1] });
const allLink = page.getByRole('link', { name: /Alle Geschichten/i });
await expect.element(allLink).toHaveAttribute('href', '/geschichten');
@@ -72,4 +72,44 @@ describe('ReaderRecentStories', () => {
const cls = ((await allLink.element()) as HTMLElement).className;
expect(cls).toMatch(/min-h-\[44px\]/);
});
it('card-head contains an h3 (not h2)', async () => {
render(ReaderRecentStories, { stories: [story1] });
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('card-head div has border-b and border-line classes', async () => {
render(ReaderRecentStories, { stories: [story1] });
const h3 = page.getByRole('heading', { level: 3 });
const cardHead = ((await h3.element()) as HTMLElement).parentElement;
expect(cardHead?.className).toMatch(/border-b/);
expect(cardHead?.className).toMatch(/border-line/);
});
it('"Alle Geschichten" link is inside the card-head (sibling of h3)', async () => {
render(ReaderRecentStories, { stories: [story1] });
const h3 = page.getByRole('heading', { level: 3 });
const cardHead = ((await h3.element()) as HTMLElement).parentElement;
const allLink = cardHead?.querySelector('a');
expect(allLink).not.toBeNull();
expect(allLink?.textContent?.trim()).toMatch(/Alle Geschichten/i);
});
it('story-row link has min-h-[44px] touch target', async () => {
render(ReaderRecentStories, { stories: [story1] });
const link = page.getByRole('link', { name: /Die Familie Müller/ });
const cls = ((await link.element()) as HTMLElement).className;
expect(cls).toMatch(/min-h-\[44px\]/);
});
it('excerpt has text-ink-2 class', async () => {
render(ReaderRecentStories, { stories: [story1] });
const link = page.getByRole('link', { name: /Die Familie Müller/ });
const el = (await link.element()) as HTMLElement;
const excerptEl = el.querySelector('p');
expect(excerptEl?.className).toMatch(/text-ink-2/);
});
});