Merge pull request 'f102_test_KeineListeVorhanden' (#33) from f102_test_KeineListeVorhanden into development

Reviewed-on: #33

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",
+			"version": "6.8.0",
-			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
+			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.8.0.tgz",
-			"integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
+			"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/(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();
+	let { data } = $props();
-	export let data: PageData;
+
 	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"

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';
 
@@ -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

@@ -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);
 	});
 
@@ -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,67 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import TatortListPage from '../src/routes/(token-based)/list/[vorgang]/+page.svelte';
+
+const testUser = {
+	admin: true,
+	exp: 1757067123,
+	iat: 1757063523,
+	id: 'admin'
+};
+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 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'
+	}
+];
+
+const baseData = {
+	user: testUser,
+	vorgang: testVorgangsList[0],
+	vorgangList: testVorgangsList,
+	crimesList: testCrimesList,
+	url: 'https://www.google.com',
+	crimeNames: [testCrimesList[0].name]
+};
+
+describe('Tatort Liste Page EmptyList-Komponente View', () => {
+	it('zeigt EmptyList-Komponente an, wenn Liste leer ist', () => {
+		const testData = { ...baseData, crimesList: [] };
+		const { getByTestId } = render(TatortListPage, { props: { data: testData } });
+
+		expect(getByTestId('empty-list')).toBeInTheDocument();
+	});
+
+	it('zeigt Liste(min. 1 li-Element) an, wenn Liste vorhanden ist', () => {
+		const testData = { ...baseData };
+		const { getAllByTestId } = render(TatortListPage, { props: { data: testData } });
+		const items = getAllByTestId('test-list-item');
+
+		expect(items).toHaveLength(2);
+	});
+});

tests/VorgangList.view.test.ts

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import VorgangListPage from '../src/routes/(angemeldet)/list/+page.svelte';
+const testUser = {
+	admin: true,
+	exp: 1757067123,
+	iat: 1757063523,
+	id: 'admin'
+};
+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 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'
+	}
+];
+
+const baseData = {
+	user: testUser,
+	vorgang: testVorgangsList[0],
+	vorgangList: testVorgangsList,
+	crimesList: testCrimesList,
+	url: URL,
+	crimeNames: ['modell-A']
+};
+
+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(min. 1 li-Element) an, wenn Liste vorhanden ist', () => {
+		const testData = { ...baseData };
+		const { getAllByTestId } = render(VorgangListPage, { props: { data: testData } });
+		const items = getAllByTestId('test-list-item');
+
+		expect(items).toHaveLength(2);
+	});
+});

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: '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']
 				}