Merge branch 'development' into f090_magic_strings_refactoring

2025-09-24 12:45:17 +02:00
parent 33b40ee29f dc44a2f4ce
commit 5e7eeabda5
15 changed files with 510 additions and 146 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
 				"@sveltejs/adapter-auto": "^4.0.0",
 				"@sveltejs/kit": "^2.21.3",
 				"@sveltejs/vite-plugin-svelte": "^5.1.0",
-				"@testing-library/jest-dom": "^6.6.3",
+				"@testing-library/jest-dom": "^6.8.0",
 				"@testing-library/svelte": "^5.2.8",
 				"@tsconfig/svelte": "^5.0.4",
 				"@types/better-sqlite3": "^7.6.13",
@@ -45,7 +45,7 @@
 				"typescript": "^5.8.3",
 				"typescript-eslint": "^8.34.0",
 				"vite": "^6.3.5",
-				"vitest": "^3.2.3"
+				"vitest": "^3.2.4"
 			}
 		},
 		"node_modules/@adobe/css-tools": {
@@ -1665,18 +1665,17 @@
 			"license": "MIT"
 		},
 		"node_modules/@testing-library/jest-dom": {
-			"version": "6.6.3",
-			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
-			"integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
+			"version": "6.8.0",
+			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.8.0.tgz",
+			"integrity": "sha512-WgXcWzVM6idy5JaftTVC8Vs83NKRmGJz4Hqs4oyOuO2J4r/y79vvKZsb+CaGyCSEbUPI6OsewfPd0G1A0/TUZQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@adobe/css-tools": "^4.4.0",
 				"aria-query": "^5.0.0",
-				"chalk": "^3.0.0",
 				"css.escape": "^1.5.1",
 				"dom-accessibility-api": "^0.6.3",
-				"lodash": "^4.17.21",
+				"picocolors": "^1.1.1",
 				"redent": "^3.0.0"
 			},
 			"engines": {
@@ -2830,20 +2829,6 @@
 				"node": ">=18"
 			}
 		},
-		"node_modules/chalk": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-			"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ansi-styles": "^4.1.0",
-				"supports-color": "^7.1.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/check-error": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.21.3",
 		"@sveltejs/vite-plugin-svelte": "^5.1.0",
-		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/jest-dom": "^6.8.0",
 		"@testing-library/svelte": "^5.2.8",
 		"@tsconfig/svelte": "^5.0.4",
 		"@types/better-sqlite3": "^7.6.13",
@@ -40,7 +40,7 @@
 		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.34.0",
 		"vite": "^6.3.5",
-		"vitest": "^3.2.3"
+		"vitest": "^3.2.4"
 	},
 	"dependencies": {
 		"@google/model-viewer": "^4.1.0",
--- a/src/lib/components/EmptyList.svelte
+++ b/src/lib/components/EmptyList.svelte
@@ -1 +1,3 @@
-<p class="flex justify-center m-4">In dieser Liste sind keine Einträge vorhanden</p>
+<p data-testid="empty-list" class="flex justify-center m-4">
+	In dieser Liste sind keine Einträge vorhanden
+</p>
--- a/src/lib/components/NameItemEditor.svelte
+++ b/src/lib/components/NameItemEditor.svelte
@@ -1,90 +1,83 @@
 <script lang="ts">
+	import Check from '$lib/icons/Check.svelte';
 	import Edit from '$lib/icons/Edit.svelte';
 	import Trash from '$lib/icons/Trash.svelte';
+	import X from '$lib/icons/X.svelte';
 	import { tick } from 'svelte';

 	interface ListItem {
 		name: string;
 		token?: string;
-		// add other properties as needed
-	}
-	let {
-		list,
-		editedName = $bindable(),
-		currentName,
-		onSave = () => {},
-		onDelete = () => {}
-	} = $props();
-
-	let localName = $state(currentName);
-	let wasCancelled = $state(false);
-
-	let error: string = $derived(validateName(localName));
-	let isEditing = $state(false);
-	let inputRef: HTMLInputElement;
-
-	function validateName(name: string) {
-		const trimmed = name.trim();
-
-		if (!trimmed) {
-			return 'Name darf nicht leer sein.';
 	}

-		const duplicate = list.some(
-			(item: ListItem) => item.name === trimmed && item.name !== currentName
-		);
+	// props, old syntax
+	export let list: ListItem[] = [];
+	export let currentName: string;
+	export let onSave: (n: string, o: string) => unknown = () => {};
+	export let onDelete: (n: string) => unknown = () => {};

-		if (duplicate) return 'Name existiert bereits.';
+	let localName = currentName;
+	let isEditing = false;
+	let inputRef: HTMLInputElement | null = null;

+	$: error = validateName(localName);
+
+	function validateName(name: string): string {
+		const trimmed = name?.trim() ?? '';
+		if (!trimmed) return 'Name darf nicht leer sein.';
+		if (list.some((item) => item.name === trimmed && item.name !== currentName)) {
+			return 'Name existiert bereits.';
+		}
 		return '';
 	}

-	function commitIfValid() {
-		if (!error && !wasCancelled && localName != currentName) {
-			const trimmedName: string = localName.trim();
-			inputRef?.blur();
-			isEditing = false;
-			onSave(trimmedName, currentName);
-		} else {
-			localName = currentName;
-			resetEdit();
-		}
-	}
-
-	function resetEdit() {
-		wasCancelled = false;
-		inputRef?.blur();
-		isEditing = false;
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			commitIfValid();
-		} else if (event.key === 'Escape') {
-			event.preventDefault();
-			localName = currentName;
-			resetEdit();
-		}
-	}
-
 	async function startEdit() {
 		isEditing = true;
 		await tick();
 		inputRef?.focus();
 	}
+
+	function cancelEdit() {
+		localName = currentName;
+		isEditing = false;
+	}
+
+	function commitEdit() {
+		if (!error && localName != currentName) onSave(localName, currentName);
+
+		isEditing = false;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') commitEdit();
+		if (event.key === 'Escape') cancelEdit();
+	}
+
+	function handleDeleteClick() {
+		onDelete(currentName);
+	}
 </script>

-<div>
+<div data-testid="test-nameItemEditor">
+	{#if isEditing}
 		<input
+			data-testid="test-input"
 			bind:this={inputRef}
 			bind:value={localName}
-		onblur={commitIfValid}
 			onkeydown={handleKeydown}
 		/>
-	<button onclick={startEdit}><Edit /></button>
-	<button onclick={() => onDelete(currentName)}><Trash /></button>
+		<button
+			data-testid="commit-button"
+			disabled={!!error || localName === currentName}
+			onclick={commitEdit}><Check /></button
+		>
+		<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
+	{:else}
+		<span>{localName}</span>
+		<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
+		<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button>
+	{/if}
 	{#if error}
-		<p style="color: red;">{error}</p>
+		<p class="text-red-500">{error}</p>
 	{/if}
 </div>
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,3 +1,3 @@
 import { readFileSync } from 'fs';

-export default JSON.parse(readFileSync('./config.json').toString());
+export default JSON.parse(readFileSync('./config_prod.json').toString());
--- a/src/routes/(angemeldet)/list/+page.svelte
+++ b/src/routes/(angemeldet)/list/+page.svelte
@@ -2,10 +2,9 @@
 	import Trash from '$lib/icons/Trash.svelte';
 	import Folder from '$lib/icons/Folder.svelte';
 	import EmptyList from '$lib/components/EmptyList.svelte';
-	import type { PageData } from '../$types';

-	// let { data } = $props();
-	export let data: PageData;
+	let { data } = $props();
+
 	let vorgangList = data.vorgangList;

 	let isEmptyList = vorgangList.length === 0;
@@ -48,7 +47,7 @@
 				<EmptyList></EmptyList>
 			{:else}
 				{#each vorgangList as vorgangItem}
-					<li>
+					<li data-testid="test-list-item">
 						<a
 							href="/list/{vorgangItem.vorgangToken}?pin={vorgangItem.vorgangPIN}"
 							class="flex justify-between gap-x-6 py-5"
--- a/src/routes/(token-based)/list/[vorgang]/+page.svelte
+++ b/src/routes/(token-based)/list/[vorgang]/+page.svelte
@@ -9,7 +9,7 @@
 	import ModalContent from '$lib/components/Modal/ModalContent.svelte';
 	import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
 	import Cube from '$lib/icons/Cube.svelte';
-	import { invalidate, invalidateAll } from '$app/navigation';
+	import { invalidateAll } from '$app/navigation';
 	import NameItemEditor from '$lib/components/NameItemEditor.svelte';
 	import EmptyList from '$lib/components/EmptyList.svelte';

@@ -26,8 +26,8 @@
 		// add other properties as needed
 	}

+	let crimesList = $state<ListItem[]>(data.crimesList);
 	let vorgangName: string = data.vorgang.vorgangName;
-	let crimesList: ListItem[] = $state(data.crimesList);
 	const vorgangPIN: string = data.vorgang.vorgangPIN;
 	let vorgangToken: string = data.vorgang.vorgangToken;
 	let isEmptyList = $derived(crimesList.length === 0);
@@ -37,12 +37,12 @@
 	let inProgress = $state(false);
 	let isError = $state(false);

-	//Variable um nur admin UI anzuzeigen
 	let admin = data?.user?.admin;

 	async function handleSave(newName: string, oldName: string) {
 		open = true;
 		inProgress = true;
+		isError = false;
 		try {
 			const res = await fetch(`/api/list/${vorgangToken}/${oldName}`, {
 				method: 'PUT',
@@ -50,29 +50,18 @@
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({ vorgangToken, oldName, newName })
-			})
-				.then(() => {
-					inProgress = false;
-				})
-				.catch((err) => {
-					inProgress = false;
-					isError = true;
-					console.log('ERROR', err);
 			});

 			if (!res.ok) {
-				const msg = await res.text();
-				console.error('❌ Fehler beim Umbenennen:', msg);
-				isError = true;
-				inProgress = false;
-			} else {
+				throw new Error('Fehler beim Speichern');
+			}
 			await invalidateAll();
 			crimesList = data.crimesList;
 			open = false;
-				inProgress = false;
-			}
 		} catch (err) {
-			console.error('⚠️ Netzwerkfehler:', err);
+			console.error('⚠️ Netzwerkfehler beim Speichern', err);
+			isError = true;
+		} finally {
 			inProgress = false;
 		}
 	}
@@ -80,39 +69,31 @@
 	async function handleDelete(tatort: string) {
 		open = true;
 		inProgress = true;
-		let url = new URL(data.url);
-		url.pathname += `/${tatort}`;
-		console.log('Delete tatort: ', `/api${url.pathname}`, url.pathname);
+		isError = false;
+		let path = new URL(data.url).pathname;
+		path += `/${tatort}`;

 		try {
-			const res = await fetch(`/api${url.pathname}`, {
+			const res = await fetch(`/api${path}`, {
 				method: 'DELETE',
 				headers: {
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({ vorgangToken, tatort })
-			})
-				.then(() => {
-					inProgress = false;
-				})
-				.catch((err) => {
-					isError = true;
-					inProgress = false;
-					console.log('ERROR', err);
 			});
-			if (!res.ok) {
-				const msg = await res.text();
-				console.error('❌ Fehler beim Löschen:', msg);
-			} else {
-				console.log('🗑️ Erfolgreich gelöscht:', url.pathname);
-				await invalidateAll();

-				crimesList = data.crimesList;
+			if (!res.ok) {
+				throw new Error('Fehler beim Löschen');
 			}
+			crimesList = crimesList.filter((i) => i.name !== tatort);
+			await invalidateAll();
+			console.log('🗑️ Erfolgreich gelöscht:', path);
+			open = false;
 		} catch (err) {
+			console.error('⚠️ Netzwerkfehler beim Speichern', err);
 			isError = true;
+		} finally {
 			inProgress = false;
-			console.error('⚠️ Netzwerkfehler beim Löschen:', err);
 		}
 	}

@@ -141,7 +122,7 @@ Mit freundlichen Grüßen,
 	}
 </script>

-{#if data.vorgang && data.crimesList}
+{#if data.vorgang && crimesList}
 	<div class="-z-10 bg-white">
 		<div class="flex flex-col items-center justify-center w-full">
 			<h1 class="text-xl">Vorgang {vorgangName}</h1>
@@ -158,10 +139,11 @@ Mit freundlichen Grüßen,
 				{#if isEmptyList}
 					<EmptyList></EmptyList>
 				{:else}
-					{#each data.crimesList as item, crimeListItemIndex}
-						<li>
+					{#each crimesList as item (item.name)}
+						<li data-testid="test-list-item">
 							<div class=" flex gap-x-4">
 								<a
+									data-testid="crime-link"
 									href="/view/{vorgangToken}/{item.name}?pin={vorgangPIN}"
 									class=" flex justify-between gap-x-6 py-5"
 									aria-label="/view/{vorgangToken}/{item.name}?pin={vorgangPIN}"
@@ -172,16 +154,18 @@ Mit freundlichen Grüßen,
 								<div class="min-w-0 flex-auto">
 									{#if admin}
 										<NameItemEditor
-											list={data.crimesList}
-											editedName={data.crimeNames[crimeListItemIndex]}
+											list={crimesList}
 											currentName={item.name}
 											onSave={handleSave}
 											onDelete={handleDelete}
 										></NameItemEditor>
 									{:else}
-										<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-											>{item.name}</span
+										<p
+											data-testid="test-nameItem-p"
+											class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
 										>
+											{item.name}
+										</p>
 									{/if}
 									{#if item.size}
 										<p class="mt-1 truncate text-xs leading-5 text-gray-500">
--- a/tests/APIList.test.ts
+++ b/tests/APIList.test.ts
@@ -25,7 +25,7 @@ describe('API-Endpoints: list', () => {
 		expect(response.status).toBe(401);

 		const json = await response.json();
-		const errorObj = { error: 'Unauthorized' }
+		const errorObj = { error: 'Unauthorized' };
 		expect(json).toEqual(errorObj);
 	});

--- a/tests/ComponentEmptyList.view.test.ts
+++ b/tests/ComponentEmptyList.view.test.ts
@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/svelte';
+import EmptyList from '$lib/components/EmptyList.svelte'
+import { describe, expect, it } from 'vitest';
+
+describe('Komponente: EmptyList', () => {
+  it('zeigt Hinweistext "Keine Einträge"', () => {
+    render(EmptyList);
+    expect(screen.getByText(/keine Einträge/i)).toBeInTheDocument();  });
+});
--- a/tests/ComponentNameItemEditor.test.ts
+++ b/tests/ComponentNameItemEditor.test.ts
@@ -0,0 +1,142 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, test, vi } from 'vitest';
+import NameItemEditor from '$lib/components/NameItemEditor.svelte';
+import { baseData } from './fixtures';
+
+const testCrimesListIndex = 0;
+const testItem = baseData.crimesList[testCrimesListIndex];
+const testCurrentName = testItem.name;
+const testLocalName = 'Fall-C';
+
+describe('NameItemEditor - Funktionalität', () => {
+	const onSave = vi.fn();
+	const onDelete = vi.fn();
+	const baseProps = {
+		list: baseData.crimesList,
+		currentName: testCurrentName,
+		onSave,
+		onDelete
+	};
+
+	test.todo('FocusIn nach Klick auf edit');
+
+	it('zeigt initial Edit/Delete Buttons und aktuellen Namen', () => {
+		render(NameItemEditor, { props: baseProps });
+
+		expect(screen.getByTestId('edit-button')).toBeInTheDocument();
+		expect(screen.getByTestId('delete-button')).toBeInTheDocument();
+		expect(screen.queryByTestId('commit-button')).toBeNull();
+		expect(screen.queryByTestId('cancel-button')).toBeNull();
+		expect(screen.getByText(testCurrentName)).toBeInTheDocument();
+	});
+
+	it('wechselt zu Commit/Cancel nach Klick auf Edit', async () => {
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('edit-button'));
+		const input = screen.getByTestId('test-input');
+
+		expect(screen.getByTestId('commit-button')).toBeInTheDocument();
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+		expect(screen.queryByTestId('edit-button')).toBeNull();
+		expect(screen.queryByTestId('delete-button')).toBeNull();
+		expect(screen.getAllByRole('textbox')).toHaveLength(1);
+		expect(input).toHaveValue(testCurrentName);
+	});
+
+	it('zeigt Fehlermeldung bei leerem Namen', async () => {
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('edit-button'));
+
+		const input = screen.getByTestId('test-input');
+		await fireEvent.input(input, { target: { value: '' } });
+
+		expect(screen.getByText('Name darf nicht leer sein.')).toBeInTheDocument();
+		expect(onSave).not.toHaveBeenCalled();
+	});
+
+	it('entfernt Fehlermeldung live beim nächsten gültigen Tastendruck', async () => {
+		render(NameItemEditor, {
+			props: {
+				list: baseData.crimesList,
+				currentName: baseData.crimesList[0].name,
+				onSave: vi.fn(),
+				onDelete: vi.fn()
+			}
+		});
+
+		await fireEvent.click(screen.getByTestId('edit-button'));
+		const input = screen.getByTestId('test-input');
+
+		await fireEvent.input(input, { target: { value: '' } });
+		expect(screen.getByText('Name darf nicht leer sein.')).toBeInTheDocument();
+
+		await fireEvent.input(input, { target: { value: 'Fall-C' } });
+
+		expect(screen.queryByText('Name darf nicht leer sein.')).toBeNull();
+	});
+
+	it('zeigt Fehlermeldung bei Duplikat', async () => {
+		const duplicateName = baseData.crimesList[1].name;
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('edit-button'));
+
+		const input = screen.getByTestId('test-input');
+		await fireEvent.input(input, { target: { value: duplicateName } });
+
+		expect(screen.getByText('Name existiert bereits.')).toBeInTheDocument();
+		expect(onSave).not.toHaveBeenCalled();
+	});
+
+	it('ruft onSave korrekt auf bei gültigem Namen', async () => {
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('edit-button'));
+
+		const input = screen.getByTestId('test-input');
+		await fireEvent.input(input, { target: { value: testLocalName } });
+		await fireEvent.click(screen.getByTestId('commit-button'));
+
+		expect(onSave).toHaveBeenCalledWith(testLocalName, testCurrentName);
+	});
+
+	it('ruft onDelete korrekt auf', async () => {
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('delete-button'));
+
+		expect(onDelete).toHaveBeenCalledWith(testCurrentName);
+	});
+
+	it('setzt Zustand zurück bei Cancel', async () => {
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('edit-button'));
+
+		const input = screen.getByTestId('test-input');
+		await fireEvent.input(input, { target: { value: 'Zwischentext' } });
+		await fireEvent.click(screen.getByTestId('cancel-button'));
+
+		expect(screen.getByText(testCurrentName)).toBeInTheDocument();
+		expect(screen.getByTestId('edit-button')).toBeInTheDocument();
+	});
+
+	it('triggert Save bei Enter-Taste', async () => {
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('edit-button'));
+
+		const input = screen.getByTestId('test-input');
+		await fireEvent.input(input, { target: { value: 'ViaEnter' } });
+		await fireEvent.keyDown(input, { key: 'Enter' });
+
+		expect(onSave).toHaveBeenCalledWith('ViaEnter', testCurrentName);
+	});
+
+	it('bricht ab bei Escape-Taste', async () => {
+		render(NameItemEditor, { props: baseProps });
+		await fireEvent.click(screen.getByTestId('edit-button'));
+
+		const input = screen.getByTestId('test-input');
+		await fireEvent.input(input, { target: { value: 'Zwischentext' } });
+		await fireEvent.keyDown(input, { key: 'Escape' });
+
+		expect(screen.getByText(testCurrentName)).toBeInTheDocument();
+		expect(onSave).not.toHaveBeenCalled();
+	});
+});
--- a/tests/TatortList.test.ts
+++ b/tests/TatortList.test.ts
@@ -0,0 +1,84 @@
+import { render, fireEvent, screen, within } from '@testing-library/svelte';
+import { describe, it, expect, vi, test } from 'vitest';
+import * as nav from '$app/navigation';
+import TatortListPage from '../src/routes/(token-based)/list/[vorgang]/+page.svelte';
+import { baseData } from './fixtures';
+import { tick } from 'svelte';
+
+vi.spyOn(nav, 'invalidateAll').mockResolvedValue();
+global.fetch = vi.fn().mockResolvedValue({ ok: true });
+
+
+describe('Seite: Vorgangsansicht', () => {
+  test.todo('Share Link disabled wenn Liste leer');
+  describe('Szenario: Admin + Liste gefüllt - Funktionalität', () => {
+    test.todo('Share Link Link generierung richtig');
+
+    it('führt PUT-Request aus und aktualisiert UI nach onSave', async () => {
+      const data = structuredClone(baseData);
+      const oldName = data.crimesList[0].name;
+      const newName = 'Fall-C';
+
+      render(TatortListPage, { props: { data } });
+      const listItem = screen.getAllByTestId('test-list-item')[0];
+      expect(listItem).toHaveTextContent(oldName);
+
+      await fireEvent.click(within(listItem).getByTestId('edit-button'));
+      const input = within(listItem).getByTestId('test-input');
+      await fireEvent.input(input, { target: { value: newName } });
+
+      await fireEvent.click(within(listItem).getByTestId('commit-button'));
+      await tick();
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `/api/list/${data.vorgang.vorgangToken}/${oldName}`,
+        expect.objectContaining({
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            vorgangToken: data.vorgang.vorgangToken,
+            oldName,
+            newName
+          })
+        })
+      );
+
+      expect(nav.invalidateAll).toHaveBeenCalled();
+      expect(within(listItem).getByText(newName)).toBeInTheDocument();
+    });
+
+    it('führt DELETE-Request aus und entfernt Element aus UI', async () => {
+      const testData = structuredClone(baseData);
+      const oldName = testData.crimesList[0].name;
+
+      render(TatortListPage, { props: { data: testData } });
+      const initialItems = screen.getAllByTestId('test-list-item');
+      expect(initialItems).toHaveLength(testData.crimesList.length);
+
+      const listItem = screen.getAllByTestId('test-list-item')[0];
+      expect(listItem).toHaveTextContent(oldName);
+      const del = within(listItem).getByTestId('delete-button');
+      expect(del).toBeInTheDocument()
+      await fireEvent.click(within(listItem).getByTestId('delete-button'));
+      await tick();
+
+      let expectedPath = new URL(testData.url).pathname;
+       expectedPath += `/${oldName}`
+      expect(global.fetch).toHaveBeenCalledWith(
+        `/api${expectedPath}`,
+        expect.objectContaining({
+         method: 'DELETE',
+         headers: { 'Content-Type': 'application/json' },
+         body: JSON.stringify({
+           vorgangToken: testData.vorgang.vorgangToken,
+           tatort: oldName
+         })
+        })
+      );
+      expect(nav.invalidateAll).toHaveBeenCalled();
+      const updatedItems = screen.queryAllByTestId('test-list-item');
+      expect(updatedItems).toHaveLength(testData.crimesList.length - 1);
+      expect(screen.queryByText(oldName)).toBeNull();
+    });
+  });
+});
--- a/tests/TatortList.view.test.ts
+++ b/tests/TatortList.view.test.ts
@@ -0,0 +1,87 @@
+import { render, screen, within } from '@testing-library/svelte';
+import { describe, expect, it, test } from 'vitest';
+import TatortListPage from '../src/routes/(token-based)/list/[vorgang]/+page.svelte';
+import { baseData } from './fixtures';
+
+describe('Seite: Vorgangsansicht', () => {
+	test.todo('zeigt PIN und Share-Link, wenn Admin');
+	test.todo('zeigt PIN und Share-Link disabeld, wenn Liste leer');
+
+	describe('Szenario: Liste leer (unabhängig von Rolle)', () => {
+		it('zeigt Hinweistext bei leerer Liste', () => {
+			const testData = { ...baseData, crimesList: [] };
+			const { getByTestId } = render(TatortListPage, { props: { data: testData } });
+
+			expect(getByTestId('empty-list')).toBeInTheDocument();
+		});
+
+		it('zeigt keinen Listeneintrag', () => {
+			const items = screen.queryAllByTestId('test-list-item');
+
+			expect(items).toHaveLength(0);
+		});
+	});
+
+	describe('Szenario: Liste gefüllt (unabhängig von Rolle)', () => {
+		it('rendert mindestens ein Listenelement bei vorhandenen crimesList-Daten', () => {
+			const testData = { ...baseData };
+			const { queryAllByTestId } = render(TatortListPage, { props: { data: testData } });
+			const items = queryAllByTestId('test-list-item');
+
+			expect(items.length).toBeGreaterThan(0);
+		});
+
+		it('zeigt für jeden Eintrag einen Link', () => {
+			const testData = { ...baseData };
+			render(TatortListPage, { props: { data: testData } });
+			const links = screen.queryAllByTestId('crime-link');
+
+			expect(links).toHaveLength(testData.crimesList.length);
+		});
+
+		it('prüft href und title jedes Links', () => {
+			const testData = { ...baseData };
+			const { queryAllByTestId } = render(TatortListPage, { props: { data: testData } });
+			const items = queryAllByTestId('test-list-item');
+
+			items.forEach((item, i) => {
+				const link = within(item).getByRole('link');
+				const expectedHref = `/view/${testData.vorgang.vorgangToken}/${testData.crimesList[i].name}?pin=${testData.vorgang.vorgangPIN}`;
+
+				expect(link).toBeInTheDocument();
+				expect(link).toHaveAttribute('href', expectedHref);
+				expect(link).toHaveAttribute('title', testData.crimesList[i].name);
+			});
+		});
+
+		test.todo('testet zuletzt angezeigt, wenn item.lastModified');
+		test.todo('zeigt Dateigröße, wenn item.size vorhanden ist');
+	});
+
+	describe('Szenario: Admin + Liste gefüllt', () => {
+		const testData = { ...baseData, user: { ...baseData.user, admin: true } };
+		it('zeigt Listeneinträge mit Komponente NameItemEditor', () => {
+			const { getAllByTestId } = render(TatortListPage, { props: { data: testData } });
+			const items = getAllByTestId('test-nameItemEditor');
+
+			expect(items.length).toBeGreaterThan(0);
+		});
+
+		test.todo('Modal testen, wenn open');
+	});
+
+	describe('Szenario: Viewer + Liste gefüllt', () => {
+		const testData = { ...baseData, user: { ...baseData.user, admin: false } };
+		it('zeigt Listeneinträge mit p', () => {
+			render(TatortListPage, { props: { data: testData } });
+			const paragraphs = screen.queryAllByTestId('test-nameItem-p');
+
+			expect(paragraphs).toHaveLength(testData.crimesList.length);
+			paragraphs.forEach((p, i) => {
+				expect(p).toHaveTextContent(testData.crimesList[i].name);
+			});
+		});
+
+		test.todo('zeigt keinen Share-Link oder PIN');
+	});
+});
--- a/tests/VorgangList.view.test.ts
+++ b/tests/VorgangList.view.test.ts
@@ -0,0 +1,21 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import VorgangListPage from '../src/routes/(angemeldet)/list/+page.svelte';
+import { baseData } from './fixtures';
+
+describe('Vorgänge Liste Page EmptyList-Komponente View', () => {
+	it('zeigt EmptyList-Komponente an, wenn Liste leer ist', () => {
+		const testData = { ...baseData, vorgangList: [] };
+		const { getByTestId } = render(VorgangListPage, { props: { data: testData } });
+
+		expect(getByTestId('empty-list')).toBeInTheDocument();
+	});
+
+	it('zeigt Liste(mockData 2 Elemente) an, wenn Liste vorhanden ist', () => {
+		const testData = { ...baseData };
+		const { getAllByTestId } = render(VorgangListPage, { props: { data: testData } });
+		const items = getAllByTestId('test-list-item');
+
+		expect(items.length).toBeGreaterThan(0);
+	});
+});
--- a/tests/fixtures.ts
+++ b/tests/fixtures.ts
@@ -0,0 +1,46 @@
+const testUser = {
+	admin: true,
+	exp: 1757067123,
+	iat: 1757063523,
+	id: 'admin'
+};
+const testCrimesList = [
+	{
+		name: 'Fall-A',
+		lastModified: '2025-08-28T09:44:12.453Z',
+		etag: '558f35716f6af953f9bb5d75f6d77e6a',
+		size: 8947140,
+		prefix: '7596e4d5-c51f-482d-a4aa-ff76434305fc',
+		show_button: true
+	},
+	{
+		name: 'Fall-B',
+		lastModified: '2025-08-28T10:37:20.142Z',
+		etag: '43e3989c32c4682bee407baaf83b6fa0',
+		size: 35788560,
+		prefix: '7596e4d5-c51f-482d-a4aa-ff76434305fc',
+		show_button: true
+	}
+];
+
+const testVorgangsList = [
+	{
+		vorgangName: 'vorgang-1',
+		vorgangPIN: 'pin-123',
+		vorgangToken: 'c322f26f-8c5e-4cb9-94b3-b5433bf5109e'
+	},
+	{
+		vorgangName: 'vorgang-2',
+		vorgangPIN: 'pin-2',
+		vorgangToken: 'cb0051bc-5f38-47b8-943c-9352d4d9c984'
+	}
+];
+
+export const baseData = {
+	user: testUser,
+	vorgang: testVorgangsList[0],
+	vorgangList: testVorgangsList,
+	crimesList: testCrimesList,
+	url: `https://example.com/${testVorgangsList[0].vorgangToken}`,
+	crimeNames: ['modell-A', 'Fall-A']
+};
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,15 +11,27 @@ export default defineConfig({
 		}
 	},
 	test: {
-		workspace: [
+		projects: [
 			{
 				extends: './vite.config.ts',
 				plugins: [svelteTesting()],
 				test: {
-					name: 'client',
+					name: 'business-logic and API',
 					environment: 'jsdom',
 					clearMocks: true,
 					include: ['tests/**/*.{test,spec}.{js,ts}', 'src/**/*.svelte.{test,spec}.{js,ts}'],
+					exclude: ['src/lib/server/**', 'tests/**/*.view.{test,spec}.{js,ts}'],
+					setupFiles: ['./vitest-setup-client.ts']
+				}
+			},
+						{
+				extends: './vite.config.ts',
+				plugins: [svelteTesting()],
+				test: {
+					name: 'client-view',
+					environment: 'jsdom',
+					clearMocks: true,
+					include: ['tests/**/*.view.{test,spec}.{js,ts}', 'src/**/*.view.svelte.{test,spec}.{js,ts}'],
 					exclude: ['src/lib/server/**'],
 					setupFiles: ['./vitest-setup-client.ts']
 				}