implement tests, Tatort List , ComponentEmptyList refactoring

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

@@ -30,7 +30,7 @@
 	let crimesList: ListItem[] = $state(data.crimesList);
 	const vorgangPIN: string = data.vorgang.vorgangPIN;
 	let vorgangToken: string = data.vorgang.vorgangToken;
-	let isEmptyList = $derived(crimesList.length === 0);
+	let isEmptyList = $derived(crimesList && crimesList.length === 0);
 
 	//Variablen für Modal
 	let open = $state(false);
@@ -162,6 +162,7 @@ Mit freundlichen Grüßen,
 						<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}"

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

tests/ComponentNameItemEditor.view.test.ts

@@ -72,7 +72,7 @@ describe('Button-Anzeige mit Icons', () => {
   });
 
   it('zeigt Commit/Cancel Buttons nach Klick auf Edit', async () => {
-    const { getByTestId } = render(NameItemEditor, {
+    const { getByTestId, queryByTestId } = render(NameItemEditor, {
       props: baseProps
     });
 
@@ -80,5 +80,9 @@ describe('Button-Anzeige mit Icons', () => {
 
     expect(getByTestId('commit-button')).toBeInTheDocument();
     expect(getByTestId('cancel-button')).toBeInTheDocument();
+        expect(queryByTestId('edit-button')).toBeNull();
+    expect(queryByTestId('delete-button')).toBeNull();
   });
+
+
 });

tests/TatortList.view.test.ts

@@ -1,5 +1,5 @@
-import { render } from '@testing-library/svelte';
+import { render, screen, within } from '@testing-library/svelte';
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, test } from "vitest";
 import TatortListPage from "../src/routes/(token-based)/list/[vorgang]/+page.svelte";
 
 const testUser = {
@@ -47,27 +47,75 @@ const baseData = {
     vorgangList: testVorgangsList,
     crimesList: testCrimesList,
     url: URL,
-    crimeNames: [ "modell-A" ],
+    crimeNames: [ "modell-A" ]
-
 }
 
-describe('Tatort Liste Page EmptyList-Komponente View', ()=>{
 
-    it('zeigt EmptyList-Komponente an, wenn Liste leer ist', () => {
+describe('Seite: Vorgangsansicht', () => {
-		 const testData = { ...baseData, crimesList: [] };
+	test.todo('zeigt PIN und Share-Link, wenn Admin');
-    const { getByTestId } = render(TatortListPage, {props:{data: testData}});
+
+	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 und prüft ob Link vorhanden', () => {
+			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);
+			});
+		});
 
 
-    expect(getByTestId('empty-list')).toBeInTheDocument();
+		test.todo('testet zuletzt angezeigt, wenn item.lastModified');
-  });
+		test.todo('zeigt Dateigröße, wenn item.size vorhanden ist');
+	});
 
-    it('zeigt Liste(min. 1 li-Element) an, wenn Liste vorhanden ist', () => {
+	describe('Szenario: Admin + Liste gefüllt', () => {
-		 const testData = { ...baseData };
+		 it('zeigt PIN und Share-Link disabeld, wenn Liste leer', () => {  });
-    const { getAllByTestId } = render(TatortListPage, {props:{data: testData}});
+    it('zeigt PIN und Share-Link disabeld=false', () => {  });
-const items = getAllByTestId('test-list-item');
+    it('zeigt Listeneinträge mit Edit/Delete', () => {  });
-
+    it('gibt Edit/Delete-Events korrekt weiter', () => {  });
-    expect(items).toHaveLength(2);
+  	});
-  });
+	describe('Szenario: Viewer + Liste gefüllt', () => {
-})
+    it('zeigt Listeneinträge ohne Edit/Delete', () => {  });
+    it('zeigt Link und Änderungsdatum', () => {  });
+    it('zeigt keinen Share-Link oder PIN', () => {  });
+  	});
 
+	test.todo('Modal testen, wenn open')
+});
 

tests/VorgangList.view.test.ts

@@ -58,11 +58,11 @@ describe('Vorgänge Liste Page EmptyList-Komponente View', ()=>{
     expect(getByTestId('empty-list')).toBeInTheDocument();
   });
 
-    it('zeigt Liste(min. 1 li-Element) an, wenn Liste vorhanden ist', () => {
+    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).toHaveLength(2);
+    expect(items.length).toBeGreaterThan(0);
   });
 })