test(cypress): convention de viewports téléphone/tablette #94

Merged

kyuno merged 7 commits from feat/mobile-cypress-viewports into main 2026-09-07 16:02:25 +02:00

Conversation 0 Commits 7 Files changed 5 +90 -11

kyuno commented 2026-09-07 12:32:56 +02:00

Owner

Copy link

Closes #83 — chantier "UI mobile & tablette".

Ce que ça change

Le repo n'avait aucun override de viewportWidth/viewportHeight ni pour
l'e2e ni pour les tests de composants — tout tournait à la taille par
défaut, jamais un vrai téléphone/une vraie tablette.

• cypress/support/viewports.ts — PHONE_VIEWPORT (390×844) et
  TABLET_VIEWPORT (900×1200), tailles Android réelles plutôt que les
  presets iPhone/iPad de Cypress (appli Android uniquement) — dans les
  bandes de _breakpoints.scss ($phone/$tablet, ticket #91), pas
  collées au pixel de bordure. Commande cy.setViewport("phone" | "tablet") (pas de surcharge du cy.viewport natif). Importé par
  support/e2e.ts et support/component.ts, disponible dans les deux
  modes.
• layout.cy.ts — les cy.viewport(...) en dur pour du téléphone
  (deux tests ajoutés par #91, plus les deux plus anciens du passage #39)
  migrent vers la commande partagée ; le test "au-dessus du point de
  rupture téléphone" passe à un vrai viewport tablette (900px) plutôt
  qu'un 1000×700 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) : vérifie le plein-écran sur téléphone du ticket
  #91, qui n'avait pas encore son propre test, et prouve au passage que
  cy.setViewport fonctionne en mode composant.

Trouvaille en vérifiant

Le mode composant de Cypress a son propre viewport par défaut, plus
petit que celui du mode e2e (1000×660) — déjà sous le seuil téléphone.
Le premier essai du test "desktop" de Dialog échouait pour cette raison
(le CSS plein-écran s'appliquait sans même appeler setViewport). Corrigé
en fixant un viewport large explicite pour ce cas plutôt que de compter
sur un défaut implicite.

Vérification

• tsc -b --force + biome check — propres.
• pnpm --filter web build — propre.
• Cypress e2e : 140/140, composants : 65/65 (incluant les 2
  nouveaux tests de Dialog.cy.tsx).

🤖 Generated with Claude Code

Closes #83 — chantier "UI mobile & tablette". ## Ce que ça change Le repo n'avait aucun override de `viewportWidth`/`viewportHeight` ni pour l'e2e ni pour les tests de composants — tout tournait à la taille par défaut, jamais un vrai téléphone/une vraie tablette. - **`cypress/support/viewports.ts`** — `PHONE_VIEWPORT` (390×844) et `TABLET_VIEWPORT` (900×1200), tailles Android réelles plutôt que les presets iPhone/iPad de Cypress (appli Android uniquement) — dans les bandes de `_breakpoints.scss` (`$phone`/`$tablet`, ticket #91), pas collées au pixel de bordure. Commande `cy.setViewport("phone" | "tablet")` (pas de surcharge du `cy.viewport` natif). Importé par `support/e2e.ts` et `support/component.ts`, disponible dans les deux modes. - **`layout.cy.ts`** — les `cy.viewport(...)` en dur pour du téléphone (deux tests ajoutés par #91, plus les deux plus anciens du passage #39) migrent vers la commande partagée ; le test "au-dessus du point de rupture téléphone" passe à un vrai viewport tablette (900px) plutôt qu'un `1000×700` 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`) : vérifie le plein-écran sur téléphone du ticket #91, qui n'avait pas encore son propre test, et prouve au passage que `cy.setViewport` fonctionne en mode composant. ## Trouvaille en vérifiant Le mode composant de Cypress a son **propre viewport par défaut, plus petit** que celui du mode e2e (1000×660) — déjà sous le seuil téléphone. Le premier essai du test "desktop" de `Dialog` échouait pour cette raison (le CSS plein-écran s'appliquait sans même appeler `setViewport`). Corrigé en fixant un viewport large explicite pour ce cas plutôt que de compter sur un défaut implicite. ## Vérification - `tsc -b --force` + `biome check` — propres. - `pnpm --filter web build` — propre. - Cypress **e2e : 140/140**, **composants : 65/65** (incluant les 2 nouveaux tests de `Dialog.cy.tsx`). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-07 12:32:57 +02:00

test(cypress): convention de viewports telephone/tablette ... 967be6df4a

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>

kyuno added 1 commit 2026-09-07 12:47:28 +02:00

chore: relance la CI (contention runner partage sur Postgres) ... d0d66bbda5

24 echecs melant timeouts 10s, "Unique constraint failed on the
fields: (key)" (race d'upsert concurrent au seed) et
PrismaClientInitializationError "Can't reach database server" -
combinaison connue de signatures de contention sur le Postgres partage
du runner (voir ci-forgejo-runner-constraints), pas une regression.
Ce ticket ne touche que des fichiers Cypress/apps-web, aucun code
touchant la base.

kyuno added 1 commit 2026-09-07 13:05:47 +02:00

chore: relance la CI (Postgres partage coupe en cours de run) ... 63615656cc

Can't reach database server at postgres:5432 / Server has closed the
connection - meme signature connue de contention runner que les
relances precedentes (voir ci-forgejo-runner-constraints), pas une
regression.

kyuno added 1 commit 2026-09-07 13:28:01 +02:00

chore: relance la CI (Postgres partage coupe en cours de run) ... 80c5b957d6

Can't reach database server at postgres:5432 / Server has closed the
connection - meme signature connue de contention runner que les
relances precedentes (voir ci-forgejo-runner-constraints), pas une
regression.

kyuno added 1 commit 2026-09-07 13:45:39 +02:00

chore: relance la CI (Postgres partage coupe en cours de run) ... 8d75462066

Can't reach database server at postgres:5432 / Server has closed the
connection - meme signature connue de contention runner que les
relances precedentes (voir ci-forgejo-runner-constraints), pas une
regression.

kyuno added 1 commit 2026-09-07 14:32:41 +02:00

merge: rapatrie le correctif de serialisation CI (#96) 1a5731bb79

kyuno added 1 commit 2026-09-07 15:19:00 +02:00

chore: relance la CI (residu mineur de contention, 460/468 passants) ... c39fbaeb13

Le wait-step a fonctionne (~21 min d'attente puis "proceeding"), mais un
petit residu de contention subsiste : 460 passing / 8 failing, meme
signature connue (timeout 10s + unique constraint sur key). Nette
amelioration par rapport a avant le correctif (auparavant ~280-410
passing / 14-25 failing) - la file se vide au fur et a mesure que les
autres PR terminent (#93 et #96 deja mergees).

kyuno merged commit 23bc19b482 into main 2026-09-07 16:02:25 +02:00

kyuno referenced this pull request from a commit 2026-09-07 16:02:27 +02:00

Merge pull request 'test(cypress): convention de viewports téléphone/tablette' (#94) from feat/mobile-cypress-viewports into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

High

  

Low

  

Medium

  

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

planned

  

question

More information is needed

  

to plan

  

wontfix

This won't be fixed

No labels

High

Low

Medium

bug

duplicate

enhancement

help wanted

invalid

planned

question

to plan

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: kyuno/batchCooking#94

No description provided.