implement test verschiedene Buttons beim click von editButton

src/lib/components/NameItemEditor.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import Check from '$lib/icons/Check.svelte';
 	import Edit from '$lib/icons/Edit.svelte';
 	import Trash from '$lib/icons/Trash.svelte';
+	import X from '$lib/icons/X.svelte';
 	import { tick } from 'svelte';
 
 	interface ListItem {
@@ -46,13 +48,11 @@
 			isEditing = false;
 			onSave(trimmedName, currentName);
 		} else {
-			localName = currentName;
-			resetEdit();
+			cancelEdit();
 		}
 	}
 
 	function resetEdit() {
-		wasCancelled = false;
 		inputRef?.blur();
 		isEditing = false;
 	}
@@ -73,18 +73,34 @@
 		await tick();
 		inputRef?.focus();
 	}
+
+	function cancelEdit() {
+		resetEdit();
+		wasCancelled = true;
+		localName = currentName;
+	}
 </script>
 
 <div>
 	<input
 		bind:this={inputRef}
 		bind:value={localName}
+		onfocus={() => {
+			isEditing = true;
+		}}
 		onblur={commitIfValid}
 		onkeydown={handleKeydown}
 	/>
-	<button onclick={startEdit}><Edit /></button>
-	<button onclick={() => onDelete(currentName)}><Trash /></button>
+	{#if isEditing}
+		<button data-testid="commit-button" disabled={wasCancelled} onclick={commitIfValid}
+			><Check /></button
+		>
+		<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
+	{:else}
+		<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
+		<button data-testid="delete-button" onclick={() => onDelete(currentName)}><Trash /></button>
+	{/if}
 	{#if error}
-		<p style="color: red;">{error}</p>
+		<p class="text-red-500">{error}</p>
 	{/if}
 </div>