diff --git a/tests/ComponentNameItemEditor.test.ts b/tests/ComponentNameItemEditor.test.ts index ff1d504..b32cfbb 100644 --- a/tests/ComponentNameItemEditor.test.ts +++ b/tests/ComponentNameItemEditor.test.ts @@ -1,144 +1,142 @@ import { fireEvent, render, screen } from '@testing-library/svelte'; -import { describe, expect, it, test, vi } from "vitest"; +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' - +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} + const onSave = vi.fn(); + const onDelete = vi.fn(); + const baseProps = { + list: baseData.crimesList, + currentName: testCurrentName, + onSave, + onDelete + }; - test.todo('FocusIn nach Klick auf edit') + test.todo('FocusIn nach Klick auf edit'); - it('zeigt initial Edit/Delete Buttons und aktuellen Namen', () => { - render(NameItemEditor, {props: baseProps}); + 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(); - }); + 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'); + 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); - }); + 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')); + 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: '' } }); + 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(); - }); + 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() - } - }); + 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.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: '' } }); + expect(screen.getByText('Name darf nicht leer sein.')).toBeInTheDocument(); - await fireEvent.input(input, { target: { value: 'Fall-C' } }); + 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(); - }); + 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(); + }); });