tatort/tests/ComponentNameItemEditor.test.ts

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();
  });
});