organize tests into units

tests/components/NameItemEditor.test.ts

@@ -0,0 +1,142 @@
+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();
+	});
+});