fix(frontend): use import.meta.env.MODE instead of DEV for testid directive

During E2E testing with Playwright (via `mage test:e2e`), the frontend is built using Vite with `--mode development`. However, Vite hardcodes `process.env.NODE_ENV` to `production` during the build step, which causes `import.meta.env.DEV` to statically evaluate to `false`.

Because the `v-cy` custom testing directive relied on the `DEV` flag, it silently evaluated to false and failed to render the `data-cy` attributes into the DOM during the test build. This caused test failures because Playwright could not locate the elements.

Changing the check to explicitly evaluate `import.meta.env.MODE === 'development'` successfully bypasses the Vite build behavior, ensuring that `data-cy` testing attributes are consistently rendered during E2E tests.

For more context on Vite's build behavior regarding `DEV` and development mode, see:
https://github.com/vitejs/vite/discussions/14083
This commit is contained in:
Xela 2026-04-21 15:59:14 -08:00 committed by kolaente
parent d2cac283c7
commit cbd5bf8d94
1 changed files with 1 additions and 1 deletions

View File

@ -10,7 +10,7 @@ declare global {
// In dev mode, always enable. In production, check window.TESTING which can be
// injected into index.html before serving (e.g., by CI or test runner)
function isTestingEnabled(): boolean {
return import.meta.env.DEV || window.TESTING === true
return import.meta.env.MODE === 'development' || window.TESTING === true
}
const testIdDirective = <Directive<HTMLElement,string>>{