Files
Portfolio/e2e/fragments.e2e.ts
Antonio Ledebuhr 1d2965a7ff integration: collapse the mobile nav after hydration and keep fragment targets clear of the sticky header
SSR still ships the expanded menu, but phones collapse it after render, stop sticking the header below md, and use the header-offset token so case anchors no longer sit underneath the bar.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-25 19:32:13 +02:00

48 lines
1.6 KiB
TypeScript

import { expect, test } from '@playwright/test';
import { APP_LOCALES } from '../src/app/core/i18n/locale';
import { pagePath } from './helpers';
test.describe('fragment scrolling', () => {
test('case headings clear the sticky header at desktop width', async ({ page }, testInfo) => {
test.skip(testInfo.project.name === 'mobile', 'sticky header applies from md up');
await page.setViewportSize({ width: 1440, height: 900 });
for (const locale of APP_LOCALES) {
const path = `${pagePath('projects', locale)}#myspa`;
await page.goto(path, { waitUntil: 'networkidle' });
const header = page.locator('.site-header');
const heading = page.locator('#myspa h2');
await expect(heading).toBeVisible();
await page.evaluate(async () => {
await new Promise<void>((resolve) => {
let last = window.scrollY;
let stableFrames = 0;
const tick = () => {
if (window.scrollY === last) {
stableFrames += 1;
if (stableFrames >= 8) {
resolve();
return;
}
} else {
stableFrames = 0;
last = window.scrollY;
}
requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
});
});
const headerBox = await header.boundingBox();
const headingBox = await heading.boundingBox();
expect(headerBox, path).toBeTruthy();
expect(headingBox, path).toBeTruthy();
expect(headingBox!.y, path).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height - 1);
}
});
});