import { fireEvent, render } from '@testing-library/svelte';
import { describe, expect, it, vi } from "vitest";
import NameItemEditor from '$lib/components/NameItemEditor.svelte';
import { baseData } from './fixtures';



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, queryByTestId } = render(NameItemEditor, {
      props: baseProps
    });

    await fireEvent.click(getByTestId('edit-button'));

    expect(getByTestId('commit-button')).toBeInTheDocument();
    expect(getByTestId('cancel-button')).toBeInTheDocument();
        expect(queryByTestId('edit-button')).toBeNull();
    expect(queryByTestId('delete-button')).toBeNull();
  });


});