dorfteich/apps/web/e2e/settings-nav.spec.ts
Claude Fable 5 58f175af32
All checks were successful
CI / Lint, typecheck, test (pull_request) Successful in 4m37s
CI / Build container images (pull_request) Successful in 1m8s
CI / Import/export fidelity gate (pull_request) Successful in 54s
CI / Auth e2e pack (pull_request) Successful in 7m11s
CD / Build and push images (push) Successful in 18s
CD / Deploy to Test (push) Successful in 14s
CD / Smoke tests against Test (push) Successful in 1m42s
CD / Promote to Int (push) Successful in 15s
CI / Lint, typecheck, test (push) Successful in 5m21s
CI / Build container images (push) Has been skipped
CI / Auth e2e pack (push) Successful in 7m19s
CI / Import/export fidelity gate (push) Successful in 58s
settings-nav robust: Sofort-Sprung statt Smooth-Scroll, Spec wartet auf networkidle
Der animierte scrollIntoView landete auf einer veralteten Zielposition,
wenn Query-Sektionen (Sessions/Tokens) während der Animation noch
wuchsen — auf dem CI-Runner deterministisch rot. Jetzt springt die
Navigation sofort; der Spec lässt die asynchronen Inhalte vor dem Klick
settlen (networkidle) und lief lokal 10× ohne Retry grün.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC
2026-07-20 02:11:35 +02:00

68 lines
2.7 KiB
TypeScript

import { expect, test, type BrowserContext } from '@playwright/test';
import { contextForUser } from './helpers';
/**
* Settings section navigation pack (issue #145): every settings page derives
* a jump nav from its stacked sections; clicking an entry scrolls the section
* into view and marks it active. Language-independent selectors (CSS classes)
* throughout.
*/
const BASE_URL = process.env.E2E_BASE_URL ?? 'http://localhost:5173';
async function json<T>(context: BrowserContext, url: string, data: unknown): Promise<T> {
const response = await context.request.post(url, { data });
if (!response.ok()) throw new Error(`post ${url}${response.status()}`);
return response.json() as Promise<T>;
}
test('user settings show the jump nav and clicking scrolls + activates', async ({ browser }) => {
const context = await contextForUser(browser, BASE_URL, 'fixture-user');
const page = await context.newPage();
await page.goto('/settings');
// Let the async section content (sessions, tokens, …) settle first —
// sections growing above the target would push it out of view again.
await page.waitForLoadState('networkidle');
const nav = page.locator('.settings-nav');
await expect(nav).toBeVisible();
const links = nav.locator('.settings-nav__link');
// Profile, password, sessions, watches, API tokens, feed tokens, data export.
await expect(links).toHaveCount(7);
// Jump to the last section: it scrolls into view and becomes active.
const last = links.last();
await last.click();
const lastSection = page.locator('.settings-layout section[id]').last();
// Smooth scrolling needs a moment on a loaded CI runner.
await expect(lastSection).toBeInViewport({ timeout: 10_000 });
await expect(last).toHaveClass(/settings-nav__link--active/);
await context.close();
});
test('pond settings derive the nav from their sections', async ({ browser }) => {
const context = await contextForUser(browser, BASE_URL, 'fixture-user');
const pond = await json<{ id: string; slug: string }>(context, '/api/v1/ponds', {
name: `Nav Pack ${Date.now()}`,
});
const page = await context.newPage();
await page.goto(`/p/${pond.slug}/settings`);
await page.waitForLoadState('networkidle');
const links = page.locator('.settings-nav .settings-nav__link');
// The pond owner sees the full section stack — at least members, labels,
// missing links, import, files, appearance, plugins, sidebar, comments,
// API, export.
await expect(links.first()).toBeVisible();
expect(await links.count()).toBeGreaterThanOrEqual(8);
await links.last().click();
await expect(page.locator('.settings-layout section[id]').last()).toBeInViewport({
timeout: 10_000,
});
await context.close();
});