Files

Marcel 242e10179d feat(stammbaum): /stammbaum page — SVG tree + side panel + empty state

- /stammbaum/+page.server.ts loads GET /api/network (already filtered
  to family members on the backend) and returns nodes + edges.
- +page.svelte holds the page shell, manages selectedId (with
  ?focus={id} deep-link support) and zoom state, renders the empty
  state when nodes.length === 0 (icon + heading + body + link to
  /persons), or the tree + side panel otherwise.
- StammbaumTree.svelte: BFS-based generation assignment from roots,
  spouses promoted to the deeper generation so couples sit on the same
  row, alphabetical sort within row, simple grid layout. SVG nodes are
  role="button" + aria-label="{name}, {birth}–{death}" +
  aria-expanded={selected}, with click + Enter/Space activation. Solid
  parent→child connectors; mint spouse line with midpoint circle, dashed
  if SPOUSE_OF.toYear is set (former spouse). Zoom maps to viewBox.
- StammbaumSidePanel.svelte: lazily loads
  /api/persons/{id}/relationships and /inferred-relationships when the
  selection changes; shows direct chips (mint), top-5 derived chips
  (grey), and a "Zur Personenseite →" link. Escape closes the panel.

Refs #358.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-28 19:32:17 +02:00

5.1 KiB

Raw Blame History

E2E Tests — Familienarchiv

Overview

End-to-end tests for the Familienarchiv frontend using Playwright. These tests verify complete user flows across the full stack (SvelteKit frontend + Spring Boot backend + PostgreSQL + MinIO).

Tech Stack

Test Runner: Playwright (@playwright/test)
Browser: Chromium (desktop)
Locale: de-DE (ensures German language detection)
Auth: Shared session cookie stored after setup

Project Structure

frontend/e2e/
├── auth.setup.ts              # Authentication setup — logs in and saves session
├── auth.spec.ts               # Authentication flows (login, logout, register)
├── admin.spec.ts              # Admin panel CRUD operations
├── annotations.spec.ts        # Document annotation features
├── bottom-panel.spec.ts       # Bottom panel / transcription panel
├── dashboard-*.spec.ts        # Dashboard variants and screenshots
├── documents.spec.ts          # Document upload, edit, search
├── focus-rings.spec.ts        # Accessibility focus ring tests
├── header.spec.ts             # Navigation header
├── history.spec.ts            # Chronik / activity feed
├── korrespondenz.spec.ts      # Correspondence timeline
├── lang.spec.ts               # Language switching
├── password-reset.spec.ts     # Password reset flow
├── permissions.spec.ts        # Role-based access control
├── persons.spec.ts            # Person directory CRUD
├── profile.spec.ts            # User profile
├── theme.spec.ts              # Dark/light mode
├── transcription.spec.ts      # Transcription workflows
├── accessibility.spec.ts      # Axe accessibility scans
├── fixtures/                  # Test data fixtures
└── helpers/                   # Test helper utilities

Authentication Strategy

Tests share auth state via a stored session cookie:

Setup (auth.setup.ts): Logs in with test credentials and saves storageState to e2e/.auth/user.json
Tests: All test projects depend on setup and reuse the stored session

This avoids re-logging in for every test, but means tests must run sequentially (fullyParallel: false, workers: 1).

Configuration

Config lives in frontend/playwright.config.ts:

Setting	Value	Notes
`testDir`	`./e2e`	Test file location
`fullyParallel`	`false`	Shared auth state
`workers`	`1`	Sequential execution
`screenshot`	`'on'`	Always capture
`video`	`'retain-on-failure'`	Keep on failure
`trace`	`'retain-on-failure'`	Keep on failure
`baseURL`	`http://localhost:3000`	Overridable via `E2E_BASE_URL`

The webServer config auto-starts npm run dev -- --port 3000 if no server is detected at the base URL.

How to Run

Prerequisites

The full stack must be running (or the webServer config will start the frontend dev server):

# Start infrastructure
docker-compose up -d

# Ensure backend is healthy
curl http://localhost:8080/actuator/health

Run E2E Tests

cd frontend

# Headless (CI mode)
npm run test:e2e

# With visible browser
npm run test:e2e:headed

# Interactive UI mode
npm run test:e2e:ui

# Run a specific test file
npx playwright test documents.spec.ts

# Run with a different base URL (e.g., docker frontend on 5173)
E2E_BASE_URL=http://localhost:5173 npx playwright test

Writing New E2E Tests

Create a new .spec.ts file in frontend/e2e/
Use the shared auth state (no manual login needed)
Use page object patterns or helper functions from helpers/
Add test-data-id attributes to components for stable selectors
Run with --debug or --ui to troubleshoot

Example Test Pattern

import { test, expect } from '@playwright/test';

test('user can create a document', async ({ page }) => {
	await page.goto('/documents/new');
	await page.getByTestId('document-title').fill('Test Document');
	await page.getByTestId('save-button').click();
	await expect(page).toHaveURL(/\/documents\/[^/]+$/);
});

Accessibility Testing

accessibility.spec.ts runs Axe scans on key pages. Violations fail the test.

npx playwright test accessibility.spec.ts

Troubleshooting

Issue	Solution
Auth failures	Delete `e2e/.auth/user.json` and re-run
Backend not reachable	Ensure `docker-compose up -d` is running
Flaky tests	Increase timeout or add explicit waits
Screenshots missing	Check `test-results/e2e/`

CI Integration

E2E tests are not currently run in CI (the pipeline stops at unit/component tests). To add them, extend infra/gitea/workflows/ci.yml with a Playwright job that starts the full Docker Compose stack first.

5.1 KiB Raw Blame History