implement testsNameItemEditor funktionalität

tests/ComponentNameItemEditor.test.ts

@@ -0,0 +1,144 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, test, vi } from "vitest";
+import NameItemEditor from '$lib/components/NameItemEditor.svelte';
+import { baseData } from './fixtures';
+
+
+
+const testCrimesListIndex = 0;
+const testItem = baseData.crimesList[testCrimesListIndex];
+    const testCurrentName =  testItem.name;
+    const testLocalName = 'Fall-C'
+
+
+describe('NameItemEditor - Funktionalität', () => {
+      const onSave = vi.fn();
+    const onDelete = vi.fn();
+    const baseProps = {
+      list: baseData.crimesList,
+      currentName: testCurrentName,
+      onSave,
+      onDelete}
+
+      test.todo('FocusIn nach Klick auf edit')
+
+  it('zeigt initial Edit/Delete Buttons und aktuellen Namen', () => {
+    render(NameItemEditor, {props:  baseProps});
+
+    expect(screen.getByTestId('edit-button')).toBeInTheDocument();
+    expect(screen.getByTestId('delete-button')).toBeInTheDocument();
+    expect(screen.queryByTestId('commit-button')).toBeNull();
+    expect(screen.queryByTestId('cancel-button')).toBeNull();
+    expect(screen.getByText(testCurrentName)).toBeInTheDocument();
+  });
+
+  it('wechselt zu Commit/Cancel nach Klick auf Edit', async () => {
+    render(NameItemEditor, {props: baseProps});
+    await fireEvent.click(screen.getByTestId('edit-button'));
+    const input = screen.getByTestId('test-input');
+
+    expect(screen.getByTestId('commit-button')).toBeInTheDocument();
+    expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+    expect(screen.queryByTestId('edit-button')).toBeNull();
+    expect(screen.queryByTestId('delete-button')).toBeNull();
+    expect(screen.getAllByRole('textbox')).toHaveLength(1);
+    expect(input).toHaveValue(testCurrentName);
+  });
+
+   it('zeigt Fehlermeldung bei leerem Namen', async () => {
+    render(NameItemEditor, { props: baseProps });
+    await fireEvent.click(screen.getByTestId('edit-button'));
+
+    const input = screen.getByTestId('test-input');
+    await fireEvent.input(input, { target: { value: '' } });
+
+    expect(screen.getByText('Name darf nicht leer sein.')).toBeInTheDocument();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('entfernt Fehlermeldung live beim nächsten gültigen Tastendruck', async () => {
+  render(NameItemEditor, {
+    props: {
+      list: baseData.crimesList,
+      currentName: baseData.crimesList[0].name,
+      onSave: vi.fn(),
+      onDelete: vi.fn()
+    }
+  });
+
+  await fireEvent.click(screen.getByTestId('edit-button'));
+  const input = screen.getByTestId('test-input');
+
+  await fireEvent.input(input, { target: { value: '' } });
+  expect(screen.getByText('Name darf nicht leer sein.')).toBeInTheDocument();
+
+  await fireEvent.input(input, { target: { value: 'Fall-C' } });
+
+  expect(screen.queryByText('Name darf nicht leer sein.')).toBeNull();
+});
+
+  it('zeigt Fehlermeldung bei Duplikat', async () => {
+    const duplicateName = baseData.crimesList[1].name;
+    render(NameItemEditor, { props: baseProps });
+    await fireEvent.click(screen.getByTestId('edit-button'));
+
+    const input = screen.getByTestId('test-input');
+    await fireEvent.input(input, { target: { value: duplicateName } });
+
+    expect(screen.getByText('Name existiert bereits.')).toBeInTheDocument();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('ruft onSave korrekt auf bei gültigem Namen', async () => {
+    render(NameItemEditor, { props: baseProps });
+    await fireEvent.click(screen.getByTestId('edit-button'));
+
+    const input = screen.getByTestId('test-input');
+    await fireEvent.input(input, { target: { value: testLocalName } });
+    await fireEvent.click(screen.getByTestId('commit-button'));
+
+    expect(onSave).toHaveBeenCalledWith(testLocalName, testCurrentName);
+  });
+
+  it('ruft onDelete korrekt auf', async () => {
+    render(NameItemEditor, { props: baseProps });
+    await fireEvent.click(screen.getByTestId('delete-button'));
+
+    expect(onDelete).toHaveBeenCalledWith(testCurrentName);
+  });
+
+  it('setzt Zustand zurück bei Cancel', async () => {
+    render(NameItemEditor, { props: baseProps });
+    await fireEvent.click(screen.getByTestId('edit-button'));
+
+    const input = screen.getByTestId('test-input');
+    await fireEvent.input(input, { target: { value: 'Zwischentext' } });
+    await fireEvent.click(screen.getByTestId('cancel-button'));
+
+    expect(screen.getByText(testCurrentName)).toBeInTheDocument();
+    expect(screen.getByTestId('edit-button')).toBeInTheDocument();
+  });
+
+  it('triggert Save bei Enter-Taste', async () => {
+    render(NameItemEditor, { props: baseProps });
+    await fireEvent.click(screen.getByTestId('edit-button'));
+
+    const input = screen.getByTestId('test-input');
+    await fireEvent.input(input, { target: { value: 'ViaEnter' } });
+    await fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onSave).toHaveBeenCalledWith('ViaEnter', testCurrentName);
+  });
+
+  it('bricht ab bei Escape-Taste', async () => {
+    render(NameItemEditor, { props: baseProps });
+    await fireEvent.click(screen.getByTestId('edit-button'));
+
+    const input = screen.getByTestId('test-input');
+    await fireEvent.input(input, { target: { value: 'Zwischentext' } });
+    await fireEvent.keyDown(input, { key: 'Escape' });
+
+    expect(screen.getByText(testCurrentName)).toBeInTheDocument();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});