From 8b422c8f06aef96f41d960001e513c750827f5f0 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 23 Mar 2026 13:37:39 +0100
Subject: [PATCH] fix(e2e): wait for hydration on document detail page in
 history tests

All three history tests navigated to the doc page but didn't wait for
SvelteKit hydration, so the toggle onclick wasn't registered yet. Also
wait for versions to load (API call) before asserting on version items
or the compare button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/history.spec.ts | 53 ++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/frontend/e2e/history.spec.ts b/frontend/e2e/history.spec.ts
index 8e70b702..d249ac47 100644
--- a/frontend/e2e/history.spec.ts
+++ b/frontend/e2e/history.spec.ts
@@ -6,45 +6,44 @@ import { test, expect } from '@playwright/test';
  * having run first (they create and edit "E2E Testbrief (überarbeitet)").
  * Assumes auth setup has run.
  */
+
+async function openHistoryDoc(page: import('@playwright/test').Page) {
+	await page.goto('/?q=E2E+Testbrief');
+	await page.waitForSelector('[data-hydrated]');
+	const href = await page
+		.getByRole('link', { name: /E2E Testbrief/ })
+		.first()
+		.getAttribute('href');
+	await page.goto(href!);
+	await page.waitForSelector('[data-hydrated]');
+}
+
 test.describe('Document history panel', () => {
 	test('history section appears after creating and editing a document', async ({ page }) => {
-		// Find the document edited in the documents.spec.ts editing test
-		await page.goto('/?q=E2E+Testbrief');
-		await page.waitForSelector('[data-hydrated]');
-		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
-		const href = await docLink.getAttribute('href');
-		await page.goto(href!);
+		await openHistoryDoc(page);
 
-		// History section should be present (collapsed by default)
 		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
 		await expect(historyToggle).toBeVisible();
-
-		// Expand the history section
 		await historyToggle.click();
 
-		// Should show at least two version entries (created + edited)
+		// Wait for versions to load (API call happens after panel opens)
 		const versionItems = page.locator('[data-testid="history-version"]');
-		await expect(versionItems).toHaveCount(2, { timeout: 5000 });
+		await expect(versionItems).toHaveCount(2, { timeout: 10000 });
 
 		await page.screenshot({ path: 'test-results/e2e/history-versions-list.png' });
 	});
 
 	test('diff view highlights changed field after title edit', async ({ page }) => {
-		await page.goto('/?q=E2E+Testbrief');
-		await page.waitForSelector('[data-hydrated]');
-		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
-		const href = await docLink.getAttribute('href');
-		await page.goto(href!);
+		await openHistoryDoc(page);
 
-		// Expand history
 		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
 		await historyToggle.click();
 
-		// Click the second version (the edit) to see its diff
+		// Wait for versions to load, then click the second one (the edit)
 		const versionItems = page.locator('[data-testid="history-version"]');
+		await expect(versionItems.nth(1)).toBeVisible({ timeout: 10000 });
 		await versionItems.nth(1).click();
 
-		// The diff panel should show the "Titel" field as changed
 		const diffPanel = page.locator('[data-testid="history-diff"]');
 		await expect(diffPanel).toBeVisible();
 		await expect(diffPanel.getByText(/Titel/i)).toBeVisible();
@@ -53,34 +52,30 @@ test.describe('Document history panel', () => {
 	});
 
 	test('compare mode lets user compare any two versions', async ({ page }) => {
-		await page.goto('/?q=E2E+Testbrief');
-		await page.waitForSelector('[data-hydrated]');
-		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
-		const href = await docLink.getAttribute('href');
-		await page.goto(href!);
+		await openHistoryDoc(page);
 
-		// Expand history
 		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
 		await historyToggle.click();
 
-		// Switch to compare mode
+		// Wait for versions to load before the compare button appears
+		await expect(page.locator('[data-testid="history-version"]').first()).toBeVisible({
+			timeout: 10000
+		});
+
 		const compareBtn = page.getByRole('button', { name: /Vergleichen/i });
 		await expect(compareBtn).toBeVisible();
 		await compareBtn.click();
 
-		// Two version selects should appear
 		const selectA = page.getByLabel(/Version A/i);
 		const selectB = page.getByLabel(/Version B/i);
 		await expect(selectA).toBeVisible();
 		await expect(selectB).toBeVisible();
 
-		// Apply the comparison
 		await page
 			.getByRole('button', { name: /Vergleichen/i })
 			.last()
 			.click();
 
-		// Diff panel should be visible
 		const diffPanel = page.locator('[data-testid="history-diff"]');
 		await expect(diffPanel).toBeVisible();