From eaabd78d28fde6b3980fb25445468ac66e949ee2 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Wed, 19 Aug 2026 10:37:44 +0200 Subject: [PATCH] =?UTF-8?q?test(web):=20agrandit=20le=20viewport=20du=20te?= =?UTF-8?q?st=20de=20d=C3=A9tail=20recette?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dernier morceau de la même régression : la grille catalogue+panneau (master-detail) est un layout desktop, comme la grille de planning (voir planning-page.cy.ts's `cy.viewport(1600, 900)`, même justification). Au viewport par défaut de Cypress (1000×660), le panneau de détail n'a tout simplement pas assez de hauteur pour afficher photo + en-tête + ingrédients + étapes sans avoir besoin de scroller en interne — c'est le comportement voulu de `.recipe-detail-panel` (`overflow-y: auto`, voir son commentaire dans recipes.scss), pas un bug. Ce n'était jamais visible avant que `.app-layout` ait une vraie hauteur bornée (voir les 2 commits précédents) : tout grandissait sans limite, donc rien n'avait jamais besoin de scroller pour être visible. Reproduit en rejouant le flow exact du test dans le navigateur (visite /recettes, clic sur la ligne Omelette, pas juste une navigation directe vers /recettes/2 — la simple navigation directe ne reproduisait pas l'échec) : à 1000×660 la description était bien coupée (descWithinPanel: false) ; à 1600×900 tout rentre. --- apps/web/cypress/e2e/recipes.cy.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/web/cypress/e2e/recipes.cy.ts b/apps/web/cypress/e2e/recipes.cy.ts index 318a410..f7a065c 100644 --- a/apps/web/cypress/e2e/recipes.cy.ts +++ b/apps/web/cypress/e2e/recipes.cy.ts @@ -156,6 +156,14 @@ describe("Recipe catalog", () => { }); it("opens a recipe's detail alongside the table when its row is selected", () => { + // Desktop-only master-detail layout, same reasoning as + // planning-page.cy.ts's "Planning grid" tests — wider/taller than + // Cypress's default 1000×660, which doesn't leave the detail panel + // (photo + header + ingredients + steps) enough height to show + // everything without needing its own internal scroll (by design, see + // `.recipe-detail-panel` in recipes.scss) — this test asserts full + // visibility without scrolling, so it needs the room. + cy.viewport(1600, 900); cy.intercept("GET", /\/recipes\?/, { statusCode: 200, body: [ratatouille, omelette] }); cy.intercept("GET", "**/recipes/2", { statusCode: 200, body: omeletteDetail }).as("getRecipe");