refactor magic links in Header file, incl. routes

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

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}`
 };

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);
+	});
+});