Nicolas
7d1a69cf12
Some checks failed
Deux correctifs, regroupés en un seul ticket comme prévu : - Catalogue de recettes (`recipes.scss`) : `.recipe-table-wrap` n'avait aucun garde-fou de scroll horizontal, contrairement à la grille planning — sur un viewport étroit, les 4 colonnes (photo/nom/ allergènes/régimes) se compressaient au lieu de scroller. Ajout d'`overflow-x: auto` sur le wrapper + `min-width: 36rem` sur la table (échelle réduite par rapport aux 62rem de la grille planning : 4 colonnes plus étroites, pas 7). Partagé par le catalogue complet ET par `RecipePickerDialog`, qui hérite du même correctif au passage. - Liste de courses (`shopping-list-page.scss`) : audit dédié — la page n'a en réalité aucune case à cocher ni bouton de suppression (elle est volontairement en lecture seule, voir le commentaire de ShoppingListPage.tsx), contrairement à ce que supposait le ticket d'origine ; rien à agrandir comme cible tactile de ce côté. La structure ne déborde déjà pas non plus (`&-name` a déjà flex:1/ min-width:0). Amélioration retenue à la place : une ligne un peu plus aérée et une icône plus grande sous le breakpoint phone, pour une lecture plus confortable en faisant les courses (liste tenue d'une main, coups d'œil répétés). Couverture Cypress : nouveau describe "Recipe catalog (phone)" dans recipes.cy.ts (garde-fou de scroll horizontal effectivement actif) ; nouveau fichier shopping-list-page.cy.ts, spec layout simple (pas Gherkin, cette page n'a pas encore ce type de fichier) pour le padding de ligne. Suite complète : biome check, tsc -b --force, build, 146/146 e2e, 71/71 composants (un skip ponctuel de TechStepCorrectionPopover en run groupé, reconfirmé 10/10 isolément — flake local sans lien avec ce ticket) — tous verts. Closes #90 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
// Plain layout-mode spec (not Gherkin) for ShoppingListPage's own
|
|
// phone-viewport pass (issue #90) — the actual grouped-list rendering,
|
|
// aggregation and week-navigation journey is already covered end-to-end by
|
|
// shopping-list.feature; this only exercises the responsive change added
|
|
// here. Mocks the API via cy.intercept — this job doesn't run a live
|
|
// backend (see .github/workflows/ci.yml).
|
|
|
|
import { PHONE_VIEWPORT } from "../support/viewports";
|
|
|
|
const authenticatedProfile = {
|
|
id: 1,
|
|
firstName: "Alice",
|
|
lastName: "Martin",
|
|
email: "alice@example.com",
|
|
tokenVersion: 0,
|
|
houseId: 1,
|
|
dietId: null,
|
|
};
|
|
|
|
/** Same minimal-fixture convention as shopping-list.ts's own `buildShoppingListItem` step-def helper — only the fields this page actually reads. */
|
|
function shoppingListItem(id: number, ingredientKey: string, icon: string, category: string) {
|
|
return {
|
|
ingredient: {
|
|
id,
|
|
key: ingredientKey,
|
|
icon,
|
|
category,
|
|
subcategory: category,
|
|
reproducible: false,
|
|
allergens: [],
|
|
diets: [],
|
|
},
|
|
quantity: 2,
|
|
unit: { id, key: "piece", type: "COUNT", toBaseFactor: 1 },
|
|
};
|
|
}
|
|
|
|
describe("Shopping list page (phone)", () => {
|
|
beforeEach(() => {
|
|
cy.setViewport("phone");
|
|
cy.intercept("GET", "**/auth/me", { statusCode: 200, body: authenticatedProfile });
|
|
});
|
|
|
|
it("gives each row a taller, more legible padding than on desktop, with no horizontal body scroll", () => {
|
|
cy.intercept("GET", /\/shopping-list\?/, {
|
|
statusCode: 200,
|
|
body: {
|
|
startDate: "2026-08-17",
|
|
finishDate: "2026-08-23",
|
|
items: [shoppingListItem(1, "egg", "EGG", "dairyAndCheese")],
|
|
},
|
|
}).as("getList");
|
|
|
|
cy.visit("/liste-de-courses");
|
|
cy.wait("@getList");
|
|
|
|
cy.get(".shopping-list__item").should(($el) => {
|
|
// --space-md (16px) on phone vs. the desktop default --space-sm
|
|
// (8px) — see shopping-list-page.scss's phone block.
|
|
expect(getComputedStyle($el[0]).paddingTop).to.equal("16px");
|
|
});
|
|
|
|
cy.document()
|
|
.its("documentElement.scrollWidth")
|
|
.should("be.lte", PHONE_VIEWPORT.width + 1);
|
|
});
|
|
});
|