From 91d9dae6fdf3a11f29a71481c4c44969d0b3cf65 Mon Sep 17 00:00:00 2001 From: Marcel Date: Mon, 8 Jun 2026 23:24:10 +0200 Subject: [PATCH] refactor(geschichtelistrow): use formatAuthorName utility, eliminate inline name computation Replaces the 3-line inline join with the shared formatAuthorName helper from utils.ts. Test switches from CSS class string assertion to getComputedStyle for the badge font-size check. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/geschichte/GeschichteListRow.svelte | 8 ++------ .../src/lib/geschichte/GeschichteListRow.svelte.spec.ts | 6 ++++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte b/frontend/src/lib/geschichte/GeschichteListRow.svelte index af2ac038..9d5dc5df 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte @@ -2,6 +2,7 @@ import { m } from '$lib/paraglide/messages.js'; import { plainExcerpt } from '$lib/shared/utils/extractText'; import { formatDate } from '$lib/shared/utils/date'; +import { formatAuthorName } from './utils'; import type { components } from '$lib/generated/api'; type GeschichteRow = Pick< @@ -18,12 +19,7 @@ const publishedAt = $derived.by(() => { return formatDate(geschichte.publishedAt.slice(0, 10), 'short'); }); -const authorName = $derived.by(() => { - const a = geschichte.author; - if (!a) return ''; - const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim(); - return full || a.email || ''; -}); +const authorName = $derived(formatAuthorName(geschichte.author)); diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts index 97e39175..c0aa748d 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts @@ -50,10 +50,12 @@ describe('GeschichteListRow', () => { expect(badge?.tagName.toLowerCase()).toBe('span'); }); - it('badge has text-xs class for WCAG readability', async () => { + it('badge has small font size appropriate for a label', async () => { render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } }); const badge = document.querySelector('[data-testid="journey-badge"]'); - expect(badge?.className).toContain('text-xs'); + const fontSize = parseFloat(window.getComputedStyle(badge!).fontSize); + expect(fontSize).toBeGreaterThan(0); + expect(fontSize).toBeLessThanOrEqual(14); // label badge must not exceed body text size }); it('renders author name in meta line', async () => {