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",

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",

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>

src/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -159,7 +159,7 @@ Mit freundlichen Grüßen,
 					<EmptyList></EmptyList>
 				{:else}
 					{#each data.crimesList as item, crimeListItemIndex}
-						<li>
+						<li data-testid="test-list-item">
 							<div class=" flex gap-x-4">
 								<a
 									href="/view/{vorgangToken}/{item.name}?pin={vorgangPIN}"

tests/APIList.test.ts

@@ -61,4 +61,4 @@ describe('API-Endpoints: list', () => {
 		const json = await response.json();
 		expect(json).toEqual(testVorgaenge);
 	});
-});
+});

tests/TatortList.view.test.ts

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from "vitest";
+import TatortListPage from "../src/routes/(token-based)/list/[vorgang]/+page.svelte";
+
+
+const testCrimesList = [
+			{
+				name: 'model-A',
+				lastModified: '2025-08-28T09:44:12.453Z',
+				etag: '558f35716f6af953f9bb5d75f6d77e6a',
+				size: 8947140,
+				prefix: '7596e4d5-c51f-482d-a4aa-ff76434305fc',
+				show_button: true
+			},
+			{
+				name: 'model-z',
+				lastModified: '2025-08-28T10:37:20.142Z',
+				etag: '43e3989c32c4682bee407baaf83b6fa0',
+				size: 35788560,
+				prefix: '7596e4d5-c51f-482d-a4aa-ff76434305fc',
+				show_button: true
+			}
+		];
+const baseData = {
+  user: {admin: true, id: 'admin'},
+    vorgang: {
+
+    },
+    vorgangList: [],
+    crimesList: testCrimesList,
+    url: URL,
+    crimeNames: [],
+
+}
+
+describe('Tatort Liste Page', ()=>{
+    //Hier steht die funktion die getestet wird
+    it('zeigt EmptyList-Komponente, wenn Liste leer ist', () => {
+		 const testData = { ...baseData, crimesList: [] };
+    const { getByTestId } = render(TatortListPage, {props:{data: testData}});
+
+
+    expect(getByTestId('empty-list')).toBeInTheDocument();
+  });
+
+    it('zeigt EmptyList-Komponente, wenn Liste vorhanden ist', () => {
+		 const testData = { ...baseData };
+    const { getAllByTestId } = render(TatortListPage, {props:{data: testData}});
+const items = getAllByTestId('test-list-item');
+
+    expect(items).toHaveLength(2); // z. B. bei 2 Einträgen, da fake 2 Einträge hat
+  });
+})

vite.config.ts

@@ -5,15 +5,27 @@ import { defineConfig } from 'vite';
 export default defineConfig({
 	plugins: [sveltekit()],
 	test: {
-		workspace: [
+		projects: [
 			{
 				extends: './vite.config.ts',
 				plugins: [svelteTesting()],
 				test: {
-					name: 'client',
+					name: 'client-logic',
 					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']
 				}