src/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -194,7 +194,7 @@
 		open = true;
 		inProgress = true;
 		isError = false;
-		let path = API_ROUTES.CRIME(vorgangToken, tatort);
+		let path = API_ROUTES.CRIME(vorgangToken, tatort)
 
 		try {
 			const res = await fetch(path, {
@@ -267,9 +267,9 @@ Mit freundlichen Grüßen,
 							<div class=" flex gap-x-4">
 								<a
 									data-testid="crime-link"
-									href={ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}
+									href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
 									class=" flex justify-between gap-x-6 py-5"
-									aria-label={ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}
+									aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
 									title={item.name}
 								>
 									<Cube />

tests/views/TatortList.test.ts

@@ -9,6 +9,21 @@ 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.todo('Share Link disabled wenn Liste leer');
@@ -83,3 +98,42 @@ describe('Seite: Vorgangsansicht', () => {
     });
   });
 });
+
+
+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`);
+  });
+});