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>
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import { Dialog } from "../../src/components/ui/Dialog";
|
|
import { PHONE_VIEWPORT } from "../support/viewports";
|
|
|
|
// First component test for Dialog — until now it was only exercised
|
|
// indirectly through RecipePickerDialog's own e2e coverage. Added here
|
|
// specifically to prove `cy.setViewport()` (mobile/tablet UI chantier,
|
|
// ticket #83) works correctly in component-test mode too, not just e2e —
|
|
// and along the way, covers the phone full-screen treatment (ticket #91)
|
|
// that had no test of its own yet.
|
|
|
|
describe("Dialog — phone full-screen treatment", () => {
|
|
it("is a centered, rounded panel with room around it at a desktop viewport", () => {
|
|
// Component testing's own default viewport (unlike e2e's) is already
|
|
// phone-sized — an explicit wide viewport here, not just "whatever the
|
|
// default is", is what actually makes this the desktop case.
|
|
const desktopWidth = 1280;
|
|
cy.viewport(desktopWidth, 800);
|
|
cy.mount(
|
|
<Dialog title="Titre" onClose={() => {}}>
|
|
Contenu
|
|
</Dialog>,
|
|
);
|
|
|
|
cy.get(".dialog-panel").should(($el) => {
|
|
const style = getComputedStyle($el[0]);
|
|
expect(style.borderRadius).to.not.equal("0px");
|
|
expect($el[0].getBoundingClientRect().width).to.be.lessThan(desktopWidth);
|
|
});
|
|
});
|
|
|
|
it("goes edge-to-edge, with no rounding, at a phone viewport", () => {
|
|
cy.setViewport("phone");
|
|
cy.mount(
|
|
<Dialog title="Titre" onClose={() => {}}>
|
|
Contenu
|
|
</Dialog>,
|
|
);
|
|
|
|
cy.get(".dialog-panel").should(($el) => {
|
|
const style = getComputedStyle($el[0]);
|
|
expect(style.borderRadius).to.equal("0px");
|
|
const rect = $el[0].getBoundingClientRect();
|
|
expect(rect.width).to.be.closeTo(PHONE_VIEWPORT.width, 1);
|
|
expect(rect.height).to.be.closeTo(PHONE_VIEWPORT.height, 1);
|
|
});
|
|
});
|
|
});
|