Nicolas
70a77ddf0f
Étape 1 du refactor (voir PR) : met en place le vrai mode Component Testing de Cypress, séparé de l'e2e — monte un composant React isolé (pas de routeur, pas de backend), pour tester les composants génériques (components/ui/) indépendamment de tout parcours utilisateur. - cypress.config.ts : nouveau bloc `component` (devServer Vite, réutilise vite.config.ts de l'appli — même plugin React, même Sass). Le hook GPU-disable est factorisé (`disableGpu`) puisque e2e et component ont chacun leur propre `setupNodeEvents`, pas de config partagée par défaut. - cypress/support/component.ts + component-index.html : fichiers de support standards Cypress CT — importe le vrai global.scss de l'appli (les composants génériques sont stylés via lui, pas de CSS scopé à eux). - cypress/component/CheckboxOption.cy.tsx : 4 scénarios sur components/ui/Checkbox.tsx (rendu du label, reflet du prop `checked` sur l'input natif + la classe `is-selected`, callback `onChange` avec la valeur inversée, comportement contrôlé via un wrapper avec état). Dépendance ajoutée, épinglée : @cypress/vite-dev-server@5.2.1 (dernière version sans peer dependency cypress >=14 — 6.0.3+ l'exige explicitement, on est sur cypress@13.17.0). Testé en local jusqu'au mur GPU/Electron habituel (config + devServer Vite chargent sans erreur) — l'exécution réelle du montage reste à vérifier via la CI.
15 lines
450 B
TypeScript
15 lines
450 B
TypeScript
import { mount } from "cypress/react18";
|
|
// Same global stylesheet the real app loads (see src/main.tsx) — generic
|
|
// components (Checkbox, Radio, Dialog…) are styled through it, not their
|
|
// own scoped CSS, so mounting one without it would test unstyled markup.
|
|
import "../../src/styles/global.scss";
|
|
|
|
declare global {
|
|
namespace Cypress {
|
|
interface Chainable {
|
|
mount: typeof mount;
|
|
}
|
|
}
|
|
}
|
|
|
|
Cypress.Commands.add("mount", mount);
|