organize tests into units

tests/views/TatortList.test.ts

@@ -0,0 +1,85 @@
+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 });
+
+
+describe('Seite: Vorgangsansicht', () => {
+  test.todo('Share Link disabled wenn Liste leer');
+  describe('Szenario: Admin + Liste gefüllt - Funktionalität', () => {
+    test.todo('Share Link Link generierung richtig');
+
+    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();
+    });
+  });
+});