From e1ce9373c02894b24ad77196b13b740150fd196a Mon Sep 17 00:00:00 2001
From: Chi Cong Tran <chi-cong.tran@polizei.niedersachsen.de>
Date: Thu, 25 Sep 2025 13:27:50 +0200
Subject: [PATCH] refactor magic links in Header file, incl. routes

---
 src/lib/components/Header.svelte |  6 ++++--
 src/routes/index.ts              |  9 +++++++--
 tests/components/Header.test.ts  | 26 ++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 tests/components/Header.test.ts

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 4e13909..eb3d1d9 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Chevron from '$lib/icons/Chevron-right.svelte';
 
+	import { ROUTE_NAMES } from '../../routes';
+
 	export let data;
 </script>
 
@@ -11,7 +13,7 @@
 			aria-label="Global"
 		>
 			<div class="flex w-48">
-				<a href="/" class="-m-1.5 p-1.5 w-10">
+				<a href="{ROUTE_NAMES.ROOT}" class="-m-1.5 p-1.5 w-10">
 					<span class="sr-only">Tatort Niedersachen</span>
 					<img class="h-8 w-auto" src="/Landeswappen_NI.svg" alt="Landeswappen Niedersachsen" />
 				</a>
@@ -19,7 +21,7 @@
 			<h1 class="text-3xl text-slate-400 font-bold">Tatort</h1>
 			<div class="lg:flex lg:justify-end w-48">
 				{#if data.user}
-					<form method="POST" action="/anmeldung?/logout">
+					<form method="POST" action="{ROUTE_NAMES.ANMELDUNG_LOGOUT}">
 						<input type="hidden" />
 						<button type="submit" class="text-sm font-semibold leading-6 text-gray-900"
 							><span
diff --git a/src/routes/index.ts b/src/routes/index.ts
index e19cc8a..1c00dc6 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,16 +1,21 @@
 export const ROUTE_NAMES = {
 	ROOT: '/',
+
 	// (angemeldet)
 	LIST: '/list',
 	UPLOAD: '/upload',
 	USERMGMT: '/user-management',
+
 	// (token-based)
 	VORGANG: (vorgangToken) => `/list/${vorgangToken}`,
-	CRIME: (vorgangToken, tatort) => `/view/${vorgangToken}/${tatort}`
+	CRIME: (vorgangToken, tatort) => `/view/${vorgangToken}/${tatort}`,
 
+	// Anmeldung: actions
+	ANMELDUNG_LOGIN: '/anmeldung?/login',
+	ANMELDUNG_LOGOUT: '/anmeldung?/logout'
 };
 
 export const API_ROUTES = {
 	LIST: '/api/list',
-	VORGANG: (vorgangToken: string) => `/api/list/${vorgangToken}`,
+	VORGANG: (vorgangToken: string) => `/api/list/${vorgangToken}`
 };
diff --git a/tests/components/Header.test.ts b/tests/components/Header.test.ts
new file mode 100644
index 0000000..8c14279
--- /dev/null
+++ b/tests/components/Header.test.ts
@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, test, expect } from 'vitest';
+
+import { ROUTE_NAMES } from '../../src/routes';
+
+import Header from '$lib/components/Header.svelte';
+
+describe('Header component', () => {
+	const mockData = {
+		user: {
+			id: 'admin'
+		}
+	};
+	test('Enthält Landeswappen von NDS und entsprechenden Link', () => {
+		render(Header, { props: { data: mockData } });
+		const linkElement = screen.getByText('Tatort Niedersachen', { exact: false }).closest('a');
+		expect(linkElement).toBeInTheDocument();
+		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.ROOT);
+	});
+	test('Form enthält korrekten Link', () => {
+		const { container } = render(Header, { props: { data: mockData } });
+		const formElement = container.querySelector('form');
+		expect(formElement).toBeInTheDocument();
+		expect(formElement).toHaveAttribute('action', ROUTE_NAMES.ANMELDUNG_LOGOUT);
+	});
+});