feat: add docker containers with VNC access

README.md

@@ -166,6 +166,20 @@ sleep 30  # let the app actually start
 docker-compose run materials-designer-test
 ```
 
+To run tests in the container use default profile by not specifying it:
+
+```bash
+docker-compose up -d --build
+```
+
+For debugging purposes, Materials Designer and test container can be run interactively with access via VNC:
+
+```bash
+docker-compose --profile use-vnc up -d --build
+```
+
+Then connect to `vnc://localhost:5920` with a VNC client. The password is `123`. Make sure to have it installed on the system, when address is typed in the Chrome browser, the VNC prompt will appear.
+
 ### 3.5. Using Cove.js for local development
 
 If need to link Cove.js into the app for local development, you need

docker-compose.yml

@@ -11,6 +11,10 @@ services:
     volumes:
       - ./src/:/opt/app/src/
       - ./entrypoint.sh:/opt/app/entrypoint.sh
+    profiles:
+      - ""
+      - use-vnc
+
   # Meant to be used for CI/CD testing
   materials-designer-test:
     image: materials-designer-test:${IMAGE_TAG}
@@ -30,3 +34,19 @@ services:
     volumes:
       - ./tests/cypress:/opt/test/cypress
       - ./entrypoint.sh:/opt/test/entrypoint.sh
+    profiles:
+      - ""
+
+  # For local testing with access via VNC
+  materials-designer-test-vnc:
+    image: materials-designer-test-vnc:${IMAGE_TAG}
+    build:
+      context: .
+      dockerfile: ./dockerfiles/app/test/Dockerfile-vnc
+    ports:
+      - 5920:5920
+    volumes:
+      - ./tests/cypress:/opt/test/cypress
+      - ./entrypoint-vnc.sh:/opt/test/entrypoint-vnc.sh
+    profiles:
+      - use-vnc

dockerfiles/app/test/Dockerfile

@@ -6,7 +6,6 @@ WORKDIR /opt/test
 COPY ./tests/package.json package.json
 COPY ./tests/package-lock.json package-lock.json
 COPY ./tests/cypress.config.ts cypress.config.ts
-COPY ./tests/cypress cypress
 
 RUN npm install
 

dockerfiles/app/test/Dockerfile-vnc

@@ -0,0 +1,27 @@
+# From https://hub.docker.com/r/cypress/browsers/tags
+FROM materials-designer-test:latest
+
+# Followed instructions from https://spin.atomicobject.com/cypress-running-docker-container/
+RUN apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -y \
+  curl \
+  libgtk2.0-0 \
+  libgtk-3-0 \
+  libgbm-dev \
+  libnotify-dev \
+  libgconf-2-4 \
+  libnss3 \
+  libxss1 \
+  libasound2 \
+  libxtst6 \
+  xauth \
+  xvfb \
+  x11vnc \
+  fluxbox
+
+# Install Chrome
+RUN curl https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -o /tmp/google-chrome.deb
+RUN apt-get install -y /tmp/google-chrome.deb
+
+ENV CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-'http://host.docker.internal:3001'}
+
+ENTRYPOINT ["/opt/test/entrypoint-vnc.sh"]

entrypoint-vnc.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+# Run Xvfb, x11vnc and fluxbox and Cypress in a single CMD to ensure they're properly synchronized
+export DISPLAY=":20"
+Xvfb $DISPLAY -screen 0 1920x1080x16 &
+x11vnc --passwd "123" -display $DISPLAY -N -forever -bg -o "/tmp/x11vnc.log" &
+DISPLAY=$DISPLAY fluxbox -log /tmp/fluxbox.log &
+DISPLAY=$DISPLAY cypress open /opt/tests/ --browser chrome