From 650cfd0061aff29fb1b7b67da3ed756a3282ef61 Mon Sep 17 00:00:00 2001 From: mina Date: Mon, 8 Sep 2025 17:46:33 +0200 Subject: [PATCH] implement tests, Tatort List , ComponentEmptyList refactoring --- .../(token-based)/list/[vorgang]/+page.svelte | 3 +- tests/ComponentEmptyList.view.test.ts | 9 ++ tests/ComponentNameItemEditor.view.test.ts | 6 +- tests/TatortList.view.test.ts | 84 +++++++++++++++---- tests/VorgangList.view.test.ts | 4 +- 5 files changed, 84 insertions(+), 22 deletions(-) create mode 100644 tests/ComponentEmptyList.view.test.ts diff --git a/src/routes/(token-based)/list/[vorgang]/+page.svelte b/src/routes/(token-based)/list/[vorgang]/+page.svelte index 2893b11..549f032 100644 --- a/src/routes/(token-based)/list/[vorgang]/+page.svelte +++ b/src/routes/(token-based)/list/[vorgang]/+page.svelte @@ -30,7 +30,7 @@ let crimesList: ListItem[] = $state(data.crimesList); const vorgangPIN: string = data.vorgang.vorgangPIN; let vorgangToken: string = data.vorgang.vorgangToken; - let isEmptyList = $derived(crimesList.length === 0); + let isEmptyList = $derived(crimesList && crimesList.length === 0); //Variablen für Modal let open = $state(false); @@ -162,6 +162,7 @@ Mit freundlichen Grüßen,
  • { + it('zeigt Hinweistext "Keine Einträge"', () => { + render(EmptyList); + expect(screen.getByText(/keine Einträge/i)).toBeInTheDocument(); }); +}); diff --git a/tests/ComponentNameItemEditor.view.test.ts b/tests/ComponentNameItemEditor.view.test.ts index 873cd6e..d5bc1f5 100644 --- a/tests/ComponentNameItemEditor.view.test.ts +++ b/tests/ComponentNameItemEditor.view.test.ts @@ -72,7 +72,7 @@ describe('Button-Anzeige mit Icons', () => { }); it('zeigt Commit/Cancel Buttons nach Klick auf Edit', async () => { - const { getByTestId } = render(NameItemEditor, { + const { getByTestId, queryByTestId } = render(NameItemEditor, { props: baseProps }); @@ -80,5 +80,9 @@ describe('Button-Anzeige mit Icons', () => { expect(getByTestId('commit-button')).toBeInTheDocument(); expect(getByTestId('cancel-button')).toBeInTheDocument(); + expect(queryByTestId('edit-button')).toBeNull(); + expect(queryByTestId('delete-button')).toBeNull(); }); + + }); diff --git a/tests/TatortList.view.test.ts b/tests/TatortList.view.test.ts index c8816c9..f47f86e 100644 --- a/tests/TatortList.view.test.ts +++ b/tests/TatortList.view.test.ts @@ -1,5 +1,5 @@ -import { render } from '@testing-library/svelte'; -import { describe, expect, it } from "vitest"; +import { render, screen, within } from '@testing-library/svelte'; +import { describe, expect, it, test } from "vitest"; import TatortListPage from "../src/routes/(token-based)/list/[vorgang]/+page.svelte"; const testUser = { @@ -47,27 +47,75 @@ const baseData = { vorgangList: testVorgangsList, crimesList: testCrimesList, url: URL, - crimeNames: [ "modell-A" ], - + crimeNames: [ "modell-A" ] } -describe('Tatort Liste Page EmptyList-Komponente View', ()=>{ - it('zeigt EmptyList-Komponente an, wenn Liste leer ist', () => { - const testData = { ...baseData, crimesList: [] }; - const { getByTestId } = render(TatortListPage, {props:{data: testData}}); +describe('Seite: Vorgangsansicht', () => { + test.todo('zeigt PIN und Share-Link, wenn Admin'); + + describe('Szenario: Liste leer (unabhängig von Rolle)', () => { + it('zeigt Hinweistext bei leerer Liste', () => { + const testData = { ...baseData, crimesList: [] }; + const { getByTestId } = render(TatortListPage, {props:{data: testData}}); + + expect(getByTestId('empty-list')).toBeInTheDocument(); + }); + it('zeigt keinen Listeneintrag', () => { + const items = screen.queryAllByTestId('test-list-item'); + + expect(items).toHaveLength(0); + }); + }); + describe('Szenario: Liste gefüllt (unabhängig von Rolle)', () => { + it('rendert mindestens ein Listenelement bei vorhandenen crimesList-Daten und prüft ob Link vorhanden', () => { + const testData = { ...baseData }; + const { queryAllByTestId } = render(TatortListPage, {props:{data: testData}}); + const items = queryAllByTestId('test-list-item'); + + expect(items.length).toBeGreaterThan(0); + }); + + it('zeigt für jeden Eintrag einen Link', () => { + const testData = { ...baseData }; + render(TatortListPage, { props: { data: testData } }); + const links = screen.queryAllByTestId('crime-link'); + + expect(links).toHaveLength(testData.crimesList.length); + }); + + it('prüft href und title jedes Links', () => { + const testData = { ...baseData }; + const { queryAllByTestId } = render(TatortListPage, { props: { data: testData } }); + const items = queryAllByTestId('test-list-item'); + + items.forEach((item, i) => { + const link = within(item).getByRole('link'); + const expectedHref = `/view/${testData.vorgang.vorgangToken}/${testData.crimesList[i].name}?pin=${testData.vorgang.vorgangPIN}`; + + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', expectedHref); + expect(link).toHaveAttribute('title', testData.crimesList[i].name); + }); + }); - expect(getByTestId('empty-list')).toBeInTheDocument(); - }); + test.todo('testet zuletzt angezeigt, wenn item.lastModified'); + test.todo('zeigt Dateigröße, wenn item.size vorhanden ist'); + }); - it('zeigt Liste(min. 1 li-Element) an, wenn Liste vorhanden ist', () => { - const testData = { ...baseData }; - const { getAllByTestId } = render(TatortListPage, {props:{data: testData}}); -const items = getAllByTestId('test-list-item'); - - expect(items).toHaveLength(2); - }); -}) + describe('Szenario: Admin + Liste gefüllt', () => { + it('zeigt PIN und Share-Link disabeld, wenn Liste leer', () => { }); + it('zeigt PIN und Share-Link disabeld=false', () => { }); + it('zeigt Listeneinträge mit Edit/Delete', () => { }); + it('gibt Edit/Delete-Events korrekt weiter', () => { }); + }); + describe('Szenario: Viewer + Liste gefüllt', () => { + it('zeigt Listeneinträge ohne Edit/Delete', () => { }); + it('zeigt Link und Änderungsdatum', () => { }); + it('zeigt keinen Share-Link oder PIN', () => { }); + }); + test.todo('Modal testen, wenn open') +}); diff --git a/tests/VorgangList.view.test.ts b/tests/VorgangList.view.test.ts index 13f6480..ae467e4 100644 --- a/tests/VorgangList.view.test.ts +++ b/tests/VorgangList.view.test.ts @@ -58,11 +58,11 @@ describe('Vorgänge Liste Page EmptyList-Komponente View', ()=>{ expect(getByTestId('empty-list')).toBeInTheDocument(); }); - it('zeigt Liste(min. 1 li-Element) an, wenn Liste vorhanden ist', () => { + it('zeigt Liste(mockData 2 Elemente) an, wenn Liste vorhanden ist', () => { const testData = { ...baseData }; const { getAllByTestId } = render(VorgangListPage, {props:{data: testData}}); const items = getAllByTestId('test-list-item'); - expect(items).toHaveLength(2); + expect(items.length).toBeGreaterThan(0); }); })