johnny/VIDSOL-211-removing noise from unit and integration test

- removing noise
- adding scripts to debug locally

Author: johnny-quesada-developer

customWordList.mjs

@@ -10,6 +10,7 @@ const customWordList = [
   'jiraiOSComponentId',
   'supportedLngs',
   'applinks',
+  'PWDEBUG',
 ];
 
 export default customWordList;

frontend/src/Context/AppConfig/actions/loadAppConfig.ts

@@ -1,5 +1,6 @@
 import tryCatch from '@utils/tryCatch';
 import type { AppConfig } from '../AppConfigContext.types';
+import env from '../../../env';
 
 export type AppConfigApi = import('../AppConfigContext').AppConfigApi;
 
@@ -11,7 +12,12 @@ export type AppConfigApi = import('../AppConfigContext').AppConfigApi;
  */
 function loadAppConfig(this: AppConfigApi['actions']) {
   return async (_: AppConfigApi) => {
+    const fallbackConfig: Partial<AppConfig> = {};
+
     const { result: config, error } = await tryCatch(async () => {
+      // Skip fetching config in CI environments
+      if (env.VITE_AVOID_FETCHING_APP_CONFIG) return {};
+
       const response = await fetch('/config.json', { cache: 'no-cache' });
 
       const contentType = response.headers.get('content-type');
@@ -25,13 +31,19 @@ function loadAppConfig(this: AppConfigApi['actions']) {
       const json: Partial<AppConfig> = await response.json();
 
       return json;
-    }, {});
+    }, fallbackConfig);
+
+    if (error && env.MODE === 'development') {
+      console.error(
+        [
+          'There was an error loading config.json',
+          'Please make sure to provide a valid config.json file in the public folder.',
+        ].join('\n'),
+        error
+      );
+    }
 
     this.updateAppConfig({ ...config, isAppConfigLoaded: true });
-
-    if (error && !process.env.CI) {
-      console.warn(error);
-    }
   };
 }
 

frontend/src/env.ts

@@ -7,6 +7,8 @@ export type EnvArg = {
   VITE_BYPASS_WAITING_ROOM: boolean;
   VITE_API_URL: string;
   VITE_TUNNEL_DOMAIN: string;
+  VITE_AVOID_FETCHING_APP_CONFIG: string;
+  MODE: 'development' | 'production' | 'test';
 };
 
 export class Env {
@@ -22,6 +24,10 @@ export class Env {
 
   public VITE_TUNNEL_DOMAIN: string | undefined;
 
+  public VITE_AVOID_FETCHING_APP_CONFIG: boolean = true;
+
+  public MODE: 'development' | 'production' | 'test';
+
   constructor(env: Partial<EnvArg>) {
     this.VITE_ENABLE_REPORT_ISSUE = Boolean(env.VITE_ENABLE_REPORT_ISSUE ?? false);
     this.VITE_I18N_FALLBACK_LANGUAGE = env.VITE_I18N_FALLBACK_LANGUAGE || 'en';
@@ -33,6 +39,8 @@ export class Env {
     this.setViteApiUrl(env.VITE_API_URL);
 
     this.VITE_TUNNEL_DOMAIN = env.VITE_TUNNEL_DOMAIN;
+    this.VITE_AVOID_FETCHING_APP_CONFIG = Boolean(env.VITE_AVOID_FETCHING_APP_CONFIG === 'true');
+    this.MODE = env.MODE || 'development';
   }
 
   setViteApiUrl = (envUrl: string | undefined) => {

integration-tests/fixtures/testWithLogging.ts

@@ -10,8 +10,10 @@
 import { BrowserContext, Page, test as baseTest } from '@playwright/test';
 import startElectronApp from '../electronHelper';
 
+const isDebugMode = process.env.debugMode === 'true';
+
 const projectType = process.env.PROJECT_TYPE;
-const baseURL = 'http://127.0.0.1:3345/';
+const baseURL = isDebugMode ? 'http://localhost:5173/' : 'http://127.0.0.1:3345/';
 
 const addLogger = (page: Page, context: BrowserContext) => {
   // Get page index to help identify which tab logs are coming from

integration-tests/playwright.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig, devices } from '@playwright/test';
 import path = require('path');
 
+const isHeadedMode = process.env.headedMode === 'true';
+const isDebugMode = process.env.debugMode === 'true';
+
 const chromiumFlags = [
   '--use-fake-ui-for-media-stream',
   '--autoplay-policy=no-user-gesture-required',
@@ -19,7 +22,8 @@ const height = 824;
 
 const fakeDeviceChromiumFlags = [
   ...chromiumFlags,
-  '--headless=new',
+  // headless only on CI
+  ...(isHeadedMode ? [] : ['--headless=new']),
   '--use-fake-device-for-media-stream=device-count=5',
 ];
 
@@ -118,8 +122,15 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'cd .. && yarn start',
-    url: 'http://127.0.0.1:3345',
     reuseExistingServer: true,
+    env: {
+      VITE_AVOID_FETCHING_APP_CONFIG: 'true',
+    },
+    ...(isDebugMode
+      ? {
+          command: 'cd .. && yarn dev',
+          url: 'http://localhost:5173/',
+        }
+      : { command: 'cd .. && yarn start', url: 'http://127.0.0.1:3345' }),
   },
 });

integration-tests/project.json

@@ -5,13 +5,6 @@
   "root": "integration-tests",
   "sourceRoot": "integration-tests",
   "targets": {
-    "test": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "integration-tests",
-        "command": "playwright test --project='Google Chrome Fake Devices' --project=firefox --project='Microsoft Edge' --project='Mobile Chrome' --project='Electron'"
-      }
-    },
     "updateScreenshots": {
       "executor": "nx:run-commands",
       "cache": false,
@@ -49,13 +42,42 @@
         "command": "tsc -p tsconfig.json --noEmit --watch --preserveWatchOutput"
       }
     },
+    "test": {
+      "executor": "nx:run-commands",
+      "description": "Run playwright tests in all browsers",
+      "options": {
+        "cwd": "integration-tests",
+        "command": "playwright test --project='Google Chrome Fake Devices' --project=firefox --project='Microsoft Edge' --project='Mobile Chrome' --project='Electron'"
+      }
+    },
     "test:": {
       "executor": "nx:run-commands",
-      "description": "Run playwright tests in a specific file",
+      "description": "Run playwright tests in a specific file using the compiled version of the app without interruptions",
+      "options": {
+        "cwd": "integration-tests",
+        "description": "Run playwright tests in a specific file",
+        "command": "playwright test {args._} --project='Google Chrome Fake Devices' --workers=1 --headed",
+        "env": { "headedMode": "true" }
+      }
+    },
+    "test:dev": {
+      "executor": "nx:run-commands",
+      "description": "Run playwright tests in a specific file using the dev version of the app without interruptions",
+      "options": {
+        "cwd": "integration-tests",
+        "description": "Run playwright tests in a specific file",
+        "command": "playwright test {args._} --project='Google Chrome Fake Devices' --workers=1 --headed",
+        "env": { "headedMode": "true", "debugMode": "true" }
+      }
+    },
+    "test:debug": {
+      "executor": "nx:run-commands",
+      "description": "Run playwright tests in a specific file in debug mode with the dev version of the app",
       "options": {
         "cwd": "integration-tests",
         "description": "Run playwright tests in a specific file",
-        "command": "playwright test {args._} --project='Google Chrome Fake Devices' --project=firefox --project='Microsoft Edge' --project='Mobile Chrome' --project='Electron'"
+        "command": "playwright test {args._} --project='Google Chrome Fake Devices' --workers=1 --timeout=0",
+        "env": { "headedMode": "true", "debugMode": "true", "PWDEBUG": "1" }
       }
     },
     "lint": {

package.json

@@ -34,6 +34,8 @@
     "test:frontend:watch": "nx test frontend --watch",
     "test:integration": "nx run integration-tests:test",
     "test:integration:": "nx run integration-tests:test:",
+    "test:integration:dev": "nx run integration-tests:test:dev",
+    "test:integration:debug": "nx run integration-tests:test:debug",
     "ts-check": "nx run backend:ts-check && nx run frontend:ts-check",
     "test:integrationUpdateScreenshots": "nx run integration-tests:updateScreenshots",
     "test:integrationUpdateScreenshots:": "nx run integration-tests:updateScreenshots:",