From 0fbc3e8e48ca3633a8fbf4364e693fa2545a64e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 22:05:50 +0200
Subject: [PATCH] test(e2e): cover the ResponsiveSheet mobile branch and the
 desktop fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 e2e/v1427-responsive-sheet.spec.ts | 92 ++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 e2e/v1427-responsive-sheet.spec.ts

diff --git a/e2e/v1427-responsive-sheet.spec.ts b/e2e/v1427-responsive-sheet.spec.ts
new file mode 100644
index 000000000..90a83edcc
--- /dev/null
+++ b/e2e/v1427-responsive-sheet.spec.ts
@@ -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");
+  });
+});