Merge pull request #1239 from joshunrau/fix-test

fix issue with tests failing due to `VITE_DEV_BYPASS_AUTH` being used

Author: joshunrau

apps/web/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "tsc && NODE_ENV=production NODE_OPTIONS='--import=tsx' pnpm exec vite build",
     "dev": "NODE_ENV=development NODE_OPTIONS='--import=tsx' env-cmd -f ../../.env pnpm exec vite",
-    "dev:test": "NODE_ENV=test NODE_OPTIONS='--import=tsx' env-cmd -f ../../.env pnpm exec vite",
+    "dev:test": "NODE_ENV=test NODE_OPTIONS='--import=tsx' env-cmd -f ../../.env pnpm exec vite --mode test",
     "format": "prettier --write src",
     "format:translations": "find src/translations -name '*.json' -exec pnpm exec sort-json {} \\;",
     "inject": "pnpm exec import-meta-env -x .env.public -p dist/index.html",

apps/web/src/routes/auth/login.tsx

@@ -80,7 +80,7 @@ const RouteComponent = () => {
 
 export const Route = createFileRoute('/auth/login')({
   beforeLoad: async () => {
-    if (import.meta.env.DEV && config.dev.isBypassAuthEnabled) {
+    if (import.meta.env.DEV && import.meta.env.MODE !== 'test' && config.dev.isBypassAuthEnabled) {
       const { login } = useAppStore.getState();
       const response = await loginRequest({
         password: config.dev.password!,

apps/web/src/services/axios.ts

@@ -5,7 +5,7 @@ import axios, { isAxiosError } from 'axios';
 import { config } from '@/config';
 import { useAppStore } from '@/store';
 
-axios.defaults.baseURL = import.meta.env.MODE !== 'test' ? config.setup.apiBaseUrl : undefined;
+axios.defaults.baseURL = config.setup.apiBaseUrl;
 
 axios.interceptors.request.use((config) => {
   const accessToken = useAppStore.getState().accessToken;

apps/web/vite.config.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 
+import { parseNumber } from '@douglasneuroinformatics/libjs';
 import importMetaEnv from '@import-meta-env/unplugin';
 import { getReleaseInfo } from '@opendatacapture/release-info';
 import runtime from '@opendatacapture/vite-plugin-runtime';
@@ -9,6 +10,15 @@ import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import viteCompression from 'vite-plugin-compression';
 
+const apiPort = parseNumber(process.env.API_DEV_SERVER_PORT);
+const webPort = parseNumber(process.env.WEB_DEV_SERVER_PORT);
+
+if (Number.isNaN(apiPort)) {
+  throw new Error(`Expected API_DEV_SERVER_PORT to be number, got ${process.env.API_DEV_SERVER_PORT}`);
+} else if (Number.isNaN(webPort)) {
+  throw new Error(`Expected WEB_DEV_SERVER_PORT to be number, got ${process.env.WEB_DEV_SERVER_PORT}`);
+}
+
 export default defineConfig({
   build: {
     chunkSizeWarningLimit: 1000,
@@ -45,13 +55,13 @@ export default defineConfig({
     }
   },
   server: {
-    port: parseInt(process.env.WEB_DEV_SERVER_PORT ?? '3000'),
+    port: webPort,
     proxy: {
       '/api/': {
         rewrite: (path) => path.replace(/^\/api/, ''),
         target: {
           host: 'localhost',
-          port: parseInt(process.env.API_DEV_SERVER_PORT ?? '5500')
+          port: apiPort
         }
       }
     }

testing/e2e/playwright.config.ts

@@ -75,7 +75,7 @@ export default defineConfig({
       stderr: 'pipe',
       stdout: process.env.CI ? 'pipe' : 'ignore',
       timeout: 10_000,
-      url: `http://localhost:${apiPort}`
+      url: `http://localhost:${apiPort}/v1/setup`
     },
     {
       command: 'pnpm dev:test',

testing/e2e/src/global/global.setup.spec.ts

@@ -12,7 +12,7 @@ test.describe.serial(() => {
     });
     test('should successfully setup', async ({ setupPage }) => {
       await setupPage.fillSetupForm(initAppOptions);
-      await setupPage.expect.toHaveURL('/dashboard');
+      await setupPage.expect.toHaveURL('/auth/login');
     });
     test('should be setup after initialization', async ({ request }) => {
       const response = await request.get('/api/v1/setup');

testing/e2e/src/pages/__root.page.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import type { Page } from '@playwright/test';
 
 export abstract class RootPage {
-  protected readonly $ref: Page;
+  readonly $ref: Page;
   protected abstract readonly defaultUrl: string;
 
   constructor(page: Page) {