fixed tests and Code edit and delete Name in TatortList

src/lib/components/NameItemEditor.svelte

@@ -8,35 +8,33 @@
 	interface ListItem {
 		name: string;
 		token?: string;
-		// add other properties as needed
 	}
-	let { list, currentName, onSave = () => {}, onDelete = () => {} } = $props();
 
-	let localName = $state(currentName);
-	let isEditing = $state(false);
+	export let list: ListItem[] = [];
+	export let currentName: string = '';
+	export let onSave: (n: string, o: string) => unknown = () => {};
+	export let onDelete: (n: string) => unknown = () => {};
 
-	let error = $derived(() => validateName(localName));
+	// lokaler State
+	let localName = currentName;
+	let isEditing = false;
+	let inputRef: HTMLInputElement | null = null;
 
-	let inputRef = $state<HTMLInputElement | null>(null);
-
-	function validateName(name: string | undefined | null) {
-		if (!name) return 'Name darf nicht leer sein.';
-		const trimmed = name.trim();
+	$: error = validateName(localName);
 
+	function validateName(name: string): 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
-		);
-
-		if (duplicate) return 'Name existiert bereits.';
-
+		if (list.some((item) => item.name === trimmed && item.name !== currentName)) {
+			return 'Name existiert bereits.';
+		}
 		return '';
 	}
 
-	function startEdit() {
+	async function startEdit() {
 		isEditing = true;
-		tick().then(() => inputRef?.focus());
+		await tick();
+		inputRef?.focus();
 	}
 
 	function cancelEdit() {
@@ -45,7 +43,7 @@
 	}
 
 	function commitEdit() {
-		if (!error() && localName != currentName) onSave(localName, currentName);
+		if (!error && localName != currentName) onSave(localName, currentName);
 
 		isEditing = false;
 	}
@@ -54,6 +52,10 @@
 		if (event.key === 'Enter') commitEdit();
 		if (event.key === 'Escape') cancelEdit();
 	}
+
+	function handleDeleteClick() {
+		onDelete(currentName);
+	}
 </script>
 
 <div data-testid="test-nameItemEditor">
@@ -64,14 +66,18 @@
 			bind:value={localName}
 			onkeydown={handleKeydown}
 		/>
-		<button data-testid="commit-button" onclick={commitEdit}><Check /></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={() => onDelete(currentName)}><Trash /></button>
+		<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button>
 	{/if}
-	{#if error()}
-		<p class="text-red-500">{error()}</p>
+	{#if error}
+		<p class="text-red-500">{error}</p>
 	{/if}
 </div>