tatort/tests/views/TatortList.test.ts

import { render, fireEvent, screen, within } from '@testing-library/svelte';
import { describe, it, expect, vi, test } from 'vitest';
import * as nav from '$app/navigation';
import TatortListPage from '$root/routes/(token-based)/list/[vorgang]/+page.svelte';
import { baseData } from '../fixtures';
import { tick } from 'svelte';
import { API_ROUTES } from '../../src/routes';

vi.spyOn(nav, 'invalidateAll').mockResolvedValue();
global.fetch = vi.fn().mockResolvedValue({ ok: true });

async function clickPlusButton() {
  // mock animation features of the browser

  window.HTMLElement.prototype.scrollIntoView = vi.fn();
  window.HTMLElement.prototype.animate = vi.fn(() => ({
    finished: Promise.resolve(),
    cancel: vi.fn(),
  }))

  // button is visible
  const button = screen.getByRole('button', { name: /add item/i })
  expect(button).toBeInTheDocument();

  await fireEvent.click(button)
}

describe('Seite: Vorgangsansicht', () => {
  test('Share Link disabled wenn Liste leer', () => {
    const testData = { ...baseData, crimesList: [] };
    render(TatortListPage, { props: { data: testData } });

    const button = screen.getByRole('button', { name: /share link/i });
    expect(button).toBeInTheDocument()
    expect(button).toBeDisabled();
  });

  describe('Szenario: Admin + Liste gefüllt - Funktionalität', () => {
    test('Share Link Link generierung richtig', () => {
        const testData = { ...baseData};

        render(TatortListPage, { props: { data: testData } });

        const link = screen.getByRole('link', { name: /share link/i });
        expect(link).toBeInTheDocument()

        // const vorgangTokenFirstUUIDGroup = testData.vorgangList[0].vorgangToken.split('-')[0]
        const vorgangURL = testData.url.toString()
        const vorgangURLEncoded = encodeURIComponent(vorgangURL)
        expect(link).toHaveAttribute('href', expect.stringContaining(vorgangURLEncoded));
    });

    it('führt PUT-Request aus und aktualisiert UI nach onSave', async () => {
      const data = structuredClone(baseData);
      const oldName = data.crimesList[0].name;
      const newName = 'Fall-C';

      render(TatortListPage, { props: { data } });
      const listItem = screen.getAllByTestId('test-list-item')[0];
      expect(listItem).toHaveTextContent(oldName);

      await fireEvent.click(within(listItem).getByTestId('edit-button'));
      const input = within(listItem).getByTestId('test-input');
      await fireEvent.input(input, { target: { value: newName } });

      await fireEvent.click(within(listItem).getByTestId('commit-button'));
      await tick();

      expect(global.fetch).toHaveBeenCalledWith(
        `/api/list/${data.vorgang.vorgangToken}/${oldName}`,
        expect.objectContaining({
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            vorgangToken: data.vorgang.vorgangToken,
            oldName,
            newName
          })
        })
      );

      expect(nav.invalidateAll).toHaveBeenCalled();
      expect(within(listItem).getByText(newName)).toBeInTheDocument();
    });

    it('führt DELETE-Request aus und entfernt Element aus UI', async () => {
      const testData = structuredClone(baseData);
      const oldName = testData.crimesList[0].name;
      const vorgang = testData.vorgang;

      render(TatortListPage, { props: { data: testData } });
      const initialItems = screen.getAllByTestId('test-list-item');
      expect(initialItems).toHaveLength(testData.crimesList.length);

      const listItem = screen.getAllByTestId('test-list-item')[0];
      expect(listItem).toHaveTextContent(oldName);
      const del = within(listItem).getByTestId('delete-button');
      expect(del).toBeInTheDocument()
      await fireEvent.click(within(listItem).getByTestId('delete-button'));
      await tick();

      let expectedPath = API_ROUTES.CRIME(vorgang.vorgangToken, oldName)
      expect(global.fetch).toHaveBeenCalledWith(
        expectedPath,
        expect.objectContaining({
         method: 'DELETE',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           vorgangToken: testData.vorgang.vorgangToken,
           tatort: oldName
         })
        })
      );
      expect(nav.invalidateAll).toHaveBeenCalled();
      const updatedItems = screen.queryAllByTestId('test-list-item');
      expect(updatedItems).toHaveLength(testData.crimesList.length - 1);
      expect(screen.queryByText(oldName)).toBeNull();
    });
  });
});


describe('Hinzufügen Button', () => {
  it('Unexpandierter Button', () => {
    const testData = { ...baseData, vorgangList: [] };
    const { getByTestId } = render(TatortListPage, { props: { data: testData } });

    const container = getByTestId('expand-container')
    expect(container).toBeInTheDocument();

    // button is visible
    const button = within(container).getByRole('button')
    expect(button).toBeInTheDocument();

    // input fields are not visible
    let label = screen.queryByText('Modellname');
    expect(label).not.toBeInTheDocument();
  });

  it('Expandierter Button nach Klick', async () => {

    const testData = { ...baseData, vorgangList: [] };
    render(TatortListPage, { props: { data: testData } });

    await clickPlusButton();

    // input fields are visible
    let label = screen.queryByText('Modellname');
    expect(label).toBeInTheDocument();
  });

  it.todo('Check Validation: missing name', async () => {
    console.log(`test: input field validation`);
  });

  it.todo('Create Tatort successful', async () => {
    console.log(`test: tatort upload`);
  });
});