Merge branch '138-add-cypress-scaffolding' into 'main'

Resolve "Add cypress scaffolding"

Closes #138

See merge request !117

.gitlab-ci.yml

@@ -4,7 +4,7 @@ include:
 
 stages:
   - build-project
-  - build-container
+  - build-image
   - lint-helm-chart
   - package-helm-chart
   - release-helm-chart
@@ -40,8 +40,8 @@ build-project:
     - export CONTAINER_TAG=${CI_COMMIT_TAG:-${CI_COMMIT_REF_SLUG}}
     - /kaniko/executor --cache=true --context ${CI_PROJECT_DIR}/${DIRECTORY} --destination ${CI_REGISTRY_IMAGE}/${KANIKO_BUILD_IMAGENAME}:${CONTAINER_TAG}
 
-build-frontend-container:
-  stage: build-container
+build-frontend-image:
+  stage: build-image
   image:
     # We need a shell to provide the registry credentials, so we need to use the
     # kaniko debug image (https://github.com/GoogleContainerTools/kaniko#debug-image)
@@ -56,8 +56,8 @@ build-frontend-container:
   extends:
     .kaniko-build
 
-build-backend-container:
-  stage: build-container
+build-backend-image:
+  stage: build-image
   variables:
     KANIKO_BUILD_IMAGENAME: dashboard-backend
     DIRECTORY: backend
@@ -68,3 +68,16 @@ build-backend-container:
     entrypoint: [""]
   extends:
     .kaniko-build
+
+build-test-image:
+  stage: build-image
+  variables:
+    KANIKO_BUILD_IMAGENAME: cypress-test
+    DIRECTORY: tests
+  image:
+    # We need a shell to provide the registry credentials, so we need to use the
+    # kaniko debug image (https://github.com/GoogleContainerTools/kaniko#debug-image)
+    name: gcr.io/kaniko-project/executor:debug
+    entrypoint: [""]
+  extends:
+    .kaniko-build

deployment/helmchart/Chart.yaml

@@ -23,4 +23,4 @@ name: stackspin-dashboard
 sources:
   - https://open.greenhost.net/stackspin/dashboard/
   - https://open.greenhost.net/stackspin/dashboard-backend/
-version: 1.6.5
+version: 1.6.6-cypress

deployment/helmchart/templates/tests/cypress-test.yaml

+apiVersion: v1
+kind: Pod
+metadata:
+  name: {{ template "common.names.fullname" . }}-cypress-test
+  labels: {{- include "common.labels.standard" . | nindent 4 }}
+    component: test
+    {{- if .Values.commonLabels }}
+    {{- include "common.tplvalues.render" ( dict "value" .Values.commonLabels "context" $ ) | nindent 4 }}
+    {{- end }}
+  {{- if .Values.commonAnnotations }}
+  annotations: {{- include "common.tplvalues.render" ( dict "value" .Values.commonAnnotations "context" $ ) | nindent 4 }}
+    "helm.sh/hook": test
+  {{- else }}
+  annotations:
+    "helm.sh/hook": test
+  {{- end }}
+spec:
+  containers:
+  - name: {{ template "common.names.fullname" . }}-cypress-test
+    image: {{ .Values.tests.image.registry }}/{{ .Values.tests.image.repository }}:{{ .Values.tests.image.tag }}
+    imagePullPolicy: {{ .Values.tests.image.pullPolicy }}
+    env:
+    - name: CYPRESS_BASE_URL
+      value: https://{{ .Values.ingress.hostname }}
+  restartPolicy: Never

deployment/helmchart/values.yaml

@@ -718,3 +718,10 @@ serviceAccount:
   ## @param backend.serviceAccount.annotations Annotations for service account. Evaluated as a template. Only used if `create` is `true`.
   ##
   annotations: {}
+
+tests:
+  image:
+    registry: open.greenhost.net:4567
+    repository: stackspin/dashboard/cypress-test
+    tag: 0.6.5
+    pullPolicy: IfNotPresent

tests/Dockerfile

+FROM cypress/included:12.7.0
+
+WORKDIR /app
+
+ADD package.json package-lock.json .
+RUN npm install
+
+ADD cypress.config.js .
+ADD cypress ./cypress

tests/cypress.config.js

+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // https://github.com/archfz/cypress-terminal-report
+      const options = {
+        printLogsToConsole: "always",
+      }
+      require('cypress-terminal-report/src/installLogsPrinter')(on, options);
+    },
+  },
+  videoCompression: false,
+  videoUploadOnPasses: false
+});

tests/cypress/e2e/test-dashboard.cy.js

+const options = {
+  // Filter out flood of cons:warn deprecation and other unimportant cons:info msgs
+  collectTypes: ['cons:log', 'cons:error', 'cy:log', 'cy:xhr', 'cy:request', 'cy:intercept', 'cy:command'],
+  // experimental and instable, use with care!
+  enableContinuousLogging: true
+}
+require('cypress-terminal-report/src/installLogsCollector')(options);
+
+describe('Test dashboard', () => {
+  it('passes', () => {
+
+    cy.visit('/')
+
+    // Log in using credentials from env vars.
+    cy.get('#identifier.form-control')
+      .type(Cypress.env('SSO_USER'))
+    cy.get('#password.form-control')
+      .type(Cypress.env('SSO_PASSWORD'))
+    cy.contains('Log in').click()
+
+    // Check that the support link is visible.
+    cy.contains('Access documentation website')
+  })
+})

tests/cypress/support/e2e.js

+// Cypress.on('uncaught:exception', (err, runnable) => {
+//   // Do not fail the test.
+//   return false
+// })

tests/package.json

+{
+  "name": "cypress-stackspin",
+  "version": "1.0.11",
+  "description": "",
+  "main": "cypress.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "cypress": "12.7.0",
+    "cypress-terminal-report": "^5.0.0"
+  }
+}

tests/run.sh

+#!/bin/bash
+
+# This is a tool to run the cypress test from a development environment. It is
+# not used in the CI.
+
+tag=138-add-cypress-scaffolding
+host=https://dashboard.stackspin.net/
+
+user="admin+cypress@stackspin.net"
+password=$(pass stackspin/stackspin.net/cypress)
+
+if [ $1 == "--local" ]
+then
+  echo "Using locally built docker image."
+  image=dashboard-cypress
+else
+  echo "Using docker image from gitlab registry."
+  image=open.greenhost.net:4567/stackspin/dashboard/cypress-test:$tag
+fi
+
+docker run -it --rm \
+  -e CYPRESS_BASE_URL="$host" \
+  -e CYPRESS_SSO_USER="$user" \
+  -e CYPRESS_SSO_PASSWORD="$password" \
+  $image