From 8ccc9aba1a99c5481aedc3bab8d51ca41f5ae443 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 12 May 2026 16:37:54 +0200
Subject: [PATCH] fix(notification): replace view-all anchor with button to
 prevent iframe navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SvelteKit's capture-phase link interceptor fires before the component's
onclick handler, so e.preventDefault() was structurally too late to stop
iframe navigation in vitest-browser. Replacing the <a href> with a
<button type="button"> removes the href entirely — the interceptor never
fires — and the existing goto() mock in tests is sufficient.

Also splits the single view-all test into two focused it() blocks and
clears mocks in afterEach to prevent cross-test mock leakage.

Fixes #551

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../notification/NotificationDropdown.svelte  |  9 +++----
 .../NotificationDropdown.svelte.test.ts       | 25 +++++++++++++++----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/notification/NotificationDropdown.svelte b/frontend/src/lib/notification/NotificationDropdown.svelte
index 32d6b0cf..9f2c6c58 100644
--- a/frontend/src/lib/notification/NotificationDropdown.svelte
+++ b/frontend/src/lib/notification/NotificationDropdown.svelte
@@ -13,8 +13,7 @@ type Props = {
 
 let { notifications, onMarkRead, onMarkAllRead, onClose }: Props = $props();
 
-function handleViewAll(e: MouseEvent) {
-	e.preventDefault();
+function handleViewAll() {
 	onClose();
 	goto('/aktivitaeten');
 }
@@ -134,12 +133,12 @@ function handleViewAll(e: MouseEvent) {
 	{/if}
 
 	<div class="border-t border-line px-4 py-2">
-		<a
-			href="/aktivitaeten"
+		<button
+			type="button"
 			onclick={handleViewAll}
 			class="text-xs font-medium text-ink-2 transition-colors hover:text-ink"
 		>
 			{m.chronik_view_all()}
-		</a>
+		</button>
 	</div>
 </div>
diff --git a/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts b/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts
index e72573be..3c410403 100644
--- a/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts
+++ b/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts
@@ -6,7 +6,10 @@ import NotificationDropdown from './NotificationDropdown.svelte';
 
 vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
 
-afterEach(cleanup);
+afterEach(() => {
+	cleanup();
+	vi.clearAllMocks();
+});
 
 const makeNotification = (overrides: Record<string, unknown> = {}) => ({
 	id: 'n1',
@@ -156,7 +159,7 @@ describe('NotificationDropdown', () => {
 		expect(onMarkAllRead).toHaveBeenCalledOnce();
 	});
 
-	it('calls onClose when the view-all link is clicked', async () => {
+	it('calls onClose when the view-all button is clicked', async () => {
 		const onClose = vi.fn();
 		render(NotificationDropdown, {
 			props: {
@@ -167,11 +170,23 @@ describe('NotificationDropdown', () => {
 			}
 		});
 
-		const viewAllLink = page.getByRole('link', { name: /alle aktivitäten|view all/i });
-		await expect.element(viewAllLink).toHaveAttribute('href', '/aktivitaeten');
-		await viewAllLink.click();
+		await page.getByRole('button', { name: /alle aktivitäten|view all/i }).click();
 
 		expect(onClose).toHaveBeenCalledOnce();
+	});
+
+	it('navigates to /aktivitaeten when the view-all button is clicked', async () => {
+		render(NotificationDropdown, {
+			props: {
+				notifications: [],
+				onMarkRead: () => {},
+				onMarkAllRead: () => {},
+				onClose: () => {}
+			}
+		});
+
+		await page.getByRole('button', { name: /alle aktivitäten|view all/i }).click();
+
 		expect(goto).toHaveBeenCalledWith('/aktivitaeten');
 	});