add initial e2e test setup utilizing Cypress

e2e-tests/cypress/Dockerfile

@@ -0,0 +1,65 @@
+###############################################################################
+# Dockerfile to create a ready-to-use Cypress Docker image for end-to-end
+# testing.
+#
+# This Dockerfile is based on the Dockerfile using Node.js 16.14.2 and
+# Cypress 10.3.0
+# (https://github.com/cypress-io/cypress-docker-images/blob/master/included/10.3.0/Dockerfile)
+# from Cypress.io Docker images.
+###############################################################################
+FROM cypress/browsers:node16.14.2-slim-chrome100-ff99-edge
+
+# avoid too many progress messages
+# https://github.com/cypress-io/cypress/issues/1243
+ENV CI=1 \
+# disable shared memory X11 affecting Cypress v4 and Chrome
+# https://github.com/cypress-io/cypress-docker-images/issues/270
+  QT_X11_NO_MITSHM=1 \
+  _X11_NO_MITSHM=1 \
+  _MITSHM=0 \
+  # point Cypress at the /root/cache no matter what user account is used
+  # see https://on.cypress.io/caching
+  CYPRESS_CACHE_FOLDER=/root/.cache/Cypress \
+  # Allow projects to reference globally installed cypress
+  NODE_PATH=/usr/local/lib/node_modules
+
+# should be root user
+RUN echo "whoami: $(whoami)" \
+  && npm config -g set user $(whoami) \
+  # command "id" should print:
+  # uid=0(root) gid=0(root) groups=0(root)
+  # which means the current user is root
+  && id \
+  && npm install -g "cypress@10.3.0" \
+  && cypress verify \
+  # Cypress cache and installed version
+  # should be in the root user's home folder
+  && cypress cache path \
+  && cypress cache list \
+  && cypress info \
+  && cypress version \
+  # give every user read access to the "/root" folder where the binary is cached
+  # we really only need to worry about the top folder, fortunately
+  && ls -la /root \
+  && chmod 755 /root \
+  # always grab the latest Yarn
+  # otherwise the base image might have old versions
+  # NPM does not need to be installed as it is already included with Node.
+  && npm i -g yarn@latest \
+  # Show where Node loads required modules from
+  && node -p 'module.paths' \
+  # should print Cypress version
+  # plus Electron and bundled Node versions
+  && cypress version \
+  && echo  " node version:    $(node -v) \n" \
+    "npm version:     $(npm -v) \n" \
+    "yarn version:    $(yarn -v) \n" \
+    "debian version:  $(cat /etc/debian_version) \n" \
+    "user:            $(whoami) \n" \
+    "chrome:          $(google-chrome --version || true) \n" \
+    "firefox:         $(firefox --version || true) \n"
+
+WORKDIR /tests
+COPY tests/ /tests
+
+# ENTRYPOINT ["cypress", "run"]

e2e-tests/cypress/README.md

@@ -0,0 +1,26 @@
+# Gradido End-to-End Testing with [Cypress](https://www.cypress.io/) (CI-ready via Docker)
+
+
+A sample setup to show-case Cypress as an end-to-end testing tool for Gradido running in a Docker container.
+Here we have a simple UI-based happy path login test running against the DEV system.
+
+## Precondition
+Since dependencies and configurations for Github Actions integration is not set up yet, please run in root directory
+
+```bash
+docker-compose up
+```
+
+to boot up the DEV system, before running the test.
+
+## Execute the test
+
+```bash
+cd e2e-tests/cypress
+
+# build a Docker image from the Dockerfile
+docker build -t gradido_e2e-tests-cypress .
+
+# run the Docker container and execute the given tests
+docker run -it gradido_e2e-tests-cypress cypress run
+```

e2e-tests/cypress/tests/cypress.config.js

@@ -0,0 +1,15 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    chromeWebSecurity: false,
+    supportFile: false,
+    viewportHeight: 720,
+    viewportWidth: 1280,
+    retries: {
+      runMode: 2,
+      openMode: 0
+    }
+  }
+})

e2e-tests/cypress/tests/cypress/e2e/gradido_login.cy.js

@@ -0,0 +1,21 @@
+import users from '../fixtures/users'
+import LoginPage from './models/LoginPage'
+
+describe('Gradido', () => {
+  let userData;
+
+  before(() => {
+    cy.fixture('users').then((usersFixture) => {
+        userData = usersFixture;
+    });
+  });
+
+  it('login test (happy path)', () => {
+    const loginPage = new LoginPage();
+    loginPage.goto();
+    loginPage.enterEmail(userData.user.email);
+    loginPage.enterPassword(userData.user.password);
+    loginPage.submitLogin();
+    cy.url().should('be.equal', `${Cypress.config('baseUrl')}/overview`);
+   });
+});

e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.js

@@ -0,0 +1,21 @@
+class LoginPage {
+  goto() {
+    cy.visit('/')
+  }
+
+  enterEmail(email) {
+    cy.get('[id=Email-input-field]').clear().type(email)
+    return this
+  }
+
+  enterPassword(password) {
+    cy.get('[id=Passwors-input-field]').clear().type(password)
+    return this
+  }
+
+  submitLogin() {
+    cy.get('[type=submit]').click()
+  }
+}
+
+export default LoginPage

e2e-tests/cypress/tests/cypress/fixtures/users.json

@@ -0,0 +1,7 @@
+{
+  "user": {
+    "email": "bibi@bloxberg.de",
+    "password": "Aa12345_",
+    "name": "Bibi Bloxberg"
+  }
+}