Cypress tests (hpi-sam#654)

* WIP: Cypress tests * Add tests for the hospital editor * Remove deleteExercise afterEach hook * Refactor passing values from the application to cypress * Refactor optimistic action handler to use less generics. * Refactor socket listeners to the optimistic action handler This is done because socket.io seems to have no way to listen to ClientToServer events on the client * Properly access the store in cypress * Try to refactor the optimistic action handler generics again * Rename data-cy value for draggable items * Change Object.keys to Object.values where applicable * Refactor custom commands and add new chainable commands for our usecase. * Move functionality from OA handler to exercise service * Speed up tests! * Fix linter * Update package.json files to node 18 * Update node version in all places * Apply suggestion for obserable pipe filters * Add --install-links to npm ci * Add global .npmrc file with install-links * Add MORE npmrcs * Remove --install-links=false in favor of npmrc * Change host to 127.0.0.1 because of changes to webpack * Add video and screenshot output to pipeline * Update the main readme * Refactor setupCypressTestingValues to use lodashs default * Fix linter * Add Alarm Group Call to Alarm Group Test * Add test for start/stop/tick * Add test for managing clients * Add test for managing settings * Add test for simulated regions * Add test for transfer points * Fix tests * Add test to transfer vehicles with patients to hospitals * Rename nthElement and nthLastElement to atPosition * Remove leftovers from testing from the exercise service * Add migration because I fixed a typo * Add test to be able to transfer between transfer points * Change ordering of tests * Add fix so cypress is using node 18 in the pipeline * Add test for managing patients on the map * Add lfs to cypress checkout * Remove unnecessary code * Remove cy.wait and trigger a double click instead * Also pull lfs * Increase pipeline timeout to 20 minutes * Replace dblclick with click * always upload screenshots * Add matrix browser for cypress * Add a wait statement before common flakyness places * Remove typing tests to reduce flake and increase timeout for common errors * Exchange chrome with chromium * Add two more common error timeouts * Introduce variable for magic value * Disable video output --------- Co-authored-by: Benildur <[email protected]>
lukasrad02 · Feb 28, 2023 · 9f64f5f · 9f64f5f
1 parent c9b31a9
commit 9f64f5f
Show file tree

Hide file tree

Showing 62 changed files with 1,419 additions and 370 deletions.
diff --git a/.github/workflows/pipeline.yml b/.github/workflows/pipeline.yml
@@ -22,7 +22,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: '16'
+                  node-version: '18'
             - name: Cache node modules
               uses: actions/cache@v3
               id: cache-node-modules
@@ -64,7 +64,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: '16'
+                  node-version: '18'
             - name: Cache node modules
               uses: actions/cache@v3
               id: cache-node-modules
@@ -108,7 +108,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: '16'
+                  node-version: '18'
             - name: Cache node modules
               uses: actions/cache@v3
               id: cache-node-modules
@@ -175,7 +175,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: '16'
+                  node-version: '18'
             - name: Cache node modules
               uses: actions/cache@v3
               id: cache-node-modules
@@ -197,7 +197,7 @@ jobs:
                   path: shared/dist
                   key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('shared/src/**') }}
             - name: Create .env
-              run: cat ./.env.example | sed -e "s/^DFM_DB_USER=.*$/DFM_DB_USER=${{ secrets.POSTGRES_USER }}/" | sed -e "s/^#DFM_DB_PASSWORD=.*$/DFM_DB_PASSWORD=${{ secrets.POSTGRES_PASSWORD }}/" | sed -e "s/^DFM_DB_NAME=.*$/DFM_DB_NAME=${{ secrets.POSTGRES_DB }}/" | sed -e "s/^DFM_DB_HOST=.*$/DFM_DB_HOST=localhost/" > ./.env
+              run: cat ./.env.example | sed -e "s/^DFM_DB_USER=.*$/DFM_DB_USER=${{ secrets.POSTGRES_USER }}/" | sed -e "s/^#DFM_DB_PASSWORD=.*$/DFM_DB_PASSWORD=${{ secrets.POSTGRES_PASSWORD }}/" | sed -e "s/^DFM_DB_NAME=.*$/DFM_DB_NAME=${{ secrets.POSTGRES_DB }}/" | sed -e "s/^DFM_DB_HOST=.*$/DFM_DB_HOST=127.0.0.1/" > ./.env
             - name: Run migrations
               run: cd backend && npm run migration:run && cd ..
             - name: Run Backend Tests
@@ -220,7 +220,7 @@ jobs:
                   path: coverage
 
     cypress:
-        timeout-minutes: 5
+        timeout-minutes: 20
         runs-on: ${{ matrix.os }}
 
         needs: build
@@ -244,19 +244,19 @@ jobs:
         strategy:
             matrix:
                 os: [ubuntu-latest]
+                browser: [firefox, chromium]
             fail-fast: false
 
-        # Don't pull LFS to reduce bandwidth usage
         steps:
             - uses: actions/checkout@v3
-            #   with:
-            #       lfs: 'true'
+              with:
+                  lfs: 'true' # we need lfs to test vehicles
             - name: checkoutLFS
               uses: actions/checkout@v3
-            # - run: git lfs pull
+            - run: git lfs pull
             - uses: actions/setup-node@v3
               with:
-                  node-version: '16'
+                  node-version: '18'
             - name: Cache node modules
               uses: actions/cache@v3
               id: cache-node-modules
@@ -287,22 +287,29 @@ jobs:
               if: steps.cache-cypress.outputs.cache-hit != 'true'
               run: npm run cy:install
             - name: Create .env
-              run: cat ./.env.example | sed -e "s/^DFM_DB_USER=.*$/DFM_DB_USER=${{ secrets.POSTGRES_USER }}/" | sed -e "s/^#DFM_DB_PASSWORD=.*$/DFM_DB_PASSWORD=${{ secrets.POSTGRES_PASSWORD }}/" | sed -e "s/^DFM_DB_NAME=.*$/DFM_DB_NAME=${{ secrets.POSTGRES_DB }}/" | sed -e "s/^DFM_DB_HOST=.*$/DFM_DB_HOST=localhost/" > ./.env
+              run: cat ./.env.example | sed -e "s/^DFM_DB_USER=.*$/DFM_DB_USER=${{ secrets.POSTGRES_USER }}/" | sed -e "s/^#DFM_DB_PASSWORD=.*$/DFM_DB_PASSWORD=${{ secrets.POSTGRES_PASSWORD }}/" | sed -e "s/^DFM_DB_NAME=.*$/DFM_DB_NAME=${{ secrets.POSTGRES_DB }}/" | sed -e "s/^DFM_DB_HOST=.*$/DFM_DB_HOST=127.0.0.1/" > ./.env
             - name: Run migrations
               run: cd backend && npm run migration:run && cd ..
             - name: Run Cypress
               uses: cypress-io/github-action@v5
               with:
                   start: npm --prefix .. -- run start:all
-                  command: npm run cy:run
                   working-directory: frontend
-                  wait-on: 'http://localhost:4200/health, http://localhost:3201/api/health'
-            - name: Archive cypress
+                  browser: ${{ matrix.browser }}
+                  wait-on: 'http://127.0.0.1:4200/, http://127.0.0.1:3201/api/health'
+                  command-prefix: '--' # So cypress is using our node version: https://github.com/cypress-io/github-action/issues/489#issuecomment-1021379037
+            # - name: Archive cypress videos
+            #   if: always()
+            #   uses: actions/upload-artifact@v3
+            #   with:
+            #       name: cypress-videos-${{ matrix.browser }}
+            #       path: frontend/cypress/videos
+            - name: Archive cypress screenshots
               if: always()
               uses: actions/upload-artifact@v3
               with:
-                  name: cypress-output
-                  path: frontend/cypress-visual-screenshots
+                  name: cypress-screenshots-${{ matrix.browser }}
+                  path: frontend/cypress/screenshots
 
     deploy-dev:
         timeout-minutes: 10

diff --git a/.vscode/launch.json.example b/.vscode/launch.json.example
@@ -15,7 +15,7 @@
             "name": "Launch Frontend [Firefox]",
             "type": "firefox",
             "request": "launch",
-            "url": "http://localhost:4200",
+            "url": "http://127.0.0.1:4200",
             // "profile": "dev-edition-default",
             // "keepProfileChanges": true,
             "pathMappings": [
@@ -33,7 +33,7 @@
             "name": "Launch Frontend [Chrome]",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:4200",
+            "url": "http://127.0.0.1:4200",
             "webRoot": "${workspaceFolder}/frontend"
         },
         // See https://jestjs.io/docs/troubleshooting#debugging-in-vs-code

diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ This project is currently developed as a [bachelor project](https://hpi.de/en/st
 ## Installation
 
 1. Make sure to have [git lfs](https://git-lfs.github.com/) installed.
-2. Install [NodeJs](https://nodejs.org/) (at least version 16.x) (if you need different node versions on your machine we recommend [nvm](https://github.com/nvm-sh/nvm) or [nvm for windows](https://github.com/coreybutler/nvm-windows))
+2. Install [NodeJs](https://nodejs.org/) (at least version 18.x) (if you need different node versions on your machine we recommend [nvm](https://github.com/nvm-sh/nvm) or [nvm for windows](https://github.com/coreybutler/nvm-windows))
 3. [npm](https://www.npmjs.com/) should already come with NodeJs - if not install it
 4. Clone this repository
 5. Run `npm run setup` from the root folder
@@ -42,10 +42,6 @@ This project is currently developed as a [bachelor project](https://hpi.de/en/st
 8. (Optional) We have a list of recommended [vscode](https://code.visualstudio.com/) extensions. We strongly recommend you to use them if you are developing. You can see them via [the `@recommended` filter in the extensions panel](https://code.visualstudio.com/docs/editor/extension-marketplace#_recommended-extensions).
 9. (Optional) We have prepared default settings, tasks and debug configurations for VS Code. You can find them in `.vscode/*.example`. Crete a copy of those files removing the `.example` and adjust them to your needs. The files without `.example`-Extensions are untracked so your adjustments won't be committed automatically.
 
-### Gotchas
-
-If you want the best developer experience, make sure to always install dependencies with `npm install --install-links=false`. The default option changed from previously `false` to `true` with version 9.
-
 ## Starting for development
 
 ### Option 1
@@ -129,8 +125,6 @@ You can run it during the development
 
 ### End to end tests
 
-**Note: We don't really have end-to-end tests yet.**
-
 We are using [cypress](https://www.npmjs.com/package/cypress) to run the end-to-end tests. You can find the code under `/frontend/cypress` in the repository.
 
 #### Running the tests
@@ -139,16 +133,6 @@ To run the tests locally, it is recommended to use the vscode [task](https://cod
 
 If you only want to check whether the tests pass, you can run `npm run cy:run` in `/frontend` instead.
 
-#### Visual regression testing
-
-We are also making use of visual regression tests via [cypress-image-diff](https://github.com/uktrade/cypress-image-diff).
-The screenshots are stored under `/frontend/cypress-visual-screenshots`.
-
-The `baseline` folder contains the reference screenshots (the desired result).
-If a test fails a new screenshot is taken and put in the `comparison` folder.
-If the new screenshot is the new desired result, then you only have to move it in the `baseline` folder and replace the old reference screenshot with the same name.
-In the `diff` folder you can see the changes between the baseline and the comparison screenshot.
-
 ## Benchmarking
 
 You can run the benchmarks via `npm run benchmark` in the root folder.

diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/backend/package.json b/backend/package.json
@@ -6,8 +6,8 @@
         "start:once:linux-macos": "NODE_ENV=production node --experimental-specifier-resolution=node dist/src/index.js",
         "start:once:windows": "set NODE_ENV=production&& node --experimental-specifier-resolution=node dist/src/index.js",
         "start:once": "(pwd && npm run start:once:linux-macos) || npm run start:once:windows",
-        "start:linux-macos": "NODE_ENV=development nodemon --watch \"./\" --watch \"../shared/dist/\" --ext \"ts js json\" --exec \"node --experimental-specifier-resolution=node --loader ts-node/esm\" src/index.ts",
-        "start:windows": "set NODE_ENV=development&& nodemon --watch \"./\" --watch \"../shared/dist/\" --ext \"ts js json\" --exec \"node --experimental-specifier-resolution=node --loader ts-node/esm\" src/index.ts",
+        "start:linux-macos": "NODE_ENV=development nodemon --watch \"./\" --watch \"../shared/dist/\" --ext \"ts js json\" --exec \"node --experimental-specifier-resolution=node --loader ts-node/esm\" src/index.ts 127.0.0.1",
+        "start:windows": "set NODE_ENV=development&& nodemon --watch \"./\" --watch \"../shared/dist/\" --ext \"ts js json\" --exec \"node --experimental-specifier-resolution=node --loader ts-node/esm\" src/index.ts 127.0.0.1",
         "start": "(pwd && npm run start:linux-macos) || npm run start:windows",
         "build": "tsc --project ./tsconfig.build.json",
         "lint": "eslint --max-warnings 0 --ignore-path .gitignore \"./**/*.{ts,js,yml,html}\"",
@@ -29,7 +29,7 @@
     },
     "private": true,
     "engines": {
-        "node": ">=16",
+        "node": ">=18",
         "npm": ">=8"
     },
     "dependencies": {

diff --git a/backend/src/config.ts b/backend/src/config.ts
@@ -122,8 +122,8 @@ export class Config {
             DFM_DB_NAME_TESTING: str({ default: undefined }),
             DFM_DB_LOG: bool({ default: false }),
             DFM_DB_LOG_TESTING: bool({ default: undefined }),
-            DFM_DB_HOST: str({ default: 'localhost' }),
-            DFM_DB_HOST_TESTING: str({ default: 'localhost' }),
+            DFM_DB_HOST: str({ default: '127.0.0.1' }),
+            DFM_DB_HOST_TESTING: str({ default: '127.0.0.1' }),
             DFM_DB_PORT: tcpPortValidator({ default: 5432 }),
             DFM_DB_PORT_TESTING: tcpPortValidator({ default: 5432 }),
         });

diff --git a/backend/test/utils.ts b/backend/test/utils.ts
@@ -131,7 +131,7 @@ class TestEnvironment {
     ): Promise<void> {
         let clientSocket: ExerciseClientSocket | undefined;
         try {
-            clientSocket = io(`ws://localhost:${Config.websocketPort}`, {
+            clientSocket = io(`ws://127.0.0.1:${Config.websocketPort}`, {
                 ...socketIoTransports,
             });
             const websocketClient = new WebsocketClient(clientSocket);

diff --git a/benchmark/package-lock.json b/benchmark/package-lock.json
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -11,7 +11,7 @@
     },
     "private": true,
     "engines": {
-        "node": ">=16",
+        "node": ">=18",
         "npm": ">=8"
     },
     "dependencies": {

diff --git a/docker/Dockerfile b/docker/Dockerfile
@@ -2,7 +2,7 @@
 ARG PRODUCTION_PATH="/usr/local/app"
 
 # Use official node image as the base image
-FROM node:16-bullseye-slim AS builder
+FROM node:18-bullseye-slim AS builder
 
 # needed to use PRODUCTION_PATH before the first FROM
 ARG PRODUCTION_PATH
@@ -21,7 +21,7 @@ RUN npm run deployment
 ####  prod container ####
 
 # Use official node image as the base image, important to be on debian based for apt-get
-FROM node:16-bullseye-slim
+FROM node:18-bullseye-slim
 
 # needed to use PRODUCTION_PATH before the first FROM
 ARG PRODUCTION_PATH

diff --git a/frontend/cypress-visual-screenshots/baseline/landing-page.spec.ts-landing-page.png b/frontend/cypress-visual-screenshots/baseline/landing-page.spec.ts-landing-page.png
diff --git a/frontend/cypress.config.ts b/frontend/cypress.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    retries: {
+        runMode: 4,
+        openMode: 1,
+    },
+    e2e: {
+        baseUrl: 'http://127.0.0.1:4200',
+        video: false,
+    },
+});
diff --git a/frontend/cypress.json b/frontend/cypress.json