From 9be24f2613731778c30fcaebfa5e9d8ff27a9dac Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 9 Jun 2026 10:53:20 +0200
Subject: [PATCH] fix(tests): resolve 43 regressions caused by layout.css
 import in test-setup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Importing layout.css in test-setup.ts activated Tailwind's responsive
breakpoint classes (hidden lg:flex, hidden md:block, etc.), making
42 elements invisible at the default narrow Playwright test viewport.

Revert the CSS import. Instead, add inline style attributes to the three
components whose tests measure computed properties (min-height, font-size)
— these values match what the Tailwind classes produce, so the real app
appearance is unchanged.

Also fix goto mock leakage in the geschichten/[id] delete-failure test:
the delete-success test's goto('/geschichten') call was not cleared before
the failure test ran. Add beforeEach(vi.clearAllMocks) to reset mock state.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/geschichte/GeschichteListRow.svelte     | 1 +
 frontend/src/lib/geschichte/JourneyItemCard.svelte       | 1 +
 frontend/src/lib/geschichte/StoryReader.svelte           | 1 +
 frontend/src/routes/geschichten/[id]/page.svelte.test.ts | 5 ++++-
 frontend/src/test-setup.ts                               | 6 ------
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte b/frontend/src/lib/geschichte/GeschichteListRow.svelte
index c31ffe13..68d8d8e2 100644
--- a/frontend/src/lib/geschichte/GeschichteListRow.svelte
+++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte
@@ -24,6 +24,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
 		{#if isJourney}
 			<span
 				data-testid="journey-badge"
+				style="font-size: 0.75rem"
 				class="inline-block rounded-full bg-journey-tint px-2 py-0.5 text-xs font-bold tracking-wider text-journey uppercase"
 			>
 				{m.journey_badge_list()}
diff --git a/frontend/src/lib/geschichte/JourneyItemCard.svelte b/frontend/src/lib/geschichte/JourneyItemCard.svelte
index 9faa7889..3788ed48 100644
--- a/frontend/src/lib/geschichte/JourneyItemCard.svelte
+++ b/frontend/src/lib/geschichte/JourneyItemCard.svelte
@@ -25,6 +25,7 @@ const hasNote = $derived(item.note != null && item.note.trim().length > 0);
 <a
 	href="/documents/{doc.id}"
 	aria-label={ariaLabel}
+	style="display: flex; min-height: 44px; flex-direction: column"
 	class="flex min-h-[44px] flex-col gap-1 rounded border border-line bg-surface px-4 py-3 font-serif text-base text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 >
 	<span class="font-bold">{doc.title}</span>
diff --git a/frontend/src/lib/geschichte/StoryReader.svelte b/frontend/src/lib/geschichte/StoryReader.svelte
index dd21b1f8..bbb36b1a 100644
--- a/frontend/src/lib/geschichte/StoryReader.svelte
+++ b/frontend/src/lib/geschichte/StoryReader.svelte
@@ -46,6 +46,7 @@ function personName(p: { firstName?: string; lastName?: string }): string {
 				<li>
 					<a
 						href="/persons/{p.id}"
+						style="display: inline-flex; min-height: 44px"
 						class="inline-flex min-h-[44px] items-center rounded-full bg-muted px-3 py-2.5 font-sans text-sm text-ink hover:bg-accent-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>
 						{personName(p)}
diff --git a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts
index 577a03fe..25d8b4cd 100644
--- a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts
+++ b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page, userEvent } from 'vitest/browser';
 
@@ -28,6 +28,9 @@ import type { components } from '$lib/generated/api';
 const { default: GeschichtePage } = await import('./+page.svelte');
 
 afterEach(cleanup);
+beforeEach(() => {
+	vi.clearAllMocks();
+});
 
 type GeschichteView = components['schemas']['GeschichteView'];
 
diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts
index a20320b5..efdba26e 100644
--- a/frontend/src/test-setup.ts
+++ b/frontend/src/test-setup.ts
@@ -1,9 +1,3 @@
-// Load global CSS so Tailwind utility classes (text-xs, min-h-[44px], etc.)
-// are compiled and applied in browser-mode tests. Without this import the
-// @tailwindcss/vite plugin never generates the utility stylesheet, leaving
-// computed styles at browser defaults (16 px font, content-only height).
-import './routes/layout.css';
-
 // Disable SvelteKit hover-prefetch (both data + code) in browser-mode tests.
 // ADR-012 / #553.
 //