From 33b40ee29ff60ab963325c4e8db626a18620858e Mon Sep 17 00:00:00 2001
From: Chi Cong Tran <chi-cong.tran@polizei.niedersachsen.de>
Date: Tue, 23 Sep 2025 09:04:22 +0200
Subject: [PATCH] refactor magic links in Footer component and associated tests

---
 src/lib/components/Footer.svelte |  8 +++--
 tests/components/Footer.test.ts  | 53 ++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 tests/components/Footer.test.ts

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 9212dbe..9befe4a 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,6 +1,8 @@
 <script>
 	import Profile from "$lib/icons/Profile.svelte";
 
+	import { ROUTE_NAMES } from "../../routes";
+
     export let data;
 </script>
 
@@ -10,19 +12,19 @@
 					<div class="mx-auto max-w-7xl px-6 lg:px-8">
 						<div class="flex justify-between divide-x divide-gray-900/5 border-x border-gray-900/5">
 							<a
-								href="/list"
+								href="{ROUTE_NAMES.LIST}"
 								class="px-4 py-1 -ml-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
 							>
 								&copy; 2023 Innovation Hub Niedersachen
 							</a>
 							<a
-								href="/"
+								href="{ROUTE_NAMES.ROOT}"
 								class="px-4 py-1 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
 							>
 								back
 							</a>
 							<a
-								href="/"
+								href="{ROUTE_NAMES.ROOT}"
 								class="px-4 py-1 -mr-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
 							>
 								<!--icon-->
diff --git a/tests/components/Footer.test.ts b/tests/components/Footer.test.ts
new file mode 100644
index 0000000..ff59135
--- /dev/null
+++ b/tests/components/Footer.test.ts
@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, test, expect } from 'vitest';
+
+import { ROUTE_NAMES } from '../../src/routes';
+
+import Footer from '$lib/components/Footer.svelte';
+
+describe('Footer component', () => {
+	test('Enthält Behörden-Name und entsprechenden Link', () => {
+		render(Footer);
+		const linkElement = screen.getByText('Innovation Hub', { exact: false });
+		expect(linkElement).toBeInTheDocument();
+		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.LIST);
+	});
+	test('Enthält Zurück-Button und entsprechenden Link', () => {
+		render(Footer);
+		const linkElement = screen.getByText('back');
+		expect(linkElement).toBeInTheDocument();
+		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.ROOT);
+	});
+	test('Enthält Profil-Icon und entsprechenden Link: angemeldet', () => {
+		const mockData = {
+			user: {
+				id: 'admin'
+			}
+		};
+		const { container } = render(Footer, { props: { data: mockData } });
+		const linkElement = screen.getByText('admin', { exact: false });
+		expect(linkElement).toBeInTheDocument();
+		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.ROOT);
+
+		// Check for presence of `Profile` component
+		// Look for the <svg> element with class="w-6 h-6"
+		const svg = container.querySelector('svg.w-6.h-6');
+		expect(svg).toBeTruthy();
+	});
+	test('Enthält Profil-Icon und entsprechenden Link: nicht angemeldet', () => {
+		const { container } = render(Footer, { props: { data: null } });
+
+		const links = container.querySelectorAll('a');
+		const linkElement = links[2]; // Index starts at 0
+		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.ROOT);
+
+		// User/View does not have any ID
+		const ID_displayElement = screen.queryByText('admin');
+		expect(ID_displayElement).not.toBeInTheDocument();
+
+		// Check for presence of `Profile` component
+		// Look for the <svg> element with class="w-6 h-6"
+		const svg = container.querySelector('svg.w-6.h-6');
+		expect(svg).toBeTruthy();
+	});
+});