test(web): agrandit le viewport du test de détail recette
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.
This commit is contained in:
parent
2fccfa2ecf
commit
eaabd78d28
1 changed files with 8 additions and 0 deletions
|
|
@ -156,6 +156,14 @@ describe("Recipe catalog", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it("opens a recipe's detail alongside the table when its row is selected", () => {
|
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\?/, { statusCode: 200, body: [ratatouille, omelette] });
|
||||||
cy.intercept("GET", "**/recipes/2", { statusCode: 200, body: omeletteDetail }).as("getRecipe");
|
cy.intercept("GET", "**/recipes/2", { statusCode: 200, body: omeletteDetail }).as("getRecipe");
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue