Merge pull request #6425 from uktrade/feature/TET-372-bump-cypress-to…

…-v12

Feature/tet 372 bump cypress to v12

Dockerfile

@@ -1,4 +1,4 @@
-FROM gcr.io/sre-docker-registry/data-hub-frontend-dependencies:2.0.4
+FROM gcr.io/sre-docker-registry/data-hub-frontend-dependencies:3.2.0
 
 ARG CURRENT_UID
 ARG CURRENT_GID

Dockerfile.dependencies

@@ -1,74 +1,61 @@
-FROM node:18.15.0-buster
-
-ENV DOCKERIZE_VERSION      v0.6.1
-ENV NPM_CONFIG_LOGLEVEL    warn
-ENV NPM_CONFIG_UNSAFE_PERM true
-ENV TZ                     Europe/London
-ENV TERM                   xterm
-ENV LANG                   C.UTF-8
-ENV NODE_ENV               development
+# A base image with all operating system dependencies, but no Cypress or browsers.
+# See https://github.com/cypress-io/cypress-docker-images for more info.
+
+FROM cypress/base:18.15.0
+
+# Setting environment variables
+ENV CHROME_VERSION=121.0.6167.85-1
+ENV CHROME_DOWNLOAD_URL=https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_${CHROME_VERSION}_amd64.deb
+ENV DOCKERIZE_VERSION v0.7.0
+ENV TZ Europe/London
+ENV TERM xterm
+ENV LANG C.UTF-8
+ENV NODE_ENV development
+ENV HOME=/home/node
+ENV PATH="$HOME/.local/bin:$PATH"
+ENV NODE_PATH="$HOME/.local/lib/node_modules:$NODE_PATH"
+ENV npm_config_prefix="$HOME/.local"
+ENV CYPRESS_CACHE_FOLDER="$HOME/.cache/Cypress"
 
-# Install common dependencies
-RUN apt-get install -y \
-  tzdata \
-  wget \
-  curl \
-  make \
-  git
+# Overwrite CI env variable which is set in the parent cypress/base image to avoid nodemon crashing
+ENV CI=false
 
 # Install dockerize
-RUN wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
-    && tar -C /usr/local/bin -xzvf dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
-    && rm dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz
-
-# Install Cypress dependencies
-RUN apt-get update
-RUN apt-get install -y \
-  libgtk2.0-0 \
-  libnotify-dev \
-  libgconf-2-4 \
-  libnss3 \
-  libxss1 \
-  libasound2 \
-  libpng-dev \
-  zlib1g-dev  \
-  xvfb
-
-# Install visual test dependencies
-RUN apt-get install -y imagemagick libgbm1
+RUN wget --quiet --https-only "https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz" \
+  && tar -C /usr/local/bin -xzvf "dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz" \
+  && rm "dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz"
 
-# Install Chrome
-RUN apt-get install -y xvfb xdg-utils libgtk-3-0 lsb-release libappindicator3-1 fonts-liberation libasound2 libnspr4 libnss3 libu2f-udev libvulkan1 \
-  && curl https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -O \
-  && dpkg -i google-chrome-stable_current_amd64.deb \
-  && rm google-chrome-stable_current_amd64.deb \
-  && google-chrome --version
-
-# Set timezone
-RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone \
+# Configure tzdata package in case it's not already
+RUN ln -snf "/usr/share/zoneinfo/$TZ" /etc/localtime \
+  && echo "$TZ" > /etc/timezone \
   && echo "Timezone: $(date +%z)"
 
-RUN mkdir -p /home/node
-RUN chown -R node: /home/node
-RUN mkdir -p /usr/src/app
-RUN chown -R node: /usr/src/app
-RUN chmod -R 775 /usr/src/app
+# Install Google Chrome
+RUN wget --no-verbose -O /tmp/chrome.deb $CHROME_DOWNLOAD_URL \
+  && apt-get update \
+  && apt-get install -y /tmp/chrome.deb \
+  && rm /tmp/chrome.deb \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/*
 
-USER node
-ENV HOME=/home/node
+# Prepare node user environment
+RUN mkdir -p "$HOME" /usr/src/app \
+  && chown -R node: "$HOME" /usr/src/app \
+  && chmod -R 775 /usr/src/app
 
-# Install cypress
-ENV PATH=$HOME/.local/bin:$PATH
-ENV NODE_PATH=$HOME/.local/lib/node_modules:$NODE_PATH
-ENV npm_config_prefix=$HOME/.local
+# Switch to non-root user for subsequent commands
+USER node
 
-COPY --chown=1000:1000 package.json .
-COPY --chown=1000:1000 package-lock.json .
-RUN npm install -g [email protected]
-RUN cypress verify
+# Copying package files with correct ownership
+COPY --chown=node:node package*.json "$HOME/"
 
-RUN cypress cache path
-RUN cypress cache list
-RUN cypress info
-RUN cypress version
+# Set the working directory to the app directory, as this is where most subsequent commands will execute
+WORKDIR $HOME
 
+# Install specific version of cypress
+RUN npm install -g [email protected] \
+  && npx cypress verify \
+  && npx cypress cache path \
+  && npx cypress cache list \
+  && npx cypress info \
+  && npx cypress version

Storybook.Dockerfile → Dockerfile.storybook

@@ -1,19 +1,24 @@
-FROM gcr.io/sre-docker-registry/data-hub-frontend-dependencies:2.0.4
+FROM gcr.io/sre-docker-registry/data-hub-frontend-dependencies:3.2.0
 
 ARG CURRENT_UID
 ARG CURRENT_GID
 
+# Use root user to perform privileged operations
 USER root
-RUN chown -R $CURRENT_UID:$CURRENT_GID /home/node
-RUN chown -R $CURRENT_UID:$CURRENT_GID /usr/src/app
 
+# Set permissions
+RUN chown -R $CURRENT_UID:$CURRENT_GID /home/node && \
+    chown -R $CURRENT_UID:$CURRENT_GID /usr/src/app
+
+# Set the working directory to the app directory
 WORKDIR /usr/src/app
 
 # Install dev packages
 COPY --chown=$CURRENT_UID:$CURRENT_GID package.json .
 COPY --chown=$CURRENT_UID:$CURRENT_GID package-lock.json .
 COPY --chown=$CURRENT_UID:$CURRENT_GID .npmrc .
 
+# Switch to the non-root user identified by CURRENT_UID and CURRENT_GID
 USER "$CURRENT_UID:$CURRENT_GID"
 CMD npm config set loglevel info
 
@@ -25,5 +30,4 @@ COPY --chown=$CURRENT_UID:$CURRENT_GID . .
 
 RUN npm run storybook:build
 
-EXPOSE 65200
-
+EXPOSE 65200

docker-compose.base.yml

@@ -1,6 +1,7 @@
 version: '3'
 services:
   frontend:
+    platform: linux/amd64
     build:
       context: .
       args:

docker-compose.mock.yml

@@ -1,6 +1,7 @@
 version: '3'
 services:
   frontend:
+    platform: linux/amd64
     depends_on:
       - mock-api
     entrypoint: dockerize -wait tcp://mock-api:8000 -timeout 3m -wait-retry-interval 5s
@@ -17,6 +18,7 @@ services:
       ACCOUNT_PLAN_URLS: '{"000000001": "/some-test-account-plan-url", "123456789": "/some-other-test-account-plan-url"}'
 
   mock-api:
+    platform: linux/amd64
     build: ./test/sandbox
     volumes:
       - ./test/sandbox:/usr/src/app

docker-compose.storybook.yml

@@ -1,14 +1,14 @@
-version: '3'
+version: '3.4'
 services:
   storybook:
+    platform: linux/amd64
     build:
       context: .
-      dockerfile: Storybook.Dockerfile
+      dockerfile: Dockerfile.storybook
       args:
         CURRENT_UID: ${CURRENT_UID}
         CURRENT_GID: ${CURRENT_GID}
     ports:
-      - "65200:65200"
+      - '65200:65200'
     env_file: .env
     command: npx http-server storybook-static -p 65200
-

docs/Docker.md

@@ -23,11 +23,12 @@ Prerequisite:
 
 Ensure you have [gcloud CLI installed](https://cloud.google.com/sdk/docs/install-sdk) and you are logged in following their instructions (you will need to ask SRE for access). You will need to setup authentication using the [gcloud credential helper](https://cloud.google.com/container-registry/docs/advanced-authentication#gcloud-helper) before you can push the new container.
 
+> If you have issues when building the dependencies image, especially if you are using a Mac with an Apple chip, this is most likely due to incompatibility with the `arm` architecture; instead you need to build on `amd` architecture. Please refer to [troubleshooting guide](./Troubleshooting.md) and follow the steps under the Visual & Visual Component Tests section, before retrying the build command below.
 
 ```bash
-export VERSION=2.0.4 # Increment this version each time when you edit Dockerfile.
+export VERSION=3.2.0 # Increment this version each time when you edit Dockerfile.
 
-docker build -f Dockerfile.dependencies -t data-hub-frontend-dependencies .
+docker build -f Dockerfile.dependencies -t data-hub-frontend-dependencies . --platform linux/amd64
 
 docker tag data-hub-frontend-dependencies:latest gcr.io/sre-docker-registry/data-hub-frontend-dependencies:${VERSION}
 

docs/Running tests.md

@@ -198,10 +198,13 @@ or
 
 ## Visual Tests
 
-The aim of this suite is taking screenshots from pages and comparing to baselines
-to ensure consistency between builds.
+The aim of this suite is taking screenshots from pages and comparing to baselines to ensure consistency between builds.
+
+**NOTE**: Compression algorithm differences can cause test failures between operating systems, and underlying C-library differences. To run these tests **you must use Docker**, which is also what Circle CI uses. Similarly when updating the baseline files, they must be generated using Docker as well (otherwise Circle CI will fail).
+
+### Setup
 
-**NOTE** Compression algorithm differences can cause test failures between operating systems, and underlying C-library differences. To run these tests **you must use Docker**, which is also what Circle CI uses. Similarly when updating the baseline files, they must be generated using Docker as well (otherwise Circle CI will fail).
+Please ensure you have the sandbox environment file enabled, and set the environment variable `REDIS_HOST=redis`.
 
 ### Folder structure
 
@@ -236,6 +239,10 @@ Updating the baseline consists in 2 steps:
 The aim of this suite is taking screenshots from storybook and comparing to baselines
 to ensure consistency between builds.
 
+### Setup
+
+Please ensure you have the sandbox environment file enabled, and set the environment variable `REDIS_HOST=redis`.
+
 ### Folder structure
 
 ```

docs/Troubleshooting.md

@@ -230,3 +230,87 @@ at endReadableNT (node: internal/streams/readable: 1345:12)
 at processTicksAndRejections (node: internal/process/task queues: 83:21) {"date" "Mon Jun 20 2022 10-34:32 GMT+9190 (Britich Summer Time')
 
 **Solution** Bring down your local frontend, enable the VPN and then run `npm run develop` again. The frontend should now work correctly.
+
+## Test Issues
+
+This section is for issues when running tests locally in accordance with the [running tests](./Running%20tests.md) documentation.
+
+### Visual & Visual Component Tests
+
+Visual and visual-component tests should always be run within docker (using the `make` commands) to ensure the screenshot resolutions are consistent, otherwise you may find the tests fail with an error message similar to `Error: Image difference greater than threshold: 0`.
+
+However, when running the `make` commands on Macs with Apple chips, you may come across errors with Cypress or the test runners failing to start:
+
+```
+> test:visual-component
+> CYPRESS_coverage=false cypress run --config-file cypress.visual.config.js --config '{"specPattern":["test/visual-component/cypress/specs/**/*.js"]}' --browser chrome
+
+qemu: uncaught target signal 5 (Trace/breakpoint trap) - core dumped
+qemu: uncaught target signal 5 (Trace/breakpoint trap) - core dumped
+qemu: uncaught target signal 11 (Segmentation fault) - core dumped
+The Test Runner unexpectedly exited via a exit event with signal SIGSEGV
+
+Please search Cypress documentation for possible solutions:
+
+https://on.cypress.io
+
+Check if there is a GitHub issue describing this crash:
+
+https://github.com/cypress-io/cypress/issues
+
+Consider opening a new issue.
+
+----------
+
+Platform: linux-x64 (Debian - 10)
+Cypress Version: 12.17.4
+make: *** [visual-component-tests] Error 1
+```
+
+**Solution**: ensure you have checked the following and then re-build/re-run the containers/`make` commands.
+
+- Have Rosetta 2 installed on your Mac (see [Apple's support page](https://support.apple.com/en-gb/HT211861) for more information on this)
+- Have the latest version of Docker Desktop installed
+- Have enabled the `Use Rosetta for x86/amd64 emulation on Apple Silicon` setting under the general tab in Docker Desktop
+
+#### Visual & Visual Component Tests Hanging
+
+After following the above steps, you may find the visual tests eventually start, but get stuck (or hang) on the first. You might see console output similar to:
+
+```
+> test:visual
+> CYPRESS_coverage=false cypress run --config-file cypress.visual.config.js --config '{"specPattern":["test/visual/cypress/specs/**/*.js"]}' --browser chrome
+
+[1356:0126/105317.072419:ERROR:node_bindings.cc(279)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
+
+DevTools listening on ws://127.0.0.1:35493/devtools/browser/c8f21391-8172-4dfa-bcf9-dd69079a53fe
+libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null)
+[1566:0126/105318.610695:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
+Couldn't find tsconfig.json. tsconfig-paths will be skipped
+
+====================================================================================================
+
+  (Run Starting)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Cypress:        12.17.4                                                                        │
+  │ Browser:        Chrome 106 (headless)                                                          │
+  │ Node Version:   v18.15.0 (/usr/local/bin/node)                                                 │
+  │ Specs:          7 found (community-spec.js, company-spec.js, contact-spec.js, event-spec.js, i │
+  │                 nteraction-spec.js, investment-spec.js, omis-spec.js)                          │
+  │ Searched:       test/visual/cypress/specs/**/*.js                                              │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+────────────────────────────────────────────────────────────────────────────────────────────────────
+
+  Running:  community-spec.js                                                               (1 of 7)
+
+
+  community page
+Hangs here...
+```
+
+Preliminary results point to this being an issue only for those on M1 and M2 machines when trying to run the tests locally, within Docker. We think this is due to an incompatibility between the docker images and the ARM architecture, however, we are still investigating this.
+
+Please note that CircleCI should continue to run the tests without problems.