mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-07 04:12:04 +00:00
Marc-André Bombeck
a23ee61184
A spec that arms `page.route(...)` in a `beforeEach` and never drops the handler races its own teardown. The context closes, an async handler is still awaiting, its next call rejects with "Test ended.", and Playwright attributes that to the test that had just passed. With `retries: 2` plus `failOnFlakyTests`, which spec bites is a matter of timing. `e2e/setup/test.ts` re-exports Playwright's `test` extended with an auto fixture that unroutes every page and the context after each test, and clears the page event listeners a spec subscribes to; `expect` rides along so a spec needs one import. Auto means a spec author cannot forget it and does not have to know it exists. Every spec now takes `test` from there, and `e2e-route-cleanup-guard.test.ts` keeps the import boundary closed with an allowlist that carries its reason. The per-file `afterEach` on the cycle spec goes away — leaving both would read as not trusting the fixture. Not covered: a page inside a context a spec builds itself. Only `share-documents.spec.ts` does that, and it owns those contexts.
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import { expect, test } from "./setup/test";
|
||
|
||
import { STORAGE_STATE_PATH } from "./setup/global-setup";
|
||
|
||
/**
|
||
* iPad-width regression guard (portrait, 768×1024).
|
||
*
|
||
* Two invariants this viewport class kept losing:
|
||
*
|
||
* 1. No horizontal page overflow — the content column must shrink
|
||
* below its children's intrinsic min width (`min-w-0` on the
|
||
* shell column); wide children scroll inside their own
|
||
* `overflow-x-auto` containers instead of widening the page.
|
||
* 2. The content column keeps its room: with no stored sidebar
|
||
* preference, tablet widths start on the icon rail (w-16), so
|
||
* `<main>` gets ~704 px of the 768 — not the 512 px left over
|
||
* next to the expanded 256 px sidebar.
|
||
*
|
||
* Desktop project only — the assertions are viewport-driven via
|
||
* `setViewportSize`, and the Pixel-5 project covers the phone class.
|
||
*/
|
||
const ROUTES = ["/", "/measurements", "/settings/integrations"] as const;
|
||
|
||
test.describe("iPad portrait layout (768x1024)", () => {
|
||
test.use({ storageState: STORAGE_STATE_PATH });
|
||
|
||
test.beforeEach(({}, testInfo) => {
|
||
test.skip(
|
||
testInfo.project.name !== "chromium-desktop",
|
||
"viewport-driven spec; desktop project only",
|
||
);
|
||
});
|
||
|
||
for (const route of ROUTES) {
|
||
test(`no horizontal overflow and full-width content on ${route}`, async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize({ width: 768, height: 1024 });
|
||
await page.goto(route, { waitUntil: "domcontentloaded" });
|
||
await page.waitForLoadState("networkidle");
|
||
|
||
// The sidebar collapses to the icon rail only on the first client
|
||
// render after hydration settles (mounted-gated to avoid a React #418
|
||
// mismatch — SSR and the hydration frame both paint the expanded
|
||
// 256 px shell, leaving `<main>` at 512 px). On a loaded CI runner that
|
||
// settle can land just after `networkidle`, so measuring immediately
|
||
// catches the mid-hydration frame. Wait for the content column to reach
|
||
// its resolved width first. A genuine regression — the rail never
|
||
// engaging — still fails: the wait times out and the assertion below
|
||
// reports the actual (too-narrow) width.
|
||
await page
|
||
.waitForFunction(
|
||
() =>
|
||
(document.querySelector("main")?.getBoundingClientRect().width ??
|
||
0) >= 690,
|
||
undefined,
|
||
{ timeout: 10_000 },
|
||
)
|
||
.catch(() => {});
|
||
|
||
const dims = await page.evaluate(() => ({
|
||
scrollWidth: document.documentElement.scrollWidth,
|
||
bodyScrollWidth: document.body.scrollWidth,
|
||
innerWidth: window.innerWidth,
|
||
mainWidth:
|
||
document
|
||
.querySelector("main")
|
||
?.getBoundingClientRect()
|
||
.width.valueOf() ?? 0,
|
||
}));
|
||
|
||
// 1 px tolerance for sub-pixel rounding, matching the Pixel-5 spec.
|
||
expect(
|
||
dims.scrollWidth,
|
||
`page scrollWidth=${dims.scrollWidth}, innerWidth=${dims.innerWidth}`,
|
||
).toBeLessThanOrEqual(dims.innerWidth + 1);
|
||
expect(
|
||
dims.bodyScrollWidth,
|
||
`body scrollWidth=${dims.bodyScrollWidth}`,
|
||
).toBeLessThanOrEqual(dims.innerWidth + 1);
|
||
|
||
// Icon rail (64 px) + content: main must keep ≥ 690 px of the 768.
|
||
expect(
|
||
Math.round(dims.mainWidth),
|
||
`main width=${dims.mainWidth}`,
|
||
).toBeGreaterThanOrEqual(690);
|
||
});
|
||
}
|
||
});
|