fix: cypress tests pointing to production are triggered on PRs checks (…

…#1687)
MobilityData · Mar 6, 2024 · d631b1a · d631b1a
1 parent 3ba27d9
commit d631b1a
Show file tree

Hide file tree

Showing 15 changed files with 866 additions and 252 deletions.
diff --git a/.github/workflows/stg_web_client_merge.yml b/.github/workflows/stg_web_client_merge.yml
@@ -5,6 +5,9 @@ on:
     branches:
       - master
 
+env:
+  NODE_VERSION: "20"
+
 jobs:
 
   web_cd:
@@ -17,30 +20,30 @@ jobs:
 
     steps:
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # We need to download all tags so that the axion-release-plugin
           # can resolve the most recent version tag.
           fetch-depth: 0
 
       - name: Set up JDK 17
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           # We need a recent version of Java with jpackage included.
           java-version: '17'
           # We use the zulu distribution, which is an OpenJDK distro.
           distribution: 'zulu'
 
       # for npm
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: ${{ env.NODE_VERSION }}
 
-      - uses: google-github-actions/auth@v1
+      - uses: google-github-actions/auth@v2
         with:
           credentials_json: ${{ secrets.GCP_WEB_VALIDATOR_SA_KEY }}
 
-      - uses: google-github-actions/setup-gcloud@v1
+      - uses: google-github-actions/setup-gcloud@v2
         with:
           version: '>= 390.0.0'
 

diff --git a/.github/workflows/stg_web_svc_merge.yml b/.github/workflows/stg_web_svc_merge.yml
@@ -5,6 +5,9 @@ on:
     branches:
       - master
 
+env:
+  NODE_VERSION: "20"
+
 jobs:
 
   web_cd:
@@ -17,24 +20,24 @@ jobs:
 
     steps:
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # We need to download all tags so that the axion-release-plugin
           # can resolve the most recent version tag.
           fetch-depth: 0
 
       - name: Set up JDK 17
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           # We need a recent version of Java with jpackage included.
           java-version: '17'
           # We use the zulu distribution, which is an OpenJDK distro.
           distribution: 'zulu'
 
       # for npm
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: ${{ env.NODE_VERSION }}
 
       - uses: google-github-actions/auth@v1
         with:

diff --git a/.github/workflows/web_client_pr.yml b/.github/workflows/web_client_pr.yml
@@ -7,6 +7,9 @@ on:
     paths:
       - 'web/client/**'
 
+env:
+  NODE_VERSION: "20"
+
 jobs:
 
   web_ci:
@@ -19,30 +22,30 @@ jobs:
 
     steps:
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # We need to download all tags so that the axion-release-plugin
           # can resolve the most recent version tag.
           fetch-depth: 0
 
       - name: Set up JDK 17
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           # We need a recent version of Java with jpackage included.
           java-version: '17'
           # We use the zulu distribution, which is an OpenJDK distro.
           distribution: 'zulu'
 
       # for npm
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: ${{ env.NODE_VERSION }}
 
-      - uses: google-github-actions/auth@v1
+      - uses: google-github-actions/auth@v2
         with:
           credentials_json: ${{ secrets.GCP_WEB_VALIDATOR_SA_KEY }}
 
-      - uses: google-github-actions/setup-gcloud@v1
+      - uses: google-github-actions/setup-gcloud@v2
         with:
           version: '>= 390.0.0'
 

diff --git a/.github/workflows/web_client_test.yml b/.github/workflows/web_client_test.yml
@@ -6,14 +6,40 @@ on:
       paths:
         - 'web/client/**'
 
+env:
+  NODE_VERSION: "20"
+
 jobs:
   cypress-run:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
+    name: Cypress e2e tests
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: web/client
 
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run start:cypress:config
+          wait-on: "npx wait-on --timeout 2000 http://127.0.0.1:5173"
+          working-directory: web/client
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: web/client/cypress/screenshots
+
+      - uses: actions/upload-artifact@v4
+        if: always()
         with:
-          working-directory: ./web/client
+          name: cypress-videos
+          path: web/client/cypress/videos
diff --git a/.github/workflows/web_release.yml b/.github/workflows/web_release.yml
@@ -4,6 +4,9 @@ on:
   release:
     types: [ released ]
 
+env:
+  NODE_VERSION: "20"
+
 jobs:
 
   web_pipeline:
@@ -16,30 +19,30 @@ jobs:
 
     steps:
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # We need to download all tags so that the axion-release-plugin
           # can resolve the most recent version tag.
           fetch-depth: 0
 
       - name: Set up JDK 17
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           # We need a recent version of Java with jpackage included.
           java-version: '17'
           # We use the zulu distribution, which is an OpenJDK distro.
           distribution: 'zulu'
 
       # for npm
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: ${{ env.NODE_VERSION }}
 
-      - uses: google-github-actions/auth@v1
+      - uses: google-github-actions/auth@v2
         with:
           credentials_json: ${{ secrets.GCP_WEB_VALIDATOR_SA_KEY }}
 
-      - uses: google-github-actions/setup-gcloud@v1
+      - uses: google-github-actions/setup-gcloud@v2
         with:
           version: '>= 390.0.0'
 

diff --git a/.github/workflows/web_svc_pr.yml b/.github/workflows/web_svc_pr.yml
@@ -7,6 +7,9 @@ on:
     paths:
       - 'web/service/**'
 
+env:
+    NODE_VERSION: "20"
+
 jobs:
 
   web_ci:
@@ -19,30 +22,30 @@ jobs:
 
     steps:
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # We need to download all tags so that the axion-release-plugin
           # can resolve the most recent version tag.
           fetch-depth: 0
 
       - name: Set up JDK 17
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           # We need a recent version of Java with jpackage included.
           java-version: '17'
           # We use the zulu distribution, which is an OpenJDK distro.
           distribution: 'zulu'
 
       # for npm
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: ${{ env.NODE_VERSION }}
 
-      - uses: google-github-actions/auth@v1
+      - uses: google-github-actions/auth@v2
         with:
           credentials_json: ${{ secrets.GCP_WEB_VALIDATOR_SA_KEY }}
 
-      - uses: google-github-actions/setup-gcloud@v1
+      - uses: google-github-actions/setup-gcloud@v2
         with:
           version: '>= 390.0.0'
 

diff --git a/web/client/.env.development b/web/client/.env.development
@@ -0,0 +1,2 @@
+PUBLIC_CLIENT_API_ROOT=http://127.0.0.1:8080
+PUBLIC_CLIENT_REPORTS_ROOT=http://127.0.0.1:8080/reports
diff --git a/web/client/README.md b/web/client/README.md
@@ -1,8 +1,12 @@
 # GTFS Web Validator Client
 
+## Node version
+
+Node version: 20+
+
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created a project and installed dependencies with `npm install`, start a development server:
 
 ```bash
 npm run dev
@@ -48,4 +52,27 @@ npm run build
 gcloud storage cp --recursive ./build/* gs://gtfs-validator-web/
 ```
 
+# Component and E2E tests
+
+Component and E2E tests are executed with [Cypress](https://docs.cypress.io/). Cypress tests are located in the _cypress_ folder.
+
+Steps to run cypress tests locally:
+ - Open a terminal and start the web application with Cypress profile
+ ```
+ npm run start:cypress:config
+ ```
+ - In another terminal, run cypress headless cypress or cypress dashboard:
+ headless:
+ ```
+npm run cypress:run
+ ```
+dashboard:
+ ```
+npm run cypress:open
+ ```
+
+## Cypress feedback on GitHub actions
+
+Cypress is configured to capture videos of the test executions and get screenshots(on error). To debug Cypress fails on the pipeline, check the Cypress GitHub workflow artifacts for videos and screenshots.
+
 *This project is powered by [`SvelteKit`](https://kit.svelte.dev/).*
diff --git a/web/client/cypress.config.js b/web/client/cypress.config.js
@@ -1,11 +1,17 @@
 import { defineConfig } from "cypress";
-
+// Base URL, API root and reports are set to 127.0.0.1 instead of localhost to be able to run cypress on GitHub actions.
 export default defineConfig({
   watchForFileChanges: false,
   defaultCommandTimeout: 10000,
+  video: true,
   e2e: {
+    baseUrl: 'http://127.0.0.1:5173',
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
   },
+  env: {
+    PUBLIC_CLIENT_API_ROOT: "http://127.0.0.1:8080",
+    PUBLIC_CLIENT_REPORTS_ROOT: "http://127.0.0.1:8080/reports"
+  },
 });