fix(e2e): wait for hydration on document detail page in history tests
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Successful in 2m6s
CI / Backend Unit Tests (pull_request) Successful in 2m3s
CI / E2E Tests (pull_request) Failing after 21m29s

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>
This commit is contained in:
Marcel
2026-03-23 13:37:39 +01:00
parent d84b997965
commit 8b422c8f06

View File

@@ -6,45 +6,44 @@ import { test, expect } from '@playwright/test';
* having run first (they create and edit "E2E Testbrief (überarbeitet)"). * having run first (they create and edit "E2E Testbrief (überarbeitet)").
* Assumes auth setup has run. * 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.describe('Document history panel', () => {
test('history section appears after creating and editing a document', async ({ page }) => { test('history section appears after creating and editing a document', async ({ page }) => {
// Find the document edited in the documents.spec.ts editing test await openHistoryDoc(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!);
// History section should be present (collapsed by default)
const historyToggle = page.getByRole('button', { name: /Verlauf/i }); const historyToggle = page.getByRole('button', { name: /Verlauf/i });
await expect(historyToggle).toBeVisible(); await expect(historyToggle).toBeVisible();
// Expand the history section
await historyToggle.click(); 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"]'); 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' }); await page.screenshot({ path: 'test-results/e2e/history-versions-list.png' });
}); });
test('diff view highlights changed field after title edit', async ({ page }) => { test('diff view highlights changed field after title edit', async ({ page }) => {
await page.goto('/?q=E2E+Testbrief'); await openHistoryDoc(page);
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 }); const historyToggle = page.getByRole('button', { name: /Verlauf/i });
await historyToggle.click(); 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"]'); const versionItems = page.locator('[data-testid="history-version"]');
await expect(versionItems.nth(1)).toBeVisible({ timeout: 10000 });
await versionItems.nth(1).click(); await versionItems.nth(1).click();
// The diff panel should show the "Titel" field as changed
const diffPanel = page.locator('[data-testid="history-diff"]'); const diffPanel = page.locator('[data-testid="history-diff"]');
await expect(diffPanel).toBeVisible(); await expect(diffPanel).toBeVisible();
await expect(diffPanel.getByText(/Titel/i)).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 }) => { test('compare mode lets user compare any two versions', async ({ page }) => {
await page.goto('/?q=E2E+Testbrief'); await openHistoryDoc(page);
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 }); const historyToggle = page.getByRole('button', { name: /Verlauf/i });
await historyToggle.click(); 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 }); const compareBtn = page.getByRole('button', { name: /Vergleichen/i });
await expect(compareBtn).toBeVisible(); await expect(compareBtn).toBeVisible();
await compareBtn.click(); await compareBtn.click();
// Two version selects should appear
const selectA = page.getByLabel(/Version A/i); const selectA = page.getByLabel(/Version A/i);
const selectB = page.getByLabel(/Version B/i); const selectB = page.getByLabel(/Version B/i);
await expect(selectA).toBeVisible(); await expect(selectA).toBeVisible();
await expect(selectB).toBeVisible(); await expect(selectB).toBeVisible();
// Apply the comparison
await page await page
.getByRole('button', { name: /Vergleichen/i }) .getByRole('button', { name: /Vergleichen/i })
.last() .last()
.click(); .click();
// Diff panel should be visible
const diffPanel = page.locator('[data-testid="history-diff"]'); const diffPanel = page.locator('[data-testid="history-diff"]');
await expect(diffPanel).toBeVisible(); await expect(diffPanel).toBeVisible();