From 62f62a89a1e7908d4e59658e1dac54466397e3bb Mon Sep 17 00:00:00 2001 From: Marcel 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 --- frontend/e2e/history.spec.ts | 87 +++++++++++++++++++++++------------- 1 file changed, 55 insertions(+), 32 deletions(-) diff --git a/frontend/e2e/history.spec.ts b/frontend/e2e/history.spec.ts index 8e70b702..9d012d8d 100644 --- a/frontend/e2e/history.spec.ts +++ b/frontend/e2e/history.spec.ts @@ -1,50 +1,72 @@ import { test, expect } from '@playwright/test'; +import path from 'path'; +import { fileURLToPath } from 'url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); /** * Document edit history E2E tests. - * Relies on the 'Document creation' and 'Document editing' tests in documents.spec.ts - * having run first (they create and edit "E2E Testbrief (überarbeitet)"). - * Assumes auth setup has run. + * Creates its own test document (two versions) in beforeAll so these tests + * are fully independent of any other spec file. */ -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!); - // History section should be present (collapsed by default) +let docPath: string; + +test.describe('Document history panel', () => { + test.beforeAll(async ({ browser }) => { + // Create a fresh browser context that uses the stored auth session + const context = await browser.newContext({ + storageState: path.join(__dirname, '.auth/user.json'), + locale: 'de-DE' + }); + const page = await context.newPage(); + + // 1. Create a new document + await page.goto('/documents/new'); + await page.waitForSelector('[data-hydrated]'); + await page.getByLabel('Titel').fill('E2E History Test Dokument'); + await page.getByRole('button', { name: /Speichern/i }).click(); + // Wait for redirect to the new document's UUID-based URL (not /documents/new) + await page.waitForURL(/\/documents\/[0-9a-f-]{36}$/); + docPath = new URL(page.url()).pathname; + + // 2. Edit the document to create a second version + await page.goto(`${docPath}/edit`); + await page.waitForSelector('[data-hydrated]'); + await page.getByLabel('Titel').fill('E2E History Test Dokument (bearbeitet)'); + await page.getByRole('button', { name: /Speichern/i }).click(); + await page.waitForURL(/\/documents\/[0-9a-f-]{36}$/); + + await context.close(); + }); + + test('history section appears and shows two versions', async ({ page }) => { + await page.goto(docPath); + await page.waitForSelector('[data-hydrated]'); + 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.goto(docPath); await page.waitForSelector('[data-hydrated]'); - const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first(); - const href = await docLink.getAttribute('href'); - await page.goto(href!); - // 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 +75,35 @@ test.describe('Document history panel', () => { }); test('compare mode lets user compare any two versions', async ({ page }) => { - await page.goto('/?q=E2E+Testbrief'); + await page.goto(docPath); await page.waitForSelector('[data-hydrated]'); - const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first(); - const href = await docLink.getAttribute('href'); - await page.goto(href!); - // 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 + // Select version 1 for A and version 2 for B + await selectA.selectOption({ index: 1 }); + await selectB.selectOption({ index: 2 }); + 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();