apps/web/cypress/component/Dialog.cy.tsx

@@ -1,47 +0,0 @@
-import { Dialog } from "../../src/components/ui/Dialog";
-import { PHONE_VIEWPORT } from "../support/viewports";
-
-// First component test for Dialog — until now it was only exercised
-// indirectly through RecipePickerDialog's own e2e coverage. Added here
-// specifically to prove `cy.setViewport()` (mobile/tablet UI chantier,
-// ticket #83) works correctly in component-test mode too, not just e2e —
-// and along the way, covers the phone full-screen treatment (ticket #91)
-// that had no test of its own yet.
-
-describe("Dialog — phone full-screen treatment", () => {
-  it("is a centered, rounded panel with room around it at a desktop viewport", () => {
-    // Component testing's own default viewport (unlike e2e's) is already
-    // phone-sized — an explicit wide viewport here, not just "whatever the
-    // default is", is what actually makes this the desktop case.
-    const desktopWidth = 1280;
-    cy.viewport(desktopWidth, 800);
-    cy.mount(
-      <Dialog title="Titre" onClose={() => {}}>
-        Contenu
-      </Dialog>,
-    );
-
-    cy.get(".dialog-panel").should(($el) => {
-      const style = getComputedStyle($el[0]);
-      expect(style.borderRadius).to.not.equal("0px");
-      expect($el[0].getBoundingClientRect().width).to.be.lessThan(desktopWidth);
-    });
-  });
-
-  it("goes edge-to-edge, with no rounding, at a phone viewport", () => {
-    cy.setViewport("phone");
-    cy.mount(
-      <Dialog title="Titre" onClose={() => {}}>
-        Contenu
-      </Dialog>,
-    );
-
-    cy.get(".dialog-panel").should(($el) => {
-      const style = getComputedStyle($el[0]);
-      expect(style.borderRadius).to.equal("0px");
-      const rect = $el[0].getBoundingClientRect();
-      expect(rect.width).to.be.closeTo(PHONE_VIEWPORT.width, 1);
-      expect(rect.height).to.be.closeTo(PHONE_VIEWPORT.height, 1);
-    });
-  });
-});

apps/web/cypress/e2e/layout.cy.ts

@@ -11,8 +11,6 @@
 // width (some stuck to the left edge with a lopsided gap, others correctly
 // full-bleed).
 
-import { PHONE_VIEWPORT } from "../support/viewports";
-
 const authenticatedProfile = {
   id: 1,
   firstName: "Alice",
@@ -187,7 +185,7 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
   });
 
   it("renders the bottom nav instead of the sidebar, with every route tab legible and a working Plus tab", () => {
-    cy.setViewport("phone");
+    cy.viewport(375, 812);
     cy.visit("/");
 
     // The desktop sidebar isn't just hidden — it's not in the DOM at all.
@@ -195,10 +193,10 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
 
     cy.get(".app-bottom-nav").should(($nav) => {
       const rect = $nav[0].getBoundingClientRect();
-      expect(rect.width).to.be.closeTo(PHONE_VIEWPORT.width, 1);
+      expect(rect.width).to.be.closeTo(375, 1);
       // A short bar flush against the bottom edge, not a tall rail.
       expect(rect.height).to.be.lessThan(120);
-      expect(rect.bottom).to.be.closeTo(PHONE_VIEWPORT.height, 1);
+      expect(rect.bottom).to.be.closeTo(812, 1);
       expect(getComputedStyle($nav[0]).position).to.equal("fixed");
     });
 
@@ -240,8 +238,8 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
     cy.get(".bottom-sheet").should("not.exist");
   });
 
-  it("keeps the desktop sidebar (not the bottom nav) at a tablet viewport", () => {
+  it("keeps the desktop sidebar (not the bottom nav) above the phone breakpoint", () => {
-    cy.setViewport("tablet");
+    cy.viewport(1000, 700);
     cy.visit("/");
 
     cy.get(".app-sidebar").should("exist");
@@ -250,6 +248,8 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
 });
 
 describe("Responsive breakpoint — page content under 640px (issue #39)", () => {
+  const PHONE: [number, number] = [375, 812];
+
   beforeEach(() => {
     interceptAuth();
   });
@@ -266,7 +266,7 @@ describe("Responsive breakpoint — page content under 640px (issue #39)", () =>
       expect(s.paddingLeft).to.equal("32px");
     });
 
-    cy.setViewport("phone");
+    cy.viewport(...PHONE);
     cy.visit("/");
     cy.get(".app-content").should(($el) => {
       const s = getComputedStyle($el[0]);
@@ -298,7 +298,7 @@ describe("Responsive breakpoint — page content under 640px (issue #39)", () =>
       },
     });
 
-    cy.setViewport("phone");
+    cy.viewport(...PHONE);
     cy.visit("/");
 
     // The grid wrapper is the scroll container, and its content is genuinely
@@ -313,7 +313,7 @@ describe("Responsive breakpoint — page content under 640px (issue #39)", () =>
     // body).
     cy.document()
       .its("documentElement.scrollWidth")
-      .should("be.lte", PHONE_VIEWPORT.width + 1);
+      .should("be.lte", 375 + 1);
 
     // The per-recipe remove "✕" is hover-gated on desktop; on touch it must
     // be permanently visible or a planned recipe can't be removed at all.

apps/web/cypress/support/component.ts

@@ -3,8 +3,6 @@ import { mount } from "cypress/react18";
 // components (Checkbox, Radio, Dialog…) are styled through it, not their
 // own scoped CSS, so mounting one without it would test unstyled markup.
 import "../../src/styles/global.scss";
-// Registers `cy.setViewport("phone" | "tablet")` — see viewports.ts.
-import "./viewports";
 
 declare global {
   namespace Cypress {

apps/web/cypress/support/e2e.ts

@@ -1,3 +1,3 @@
 // Cypress support file — global config and custom commands will go here
 // as features (and their e2e specs) get added.
-import "./viewports";
+export {};

apps/web/cypress/support/viewports.ts

@@ -1,30 +0,0 @@
-// Named viewport presets for phone/tablet coverage — the mobile/tablet UI
-// chantier's testing convention (ticket #83), shared by both the e2e and
-// component support files (see e2e.ts/component.ts, each of which imports
-// this once for its side effect of registering `cy.setViewport`).
-//
-// Sized from real, representative Android devices rather than Cypress's own
-// built-in presets (`cy.viewport("iphone-x")` etc.) — this app is
-// Android-only (see the root README), so an Apple-named preset would be a
-// odd source of truth to borrow pixel values from. Comfortably inside
-// `_breakpoints.scss`'s `$phone`/`$tablet` bands (not flush against either
-// edge) so a test genuinely exercises "a phone" / "a tablet", not the exact
-// boundary pixel.
-export const PHONE_VIEWPORT = { width: 390, height: 844 } as const;
-export const TABLET_VIEWPORT = { width: 900, height: 1200 } as const;
-
-export type ViewportPreset = "phone" | "tablet";
-
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      /** `cy.viewport(width, height)` for one of the mobile/tablet UI chantier's two named presets — see PHONE_VIEWPORT/TABLET_VIEWPORT above for the exact values. */
-      setViewport(preset: ViewportPreset): Chainable<void>;
-    }
-  }
-}
-
-Cypress.Commands.add("setViewport", (preset: ViewportPreset) => {
-  const { width, height } = preset === "phone" ? PHONE_VIEWPORT : TABLET_VIEWPORT;
-  cy.viewport(width, height);
-});