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>
This commit is contained in:
47
e2e/fragments.e2e.ts
Normal file
47
e2e/fragments.e2e.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user