mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 05:12:14 +00:00
Marc-André Bombeck
798747f987
tablet-shell.spec.ts runs on WebKit with an iPad profile (webkit-tablet, in the WebKit job) and on Chromium with an Android tablet profile (chromium-tablet, in the shards), across iPad mini to iPad Pro 13 in both orientations, Safari's bars, Split View and Slide Over. It checks that the shell fills the window and leaves the document nothing to scroll, that every rail destination scrolls into view on top and takes a tap, that the scroll cue follows the overflow, that main reaches its last line clear of the bottom bar, that the page scrolls again after a sheet and a dialog close, and that a tab strip leaves the vertical pan to the page. ui-standards records the shell and rail rules.
421 lines
16 KiB
TypeScript
421 lines
16 KiB
TypeScript
import type { Locator, Page } from "@playwright/test";
|
|
|
|
import { mockDay } from "./setup/day-mock";
|
|
import { expect, test } from "./setup/test";
|
|
import { MOBILE_ROUTES_STORAGE_STATE_PATH } from "./setup/global-setup";
|
|
|
|
/**
|
|
* The app shell on a tablet, under a finger, at every iPad size in both
|
|
* orientations: the rail reaches every destination, `<main>` scrolls to its
|
|
* last line, and closing a sheet or a dialog hands the scroll back.
|
|
*
|
|
* Runs in `webkit-tablet` (iPad, the engine an iPad runs; CI's WebKit job)
|
|
* and `chromium-tablet` (an Android tablet, in the Chromium shards). Both
|
|
* report `pointer: coarse`, so the rail keeps its 44 px rows and its list
|
|
* overflows in landscape, which is the case that broke.
|
|
*
|
|
* What a browser under test cannot show is the iPadOS toolbar moving the
|
|
* visible height away from `100dvh`; `shell-viewport.test.ts` holds the
|
|
* decisions that take that disagreement out, and this file measures that the
|
|
* shell they produce fills the window exactly and leaves the document
|
|
* nothing to scroll or bounce.
|
|
*
|
|
* Stable hooks only: `sidebar-nav-region`, `sidebar-nav-scroll-cue`,
|
|
* `sidebar-footer`, `main-content-wrapper`, `bottom-nav`,
|
|
* `bottom-nav-more` (test id), `command-palette-trigger`,
|
|
* `command-palette-input`, `day-panel`.
|
|
*/
|
|
|
|
/** iPad and Android tablet sizes, CSS px, with the browser's own bars where they take room. */
|
|
const VIEWPORTS = [
|
|
{ name: "iPad mini portrait", width: 744, height: 1133 },
|
|
{ name: "iPad mini landscape", width: 1133, height: 744 },
|
|
{ name: "iPad mini landscape, Safari bars", width: 1133, height: 670 },
|
|
{ name: "iPad landscape, Safari bars", width: 1000, height: 690 },
|
|
{ name: "iPad Air 11 portrait", width: 820, height: 1180 },
|
|
{ name: "iPad Air 11 landscape", width: 1180, height: 820 },
|
|
{ name: "iPad Pro 11 portrait", width: 834, height: 1194 },
|
|
{ name: "iPad Pro 11 landscape", width: 1194, height: 834 },
|
|
{ name: "iPad Pro 13 portrait", width: 1024, height: 1366 },
|
|
{ name: "iPad Pro 13 landscape", width: 1366, height: 1024 },
|
|
{ name: "Split View two thirds", width: 694, height: 1024 },
|
|
{ name: "Split View half, landscape", width: 590, height: 820 },
|
|
{ name: "Slide Over", width: 375, height: 1024 },
|
|
{ name: "Android tablet landscape", width: 1138, height: 712 },
|
|
] as const;
|
|
|
|
test.use({ storageState: MOBILE_ROUTES_STORAGE_STATE_PATH });
|
|
|
|
async function openDashboard(page: Page) {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await expect(
|
|
page.locator('#main-content [data-slot="main-content-wrapper"]'),
|
|
).toBeVisible();
|
|
// The module-gated destinations join the rail once `/api/auth/me` lands.
|
|
await expect(page.locator('aside nav a[href="/medications"]')).toHaveCount(1);
|
|
}
|
|
|
|
/** The shell fills the window exactly and the document has nothing to scroll. */
|
|
async function expectShellPinned(page: Page) {
|
|
const m = await page.evaluate(() => {
|
|
const shell = document.querySelector<HTMLElement>(".shell-safe-area")!;
|
|
const rect = shell.getBoundingClientRect();
|
|
const root = document.scrollingElement!;
|
|
const html = getComputedStyle(document.documentElement);
|
|
return {
|
|
top: rect.top,
|
|
bottom: rect.bottom,
|
|
left: rect.left,
|
|
right: rect.right,
|
|
innerHeight,
|
|
innerWidth,
|
|
docScroll: root.scrollHeight - root.clientHeight,
|
|
overflowY: html.overflowY,
|
|
overscroll: html.overscrollBehaviorY,
|
|
};
|
|
});
|
|
expect(m.top).toBe(0);
|
|
expect(m.left).toBe(0);
|
|
expect(Math.abs(m.bottom - m.innerHeight)).toBeLessThanOrEqual(0.5);
|
|
expect(Math.abs(m.right - m.innerWidth)).toBeLessThanOrEqual(0.5);
|
|
expect(m.docScroll).toBeLessThanOrEqual(0);
|
|
expect(m.overflowY).toBe("hidden");
|
|
// No rubber band on the document: on iOS it held the next swipe.
|
|
expect(m.overscroll).toBe("none");
|
|
}
|
|
|
|
function railNav(page: Page): Locator {
|
|
return page.locator('aside [data-slot="sidebar-nav-region"] > nav');
|
|
}
|
|
|
|
/** Scrolls `<main>` to its end, waiting out content that grows on the way. */
|
|
async function scrollMainToEnd(page: Page) {
|
|
let last = -1;
|
|
for (let i = 0; i < 8; i += 1) {
|
|
const height = await page.evaluate(() => {
|
|
const main = document.getElementById("main-content")!;
|
|
main.scrollTop = main.scrollHeight;
|
|
return main.scrollHeight;
|
|
});
|
|
if (height === last) return;
|
|
last = height;
|
|
await page.waitForTimeout(250);
|
|
}
|
|
}
|
|
|
|
/** Where the page's lowest content ends, and what covers the window's bottom edge. */
|
|
async function measureMainEnd(page: Page) {
|
|
return page.evaluate(() => {
|
|
const main = document.getElementById("main-content")!;
|
|
const wrapper = main.querySelector<HTMLElement>(
|
|
'[data-slot="main-content-wrapper"]',
|
|
)!;
|
|
let contentBottom = 0;
|
|
for (const el of wrapper.querySelectorAll<HTMLElement>("*")) {
|
|
const cs = getComputedStyle(el);
|
|
if (cs.position === "fixed" || cs.visibility === "hidden") continue;
|
|
const rect = el.getBoundingClientRect();
|
|
if (rect.width === 0 || rect.height === 0) continue;
|
|
let p = el.parentElement;
|
|
let nested = false;
|
|
while (p && p !== main) {
|
|
const ps = getComputedStyle(p);
|
|
if (
|
|
/(auto|scroll|hidden)/.test(ps.overflowY) &&
|
|
p.scrollHeight > p.clientHeight + 1
|
|
) {
|
|
nested = true;
|
|
break;
|
|
}
|
|
p = p.parentElement;
|
|
}
|
|
if (nested) continue;
|
|
contentBottom = Math.max(contentBottom, rect.bottom);
|
|
}
|
|
const visible = (el: Element | null): el is HTMLElement =>
|
|
!!el &&
|
|
getComputedStyle(el).display !== "none" &&
|
|
el.getBoundingClientRect().height > 0;
|
|
const bar = document.querySelector('[data-slot="bottom-nav"]');
|
|
const mainRect = main.getBoundingClientRect();
|
|
return {
|
|
atEnd: main.scrollTop + main.clientHeight >= main.scrollHeight - 1,
|
|
scrolls: main.scrollHeight > main.clientHeight,
|
|
contentBottom,
|
|
mainBottom: mainRect.bottom,
|
|
barTop: visible(bar) ? bar.getBoundingClientRect().top : null,
|
|
};
|
|
});
|
|
}
|
|
|
|
for (const vp of VIEWPORTS) {
|
|
test.describe(`${vp.name} (${vp.width}x${vp.height})`, () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.setViewportSize({ width: vp.width, height: vp.height });
|
|
});
|
|
|
|
test("every rail destination scrolls into view and takes a tap", async ({
|
|
page,
|
|
}) => {
|
|
await openDashboard(page);
|
|
await expectShellPinned(page);
|
|
|
|
const aside = page.locator("aside");
|
|
const railShown = vp.width >= 768;
|
|
if (!railShown) {
|
|
// Split View and Slide Over get the phone shell: the bar, no rail.
|
|
await expect(aside).toBeHidden();
|
|
await expect(page.locator('[data-slot="bottom-nav"]')).toBeVisible();
|
|
return;
|
|
}
|
|
await expect(aside).toBeVisible();
|
|
|
|
// Nothing in the rail is clipped by the rail: the logo band, the list
|
|
// region, the pinned footer and the account row all sit inside it, in
|
|
// that order, and the list region alone gives up height.
|
|
const parts = await page.evaluate(() => {
|
|
const asideEl = document.querySelector("aside")!;
|
|
const box = asideEl.getBoundingClientRect();
|
|
const pick = (sel: string) =>
|
|
asideEl.querySelector(sel)!.getBoundingClientRect();
|
|
const column = asideEl.querySelector('[data-slot="sidebar-column"]')!;
|
|
const user = column.lastElementChild!.getBoundingClientRect();
|
|
return {
|
|
clipped: asideEl.scrollHeight - asideEl.clientHeight,
|
|
asideTop: box.top,
|
|
asideBottom: box.bottom,
|
|
header: pick('[data-slot="sidebar-header"]'),
|
|
region: pick('[data-slot="sidebar-nav-region"]'),
|
|
footer: pick('[data-slot="sidebar-footer"]'),
|
|
user,
|
|
overscroll: getComputedStyle(
|
|
asideEl.querySelector('[data-slot="sidebar-nav-region"] > nav')!,
|
|
).overscrollBehaviorY,
|
|
};
|
|
});
|
|
expect(parts.clipped).toBeLessThanOrEqual(0);
|
|
expect(parts.header.top).toBeGreaterThanOrEqual(parts.asideTop - 0.5);
|
|
expect(parts.region.top).toBeGreaterThanOrEqual(
|
|
parts.header.bottom - 0.5,
|
|
);
|
|
expect(parts.footer.top).toBeGreaterThanOrEqual(
|
|
parts.region.bottom - 0.5,
|
|
);
|
|
expect(parts.user.top).toBeGreaterThanOrEqual(parts.footer.bottom - 0.5);
|
|
expect(parts.user.bottom).toBeLessThanOrEqual(parts.asideBottom + 0.5);
|
|
expect(parts.overscroll).toBe("contain");
|
|
await expect(
|
|
aside.locator('[data-slot="sidebar-collapse-toggle"]'),
|
|
).toBeInViewport({ ratio: 1 });
|
|
await expect(
|
|
aside.locator('[data-slot="nav-settings-link"]'),
|
|
).toBeInViewport({ ratio: 1 });
|
|
|
|
// Every destination: scrolled into the list's view, whole, on top
|
|
// (not under the cue, the footer or anything else), and actionable.
|
|
const nav = railNav(page);
|
|
const links = nav.locator("a[href]");
|
|
const count = await links.count();
|
|
expect(count).toBeGreaterThanOrEqual(10);
|
|
for (let i = 0; i < count; i += 1) {
|
|
const link = links.nth(i);
|
|
await link.scrollIntoViewIfNeeded();
|
|
await expect
|
|
.poll(() =>
|
|
link.evaluate((el) => {
|
|
const navEl = el.closest("nav")!;
|
|
const r = el.getBoundingClientRect();
|
|
const n = navEl.getBoundingClientRect();
|
|
const hit = document.elementFromPoint(
|
|
r.left + r.width / 2,
|
|
r.top + r.height / 2,
|
|
);
|
|
return (
|
|
r.top >= n.top - 0.5 &&
|
|
r.bottom <= n.bottom + 0.5 &&
|
|
!!hit &&
|
|
el.contains(hit)
|
|
);
|
|
}),
|
|
)
|
|
.toBe(true);
|
|
await link.click({ trial: true });
|
|
}
|
|
|
|
// A list taller than its region shows the touch cue at the edge that
|
|
// has more, and a tap on it is a way there.
|
|
const overflows = await nav.evaluate(
|
|
(el) => el.scrollHeight > el.clientHeight + 1,
|
|
);
|
|
const down = page.locator(
|
|
'[data-slot="sidebar-nav-scroll-cue"][data-direction="down"]',
|
|
);
|
|
const up = page.locator(
|
|
'[data-slot="sidebar-nav-scroll-cue"][data-direction="up"]',
|
|
);
|
|
await nav.evaluate((el) => (el.scrollTop = 0));
|
|
if (overflows) {
|
|
await expect(down).toBeVisible();
|
|
await expect(up).toHaveCount(0);
|
|
await down.tap();
|
|
await expect
|
|
.poll(() => nav.evaluate((el) => el.scrollTop))
|
|
.toBeGreaterThan(0);
|
|
await expect(up).toBeVisible();
|
|
await nav.evaluate((el) => (el.scrollTop = el.scrollHeight));
|
|
await expect(down).toHaveCount(0);
|
|
} else {
|
|
await expect(down).toHaveCount(0);
|
|
await expect(up).toHaveCount(0);
|
|
}
|
|
|
|
// And the last destination is a real tap away.
|
|
const lastLink = links.nth(count - 1);
|
|
const href = await lastLink.getAttribute("href");
|
|
await lastLink.scrollIntoViewIfNeeded();
|
|
await lastLink.tap();
|
|
await expect(page).toHaveURL(new RegExp(`${href}$`));
|
|
});
|
|
|
|
// The Coach button's clearance is held by `shell-viewport.test.ts`: the
|
|
// button renders only with an AI provider, which the suite's accounts
|
|
// do not have, so a check here would never run.
|
|
test("main scrolls to its last line, clear of the bottom bar", async ({
|
|
page,
|
|
}) => {
|
|
await openDashboard(page);
|
|
await scrollMainToEnd(page);
|
|
const end = await measureMainEnd(page);
|
|
expect(end.scrolls).toBe(true);
|
|
expect(end.atEnd).toBe(true);
|
|
expect(end.contentBottom).toBeLessThanOrEqual(end.mainBottom + 0.5);
|
|
if (end.barTop !== null) {
|
|
expect(end.contentBottom).toBeLessThanOrEqual(end.barTop);
|
|
}
|
|
await expectShellPinned(page);
|
|
});
|
|
});
|
|
}
|
|
|
|
/** After a modal closes, the page behind takes pointer and wheel again and scrolls. */
|
|
async function expectPageScrollsAgain(page: Page, browserName: string) {
|
|
await expect
|
|
.poll(() =>
|
|
page.evaluate(() => ({
|
|
locked: document.body.hasAttribute("data-scroll-locked"),
|
|
pointer: getComputedStyle(document.body).pointerEvents,
|
|
})),
|
|
)
|
|
.toEqual({ locked: false, pointer: "auto" });
|
|
const before = await page.evaluate(() => {
|
|
const main = document.getElementById("main-content")!;
|
|
main.scrollTop = 0;
|
|
const r = main.getBoundingClientRect();
|
|
const x = r.left + r.width / 2;
|
|
const y = r.top + r.height / 2;
|
|
const hit = document.elementFromPoint(x, y);
|
|
const wheel = new WheelEvent("wheel", {
|
|
deltaY: 120,
|
|
bubbles: true,
|
|
cancelable: true,
|
|
clientX: x,
|
|
clientY: y,
|
|
});
|
|
hit?.dispatchEvent(wheel);
|
|
return {
|
|
onMain: !!hit && main.contains(hit),
|
|
blocked: wheel.defaultPrevented,
|
|
x,
|
|
y,
|
|
};
|
|
});
|
|
// Nothing invisible lies over `<main>`, and no scroll lock swallows the
|
|
// wheel (react-remove-scroll cancels it outside its own layer).
|
|
expect(before.onMain).toBe(true);
|
|
expect(before.blocked).toBe(false);
|
|
// A real wheel where the engine has one. Mobile WebKit under Playwright
|
|
// has none (and no native touch scroll), so there the two checks above
|
|
// are the proof: nothing covers `<main>` and nothing cancels its events.
|
|
if (browserName === "webkit") return;
|
|
await page.mouse.move(before.x, before.y);
|
|
await page.mouse.wheel(0, 600);
|
|
await expect
|
|
.poll(() =>
|
|
page.evaluate(() => document.getElementById("main-content")!.scrollTop),
|
|
)
|
|
.toBeGreaterThan(0);
|
|
}
|
|
|
|
const MODAL_VIEWPORTS = [
|
|
{ name: "iPad Air 11 landscape", width: 1180, height: 820 },
|
|
{ name: "iPad Air 11 portrait", width: 820, height: 1180 },
|
|
{ name: "Split View two thirds", width: 694, height: 1024 },
|
|
] as const;
|
|
|
|
for (const vp of MODAL_VIEWPORTS) {
|
|
test.describe(`${vp.name}: scroll after a modal`, () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.setViewportSize({ width: vp.width, height: vp.height });
|
|
});
|
|
|
|
test("the page scrolls after the command palette dialog closes", async ({
|
|
page,
|
|
browserName,
|
|
}) => {
|
|
await openDashboard(page);
|
|
await page.locator('[data-slot="command-palette-trigger"]:visible').tap();
|
|
const input = page.locator('[data-slot="command-palette-input"]');
|
|
await expect(input).toBeVisible();
|
|
// The scroll lock makes the body `position: relative`; the shell
|
|
// behind the dialog keeps the window's box all the same.
|
|
await expectShellPinned(page);
|
|
await page.keyboard.press("Escape");
|
|
await expect(input).toBeHidden();
|
|
await expectPageScrollsAgain(page, browserName);
|
|
});
|
|
|
|
test("the page scrolls after a sheet closes", async ({
|
|
page,
|
|
browserName,
|
|
}) => {
|
|
await openDashboard(page);
|
|
if (vp.width < 768) {
|
|
// The phone shell's More sheet: the draggable bottom sheet.
|
|
await page.locator('[data-testid="bottom-nav-more"]').tap();
|
|
const sheet = page.locator('[data-testid="bottom-nav-more-sheet"]');
|
|
await expect(sheet).toBeVisible();
|
|
await expectShellPinned(page);
|
|
await sheet.locator('[data-slot="sheet-close-button"]').tap();
|
|
await expect(sheet).toBeHidden();
|
|
} else {
|
|
// The day, a sheet from the right below 1280 px.
|
|
await mockDay(page);
|
|
const day = new Date(Date.now() - 86_400_000)
|
|
.toISOString()
|
|
.slice(0, 10);
|
|
await page.goto(`/?day=${day}`, { waitUntil: "domcontentloaded" });
|
|
const panel = page.locator('[data-slot="day-panel"]');
|
|
await expect(panel).toBeVisible();
|
|
await expectShellPinned(page);
|
|
await page.keyboard.press("Escape");
|
|
await expect(panel).toBeHidden();
|
|
}
|
|
await expectPageScrollsAgain(page, browserName);
|
|
});
|
|
});
|
|
}
|
|
|
|
test("a vertical swipe that starts on a tab strip is the page's", async ({
|
|
page,
|
|
}) => {
|
|
await page.setViewportSize({ width: 1180, height: 820 });
|
|
await page.goto("/checkups", { waitUntil: "domcontentloaded" });
|
|
const strip = page.locator('#main-content [data-slot="tabs-list"]').first();
|
|
await expect(strip).toBeVisible();
|
|
// `pan-x` here refused the vertical pan, so the page did not move.
|
|
const touchAction = await strip.evaluate(
|
|
(el) => getComputedStyle(el).touchAction,
|
|
);
|
|
expect(touchAction).toBe("auto");
|
|
});
|