Nicolas
967be6df4a
Some checks failed
Ticket #83 du chantier UI mobile & tablette. Le repo n'avait aucun override de viewportWidth/Height ni pour e2e ni pour les tests de composants - tout tournait a la taille par defaut, jamais un vrai telephone/une vraie tablette. - cypress/support/viewports.ts : PHONE_VIEWPORT (390x844) et TABLET_VIEWPORT (900x1200), tailles Android reelles plutot que les presets iPhone/iPad de Cypress (appli Android uniquement) - dans les bandes de _breakpoints.scss ($phone/$tablet du ticket #91), pas collees au pixel de bordure. Commande cy.setViewport("phone" | "tablet") (pas de surcharge du cy.viewport natif). Importe par support/e2e.ts et support/component.ts, disponible dans les deux modes. - layout.cy.ts : les cy.viewport(...) en dur pour du telephone (deux tests ajoutes par #91, plus les deux plus anciens du passage #39) et le test "au-dessus du point de rupture telephone" migrent vers la commande partagee - ce dernier passe a un vrai viewport tablette (900px, dans la bande 641-1024) plutot qu'un 1000x700 arbitraire, prouvant au passage que le preset tablette fonctionne. - Nouveau cypress/component/Dialog.cy.tsx : premier test de Dialog en isolation (jusqu'ici seulement couvert indirectement via RecipePickerDialog) - verifie le plein-ecran sur telephone du ticket #91, qui n'avait pas encore son propre test, et prouve au passage que cy.setViewport fonctionne en mode composant. Trouvaille en verifiant : le mode composant de Cypress a son propre viewport par defaut, plus petit que celui du mode e2e (1000x660) - deja sous le seuil telephone. Le premier essai du test "desktop" de Dialog echouait pour cette raison (le CSS plein-ecran s'appliquait sans meme appeler setViewport). Corrige en fixant un viewport large explicite pour ce cas plutot que de compter sur un defaut implicite - note ajoutee a dev-environment-gotchas pour la prochaine fois. Verifie en local : tsc -b --force, biome check, build de prod, suite Cypress e2e complete (140/140) et composants (65/65, incluant les 2 nouveaux tests de Dialog.cy.tsx). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
30 lines
1.4 KiB
TypeScript
30 lines
1.4 KiB
TypeScript
// 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);
|
|
});
|