mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
test(e2e): cover the ResponsiveSheet mobile branch and the desktop fallback
Add Pixel-5 and Desktop-Chrome assertions that the Add-Measurement form opens the primitive's correct branch — bottom Sheet with sticky footer on `<md`, centred Dialog on `>=md`. Pins on `data-variant` so the test stays stable across class-name churn.
This commit is contained in:
1 parent
674c6b5b70
commit
0fbc3e8e48
1 file changed
+92
@@ -0,0 +1,92 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
import { STORAGE_STATE_PATH } from "./setup/global-setup";
|
||||
|
||||
/**
|
||||
* v1.4.27 R3d MB1 — `<ResponsiveSheet>` primitive branch coverage.
|
||||
*
|
||||
* The primitive renders as a bottom-anchored `<Sheet>` on `<md` (768
|
||||
* px) viewports and as a centred `<Dialog>` on `>=md`. Every primary
|
||||
* form (Measurement, Mood, Medication) now mounts through the
|
||||
* primitive — opening the Add-Measurement dialog from `/measurements`
|
||||
* exercises the path end-to-end.
|
||||
*
|
||||
* The spec scopes itself by project name (Pixel 5 mobile vs Desktop
|
||||
* Chrome) and asserts on the `data-variant` attribute that the
|
||||
* primitive stamps onto its content node (`sheet` on `<md`,
|
||||
* `dialog` on `>=md`). The sticky-footer pin only exists on the
|
||||
* Sheet branch — assert it carries the documented sticky class.
|
||||
*/
|
||||
test.describe("v1.4.27 — ResponsiveSheet branch", () => {
|
||||
test.use({ storageState: STORAGE_STATE_PATH });
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Empty analytics + list keeps the page fast and deterministic.
|
||||
await page.route("**/api/analytics", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
data: { summaries: {}, bpInTargetPct: null, glucoseByContext: {} },
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
await page.route("**/api/measurements*", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
data: { measurements: [], meta: { total: 0 } },
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
test("Pixel 5: Add-Measurement mounts as a bottom Sheet with sticky footer", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
testInfo.project.name !== "chromium-mobile",
|
||||
"Pixel 5 mobile-only branch",
|
||||
);
|
||||
|
||||
await page.goto("/measurements?add=WEIGHT", {
|
||||
waitUntil: "domcontentloaded",
|
||||
});
|
||||
|
||||
const content = page.locator(
|
||||
'[data-slot="responsive-sheet-content"]',
|
||||
);
|
||||
await expect(content).toBeVisible({ timeout: 10_000 });
|
||||
await expect(content).toHaveAttribute("data-variant", "sheet");
|
||||
|
||||
// Sticky footer slot lives inside the Sheet branch. The primitive
|
||||
// pins it via `sticky bottom-0` — assert the class is present.
|
||||
const footer = page.locator('[data-slot="responsive-sheet-footer"]');
|
||||
await expect(footer).toBeAttached();
|
||||
const footerClass = (await footer.getAttribute("class")) ?? "";
|
||||
expect(footerClass).toMatch(/sticky/);
|
||||
expect(footerClass).toMatch(/bottom-0/);
|
||||
});
|
||||
|
||||
test("Desktop Chrome: Add-Measurement mounts as a centred Dialog", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
testInfo.project.name !== "chromium-desktop",
|
||||
"desktop-only branch",
|
||||
);
|
||||
|
||||
await page.goto("/measurements?add=WEIGHT", {
|
||||
waitUntil: "domcontentloaded",
|
||||
});
|
||||
|
||||
const content = page.locator(
|
||||
'[data-slot="responsive-sheet-content"]',
|
||||
);
|
||||
await expect(content).toBeVisible({ timeout: 10_000 });
|
||||
await expect(content).toHaveAttribute("data-variant", "dialog");
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user