[UI mobile] Tests Cypress ciblant téléphone et tablette #83

New issue

Closed

opened 2026-09-07 11:32:45 +02:00 by kyuno · 0 comments

kyuno commented

2026-09-07 11:32:45 +02:00

Owner

Résumé

Établir une convention de test Cypress ciblant des viewports téléphone et
tablette, aujourd'hui totalement absente du repo (apps/web/cypress.config.ts
n'a aucun override de viewportWidth/viewportHeight, tout tourne à la
taille par défaut ~1000×660). Fait partie du chantier "UI mobile & tablette"
(voir le ticket socle de ce même chantier pour le contexte complet).

Pourquoi maintenant

Les autres tickets de ce chantier (nav mobile, grille planning, popovers,
session de cuisine...) vont introduire de vraies variantes mobile — sans
convention de test dédiée, ces variantes ne seraient exercées par AUCUN
test automatisé, seulement la variante desktop par défaut.

Contenu attendu

Deux presets de viewport (téléphone / tablette), dérivés des breakpoints
nommés introduits par le ticket socle (--breakpoint-phone/
--breakpoint-tablet dans _theme.scss) plutôt que des nombres en dur
redondants entre specs.
Exposés via une commande Cypress support (ex. cy.viewport('phone' | 'tablet')) dans cypress/support/, réutilisable par tout spec futur —
pas une valeur copiée-collée par fichier.
Appliqué en premier lieu à la nouvelle nav mobile du ticket socle : un
spec layout/composant (layout.cy.ts/sidebar.cy.ts ou nouveau fichier
dédié) + un scénario e2e représentatif.
Documenté (commentaire dans le fichier support de Cypress) pour que les
tickets suivants du chantier le réutilisent au fur et à mesure de leur
propre implémentation, sans redéfinir la convention à chaque fois.

Dépendances

Dépend du ticket socle (nav/popovers/dialogs mobile-natifs) — teste la
vraie nav mobile, pas l'actuelle barre horizontale.

Hors scope

Convertir TOUS les specs existants aux nouveaux viewports — seulement
établir la convention + l'appliquer à la nav. Les autres pages l'adoptent
dans leur propre ticket au fil de leur implémentation.

## Résumé Établir une convention de test Cypress ciblant des viewports téléphone et tablette, aujourd'hui totalement absente du repo (`apps/web/cypress.config.ts` n'a aucun override de `viewportWidth`/`viewportHeight`, tout tourne à la taille par défaut ~1000×660). Fait partie du chantier "UI mobile & tablette" (voir le ticket socle de ce même chantier pour le contexte complet). ## Pourquoi maintenant Les autres tickets de ce chantier (nav mobile, grille planning, popovers, session de cuisine...) vont introduire de vraies variantes mobile — sans convention de test dédiée, ces variantes ne seraient exercées par AUCUN test automatisé, seulement la variante desktop par défaut. ## Contenu attendu - Deux presets de viewport (téléphone / tablette), dérivés des breakpoints nommés introduits par le ticket socle (`--breakpoint-phone`/ `--breakpoint-tablet` dans `_theme.scss`) plutôt que des nombres en dur redondants entre specs. - Exposés via une commande Cypress support (ex. `cy.viewport('phone' | 'tablet')`) dans `cypress/support/`, réutilisable par tout spec futur — pas une valeur copiée-collée par fichier. - Appliqué en premier lieu à la nouvelle nav mobile du ticket socle : un spec layout/composant (`layout.cy.ts`/`sidebar.cy.ts` ou nouveau fichier dédié) + un scénario e2e représentatif. - Documenté (commentaire dans le fichier support de Cypress) pour que les tickets suivants du chantier le réutilisent au fur et à mesure de leur propre implémentation, sans redéfinir la convention à chaque fois. ## Dépendances Dépend du ticket socle (nav/popovers/dialogs mobile-natifs) — teste la vraie nav mobile, pas l'actuelle barre horizontale. ## Hors scope Convertir TOUS les specs existants aux nouveaux viewports — seulement établir la convention + l'appliquer à la nav. Les autres pages l'adoptent dans leur propre ticket au fil de leur implémentation.