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.
56 lines
2 KiB
TypeScript
56 lines
2 KiB
TypeScript
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
|
|
import { createEsbuildPlugin } from "@badeball/cypress-cucumber-preprocessor/esbuild";
|
|
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
|
|
import { devServer } from "@cypress/vite-dev-server";
|
|
import { defineConfig } from "cypress";
|
|
import viteConfig from "./vite.config";
|
|
|
|
// Disable GPU for headless/sandboxed environments (e.g. CI containers) where
|
|
// no GPU device is available — needed by both e2e and component testing,
|
|
// each of which has its own independent `setupNodeEvents`.
|
|
function disableGpu(on: Cypress.PluginEvents) {
|
|
on("before:browser:launch", (browser, launchOptions) => {
|
|
if (browser.family === "chromium") {
|
|
launchOptions.args.push("--disable-gpu", "--no-sandbox");
|
|
}
|
|
return launchOptions;
|
|
});
|
|
}
|
|
|
|
export default defineConfig({
|
|
e2e: {
|
|
baseUrl: "http://localhost:5173",
|
|
// User journeys, Gherkin-driven (see docs/testing.md once written) live
|
|
// alongside plain layout-focused `.cy.ts` specs here — both matched by
|
|
// this pattern. Generic component tests are separate, see `component`
|
|
// below.
|
|
specPattern: ["cypress/e2e/**/*.cy.ts", "cypress/e2e/**/*.feature"],
|
|
async setupNodeEvents(on, config) {
|
|
disableGpu(on);
|
|
|
|
await addCucumberPreprocessorPlugin(on, config);
|
|
on(
|
|
"file:preprocessor",
|
|
createBundler({
|
|
plugins: [createEsbuildPlugin(config)],
|
|
}),
|
|
);
|
|
|
|
return config;
|
|
},
|
|
},
|
|
|
|
// Mounts one generic UI component at a time (components/ui/*), no
|
|
// router/backend involved — separate from the e2e suite above, which
|
|
// always exercises a full routed page. Reuses the app's own vite.config.ts
|
|
// (same React plugin, same Sass setup) rather than duplicating it.
|
|
component: {
|
|
specPattern: "cypress/component/**/*.cy.tsx",
|
|
devServer(devServerConfig) {
|
|
return devServer({ ...devServerConfig, viteConfig });
|
|
},
|
|
setupNodeEvents(on) {
|
|
disableGpu(on);
|
|
},
|
|
},
|
|
});
|