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>

tests/ComponentNameItemEditor.view.test.ts

@@ -0,0 +1,84 @@
+import { fireEvent, render } from '@testing-library/svelte';
+import { describe, expect, it, vi } from "vitest";
+import NameItemEditor from '$lib/components/NameItemEditor.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" ],
+}
+
+const testCrimesListIndex = 0;
+const testItem = baseData.crimesList[testCrimesListIndex];
+    const editedName = baseData.crimeNames[testCrimesListIndex];
+    const currentName =  testItem.name;
+    const onSave = vi.fn();
+    const onDelete = vi.fn();
+
+describe('Button-Anzeige mit Icons', () => {
+    const baseProps = {list: baseData.crimesList, editedName, currentName, onDelete, onSave}
+  it('zeigt Edit/Delete Buttons initial', () => {
+    const { getByTestId, queryByTestId } = render(NameItemEditor, {
+      props:  baseProps
+
+    });
+
+    expect(getByTestId('edit-button')).toBeInTheDocument();
+    expect(getByTestId('delete-button')).toBeInTheDocument();
+    expect(queryByTestId('commit-button')).toBeNull();
+    expect(queryByTestId('cancel-button')).toBeNull();
+  });
+
+  it('zeigt Commit/Cancel Buttons nach Klick auf Edit', async () => {
+    const { getByTestId } = render(NameItemEditor, {
+      props: baseProps
+    });
+
+    await fireEvent.click(getByTestId('edit-button'));
+
+    expect(getByTestId('commit-button')).toBeInTheDocument();
+    expect(getByTestId('cancel-button')).toBeInTheDocument();
+  });
+});

tests/TatortList.view.test.ts

@@ -69,3 +69,5 @@ const items = getAllByTestId('test-list-item');
     expect(items).toHaveLength(2);
   });
 })
+
+