Component tests

Svelte 5 component tests to verify rendering output and behavior. Uses @testing-library/svelte for DOM-based tests or Svelte's render from svelte/server for SSR snapshot tests.

Part of Add tests and CI integration (sub-task 4 of 4). Requires testing environment setup first.

Additional setup

• Install @testing-library/svelte (check Svelte 5 compatibility)
• Install jsdom or happy-dom for DOM environment
• Configure $app/* mocks (stores, navigation, paths, environment)

Priority components

Meta.svelte

• Renders correct <meta> tags for title, description
• Renders og:image, og:title, og:description
• Handles missing optional props

TodoCover.svelte

• Renders different visual states: new, done, in_progress

PublicationDate.svelte

• Formats DD-MM-YYYY dates correctly for display
• Handles updated date

ReadingTime.svelte

• Calculates and displays reading time from word count

Accordion.svelte

• Renders collapsed by default
• Expands on click/interaction
• Shows/hides content

AnchorHeading.svelte

• Renders heading element with anchor link
• Correct id attribute

Navigation components

NavAnchor.svelte

• Renders anchor with correct id and name

Breadcrumbs.svelte

• Generates correct breadcrumb trail from URL path
• Links are correct for each level

Nav.svelte

• Renders navigation items
• Active state for current page

Content components

Articles.svelte

• Renders article list from feed items
• Handles empty list
• Correct links and titles

PostPreview.svelte

• Renders preview card with title, summary, date
• Cover image rendering

LinkBlock.svelte

• Renders link with correct href

CallToAction.svelte

• Renders CTA with title and description

SharePostLink.svelte

• Generates correct share URL

ReadNext.svelte

• Renders next post suggestion with title and link
• Handles missing post gracefully

Publication.svelte

• Full wrapper: renders meta, heading, content, CTA
• Passes props through to child components

Notes

• Components using $app/stores (page, navigating) need mocked stores
• Components using $app/paths (base, assets) need path mocks
• Some components may use Svelte 5 runes ($state, $derived) -- check testing-library compatibility
• SSR render tests (svelte/server) are simpler but only verify HTML output, not interactivity