save changes, bin aber noch nicht fertig

src/lib/components/NameItemEditor.svelte

@@ -10,27 +10,20 @@
 		token?: string;
 		// add other properties as needed
 	}
-	let {
+	let { list, currentName, onSave = () => {}, onDelete = () => {} } = $props();
-		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) {
+	let error = $derived(() => validateName(localName));
+
+	let inputRef = $state<HTMLInputElement | null>(null);
+
+	function validateName(name: string | undefined | null) {
+		if (!name) return 'Name darf nicht leer sein.';
 		const trimmed = name.trim();
 
-		if (!trimmed) {
+		if (!trimmed) return 'Name darf nicht leer sein.';
-			return 'Name darf nicht leer sein.';
-		}
 
 		const duplicate = list.some(
 			(item: ListItem) => item.name === trimmed && item.name !== currentName
@@ -41,67 +34,44 @@
 		return '';
 	}
 
-	function commitIfValid() {
+	function startEdit() {
-		if (!error && !wasCancelled && localName != currentName) {
+		isEditing = true;
-			const trimmedName: string = localName.trim();
+		tick().then(() => inputRef?.focus());
-			inputRef?.blur();
-			isEditing = false;
-			onSave(trimmedName, currentName);
-		} else {
-			cancelEdit();
-		}
 	}
 
-	function resetEdit() {
+	function cancelEdit() {
-		inputRef?.blur();
+		localName = currentName;
+		isEditing = false;
+	}
+
+	function commitEdit() {
+		if (!error() && localName != currentName) onSave(localName, currentName);
+
 		isEditing = false;
 	}
 
 	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
+		if (event.key === 'Enter') commitEdit();
-			event.preventDefault();
+		if (event.key === 'Escape') cancelEdit();
-			commitIfValid();
-		} else if (event.key === 'Escape') {
-			event.preventDefault();
-			localName = currentName;
-			resetEdit();
-		}
-	}
-
-	async function startEdit() {
-		isEditing = true;
-		await tick();
-		inputRef?.focus();
-	}
-
-	function cancelEdit() {
-		resetEdit();
-		wasCancelled = true;
-		localName = currentName;
 	}
 </script>
 
 <div data-testid="test-nameItemEditor">
+	{#if isEditing}
 		<input
 			data-testid="test-input"
 			bind:this={inputRef}
 			bind:value={localName}
-		onfocus={() => {
-			isEditing = true;
-		}}
-		onblur={commitIfValid}
 			onkeydown={handleKeydown}
 		/>
-	{#if isEditing}
+		<button data-testid="commit-button" onclick={commitEdit}><Check /></button>
-		<button data-testid="commit-button" disabled={wasCancelled} onclick={commitIfValid}
-			><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={() => onDelete(currentName)}><Trash /></button>
 	{/if}
-	{#if error}
+	{#if error()}
-		<p class="text-red-500">{error}</p>
+		<p class="text-red-500">{error()}</p>
 	{/if}
 </div>

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

@@ -25,7 +25,6 @@
 		prefix?: string;
 		// add other properties as needed
 	}
-	console.log(data.url);
 
 	let vorgangName: string = data.vorgang.vorgangName;
 	let crimesList: ListItem[] = $state(data.crimesList);
@@ -44,6 +43,8 @@
 	async function handleSave(newName: string, oldName: string) {
 		open = true;
 		inProgress = true;
+		console.log('debug handleSave', newName, oldName);
+
 		try {
 			const res = await fetch(`/api/list/${vorgangToken}/${oldName}`, {
 				method: 'PUT',
@@ -51,18 +52,18 @@
 					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({ vorgangToken, oldName, newName })
-			})
+			});
-				.then(() => {
+
+			if (res.ok) {
 				inProgress = false;
 				invalidateAll();
-					crimesList = data.crimesList;
+				data.crimesList = newName;
 				open = false;
-				})
+			} else {
-				.catch((err) => {
 				inProgress = false;
 				isError = true;
-					console.log('ERROR', err);
+				throw new Error('Fehler beim Speichern');
-				});
+			}
 		} catch (err) {
 			isError = true;
 			inProgress = false;
@@ -94,7 +95,7 @@
 				.catch((err) => {
 					isError = true;
 					inProgress = false;
-					console.log('ERROR', err);
+					console.error('ERROR', err);
 				});
 		} catch (err) {
 			isError = true;
@@ -145,7 +146,7 @@ Mit freundlichen Grüßen,
 				{#if isEmptyList}
 					<EmptyList></EmptyList>
 				{:else}
-					{#each data.crimesList as item, crimeListItemIndex}
+					{#each data.crimesList as item}
 						<li data-testid="test-list-item">
 							<div class=" flex gap-x-4">
 								<a
@@ -161,7 +162,6 @@ Mit freundlichen Grüßen,
 									{#if admin}
 										<NameItemEditor
 											list={data.crimesList}
-											editedName={data.crimeNames[crimeListItemIndex]}
 											currentName={item.name}
 											onSave={handleSave}
 											onDelete={handleDelete}

tests/TatortList.test.ts

@@ -1,7 +1,8 @@
-import { fireEvent, getAllByTestId, queryAllByTestId, render, screen, within } from '@testing-library/svelte';
+import { fireEvent, getByTestId, queryAllByTestId, render, screen, within } from '@testing-library/svelte';
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, test, vi } from "vitest";
 import TatortListPage from "../src/routes/(token-based)/list/[vorgang]/+page.svelte";
 import { baseData } from './fixtures';
+import { invalidateAll } from '$app/navigation';
 
 
 // Mock für invalidateAll
@@ -9,68 +10,84 @@ vi.mock('$app/navigation', () => ({
   invalidateAll: vi.fn()
 }));
 
-// Minimaler fetch-Mock
-global.fetch = vi.fn().mockResolvedValue({ ok: true });
 
 describe('Seite: Vorgangsansicht', () => {
+  test.todo('Share Link disabled wenn Liste leer');
   describe('Szenario: Admin + Liste gefüllt', () => {
+    test.todo('Share Link Link generierung richtig');
+
     it('ändert den Namen nach Speichern', async () => {
       const testData = structuredClone(baseData);
       const oldName = testData.crimesList[0].name;
+      const newName = 'Fall-B';
+      const list = testData.crimesList
+      const vorgangToken = testData.vorgang.vorgangToken
+            // Minimaler fetch-Mock
+global.fetch = vi.fn().mockResolvedValue({ ok: true }) as typeof fetch;
 
-  render(TatortListPage, { props: { data: testData } });
+  const { getAllByTestId } = render(TatortListPage, { props: { data: testData } });
 
-  const firstItem = screen.getAllByTestId('test-list-item')[0];
+  const firstItem = getAllByTestId('test-list-item')[0];
-  await fireEvent.click(within(firstItem).getByTestId('edit-button'));
+  const editButton = within(firstItem).getByTestId('edit-button');
+  await fireEvent.click(editButton);
 
-  const input = within(firstItem).getByRole('textbox');
+  const input = within(firstItem).getByTestId('test-input');
-  await fireEvent.input(input, { target: { value: 'Fall-B' } });
+  expect(input).toHaveValue(oldName)
+   await fireEvent.input(input, { target: { value: newName } });
 
-await fireEvent.click(within(firstItem).getByTestId('commit-button'));
+   const commitButton = within(firstItem).getByTestId('commit-button');
+   await fireEvent.click(commitButton);
 
-// Erwartung: fetch wurde aufgerufen
+  // const fetchMock = global.fetch as ReturnType<typeof vi.fn>;
-expect(global.fetch).toHaveBeenCalledWith(
+  // console.log('Fetch calls:', fetchMock.mock.calls);
-  expect.stringContaining(`/api/list/${testData.vorgang.vorgangToken}/${oldName}`),
-  expect.any(Object)
-);
 
+  //     // Erwartung: fetch wurde aufgerufen
+  //     expect(global.fetch).toHaveBeenCalledWith(
+  //       expect.stringContaining(`/api/list/${vorgangToken}/${oldName}`),
+  //         expect.objectContaining({
+  //           method: 'PUT',
+  //           headers: { 'Content-Type': 'application/json' },
+  //           body: JSON.stringify({vorgangToken, oldName, newName})
+  //         })
+  //       );
+
+      //   expect(invalidateAll).toHaveBeenCalled();
       // Erwartung: neuer Name ist sofort im DOM sichtbar
-expect(within(firstItem).getByRole('textbox')).toHaveValue('Fall-B');
+    //   expect(within(firstItem).getByRole('textbox')).toHaveValue(newName);
+    //  const editedLink = within(firstItem).getByRole('link');
+		// 		const editedExpectedHref = `/view/${vorgangToken}/${newName}?pin=${testData.vorgang.vorgangPIN}`;
 
+		// 		 expect(editedLink).toBeInTheDocument();
+		// 		 expect(editedLink).toHaveAttribute('href', editedExpectedHref);
+		// 		 expect(editedLink).toHaveAttribute('title', newName);
     });
 
-it('entfernt das Listenelement nach Löschen', async () => {
+    // it('entfernt das Listenelement nach Löschen', async () => {
-  const testData = structuredClone(baseData);
+    //   const testData = structuredClone(baseData);
-  testData.url = new URL('https://example.com/vorgang-1'); // Fix für Invalid URL
+    //   testData.url = new URL('https://example.com/vorgang-1'); // Fix für Invalid URL
-  const toDelete = testData.crimesList[0];
+    //   const toDelete = testData.crimesList[0];
 
-  global.fetch = vi.fn().mockResolvedValue({ ok: true });
+    //   global.fetch = vi.fn().mockResolvedValue({ ok: true });
 
-render(TatortListPage, { props: { data: testData } });
+    //   render(TatortListPage, { props: { data: testData } });
-    const deletedFirstItem = screen.getAllByTestId('test-list-item')[0];
+    //   const deletedFirstItem = screen.getAllByTestId('test-list-item')[0];
+		// 	const deletedLink = within(deletedFirstItem).getByRole('link');
+    //   const deletedExpectedHref = `/view/${testData.vorgang.vorgangToken}/${toDelete.name}?pin=${testData.vorgang.vorgangPIN}`;
 
+		// 	expect(deletedLink).toBeInTheDocument();
+		// 	expect(deletedLink).toHaveAttribute('href', deletedExpectedHref);
+		// 	expect(deletedLink).toHaveAttribute('title', toDelete.name);
+    //   await fireEvent.click(within(deletedFirstItem).getByTestId('delete-button'));
 
-				const deletedLink = within(deletedFirstItem).getByRole('link');
+    //   // Erwartung: fetch wurde aufgerufen
+    //   expect(global.fetch).toHaveBeenCalledWith(
+    //     expect.stringContaining(`/api/vorgang-1/${toDelete.name}`),
+    //     expect.any(Object)
+    //   );
 
-	const deletedExpectedHref = `/view/${testData.vorgang.vorgangToken}/${toDelete.name}?pin=${testData.vorgang.vorgangPIN}`;
+    //   // Erwartung: Element ist nicht mehr im DOM
-
+    //   expect(within(deletedFirstItem).getByRole('textbox')).toHaveValue(toDelete.name);
-				expect(deletedLink).toBeInTheDocument();
+  	// });
-
-				expect(deletedLink).toHaveAttribute('href', deletedExpectedHref);
-				expect(deletedLink).toHaveAttribute('title', toDelete.name);
-
-
-await fireEvent.click(within(deletedFirstItem).getByTestId('delete-button'));
-
-// Erwartung: fetch wurde aufgerufen
-expect(global.fetch).toHaveBeenCalledWith(
-  expect.stringContaining(`/api/vorgang-1/${toDelete.name}`),
-  expect.any(Object)
-);
-
-// Erwartung: Element ist nicht mehr im DOM
-expect(within(deletedFirstItem).getByRole('textbox')).toHaveValue(toDelete.name);
-  	});
   });
 });
 

tests/TatortList.view.test.ts

@@ -14,14 +14,16 @@ describe('Seite: Vorgangsansicht', () => {
 
     		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', () => {
+		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');
@@ -65,6 +67,8 @@ describe('Seite: Vorgangsansicht', () => {
 
 			expect(items.length).toBeGreaterThan(0);
 	 	});
+
+		test.todo('Modal testen, wenn open')
   	});
 
 	describe('Szenario: Viewer + Liste gefüllt', () => {
@@ -80,6 +84,6 @@ describe('Seite: Vorgangsansicht', () => {
 		});
 
 		test.todo('zeigt keinen Share-Link oder PIN')
-		test.todo('Modal testen, wenn open')
+
 	});
 });