From 7562a400c0429339268fc8ce12ba4e438ef34425 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 14 Apr 2026 15:28:15 +0200
Subject: [PATCH] test(frontend): add Vitest component tests for
 TrainingHistory expand/collapse

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/TrainingHistory.svelte.spec.ts | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 frontend/src/lib/components/TrainingHistory.svelte.spec.ts

diff --git a/frontend/src/lib/components/TrainingHistory.svelte.spec.ts b/frontend/src/lib/components/TrainingHistory.svelte.spec.ts
new file mode 100644
index 00000000..728b167a
--- /dev/null
+++ b/frontend/src/lib/components/TrainingHistory.svelte.spec.ts
@@ -0,0 +1,52 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TrainingHistory from './TrainingHistory.svelte';
+
+afterEach(cleanup);
+
+function makeRun(i: number) {
+	return {
+		id: `run-${i}`,
+		status: 'DONE' as const,
+		blockCount: 10,
+		documentCount: 2,
+		modelName: 'german_kurrent',
+		createdAt: `2026-01-0${i + 1}T12:00:00Z`,
+		completedAt: `2026-01-0${i + 1}T12:05:00Z`
+	};
+}
+
+const fiveRuns = Array.from({ length: 5 }, (_, i) => makeRun(i));
+const twoRuns = Array.from({ length: 2 }, (_, i) => makeRun(i));
+
+describe('TrainingHistory — expand/collapse', () => {
+	it('shows only 3 runs initially when more than 3 exist', async () => {
+		render(TrainingHistory, { runs: fiveRuns });
+
+		const rows = page.getByRole('row');
+		// 1 header row + 3 data rows = 4 total
+		await expect.element(rows.nth(3)).toBeInTheDocument();
+		await expect.element(rows.nth(4)).not.toBeInTheDocument();
+
+		await expect.element(page.getByRole('button', { name: /Mehr anzeigen/i })).toBeInTheDocument();
+	});
+
+	it('shows all runs after clicking the expand button', async () => {
+		render(TrainingHistory, { runs: fiveRuns });
+
+		await page.getByRole('button', { name: /Mehr anzeigen/i }).click();
+
+		const rows = page.getByRole('row');
+		// 1 header row + 5 data rows = 6 total
+		await expect.element(rows.nth(5)).toBeInTheDocument();
+	});
+
+	it('hides the toggle button when 3 or fewer runs exist', async () => {
+		render(TrainingHistory, { runs: twoRuns });
+
+		await expect
+			.element(page.getByRole('button', { name: /Mehr anzeigen/i }))
+			.not.toBeInTheDocument();
+	});
+});