COO-362: [release-0.4] : [Chore] Add Cypress tests for Tracing UI plugin testing.

tests/Dockerfile

@@ -0,0 +1,7 @@
+# This Dockerfile is used by OpenShift CI for running the Distributed Tracing UI plugin tests
+FROM quay.io/redhat-distributed-tracing-qe/cypress-base:latest
+
+# Copy current context and set working directory
+COPY . /tmp/distributed-tracing-console-plugin
+RUN chmod -R 777 /tmp/distributed-tracing-console-plugin
+WORKDIR /tmp/distributed-tracing-console-plugin/tests

tests/Dockerfile-cypress

@@ -0,0 +1,16 @@
+# This Dockerfile is used by OpenShift CI for running the Distributed Tracing UI plugin tests
+FROM cypress/browsers:22.15.0
+
+# Install kubectl and oc
+RUN wget -O oc.tar.gz https://mirror.openshift.com/pub/openshift-v4/x86_64/clients/ocp/latest/openshift-client-linux.tar.gz \
+    && tar -xvzf oc.tar.gz \
+    && chmod +x kubectl oc \
+    && mv oc kubectl /usr/local/bin/ \
+    && rm -rf oc.tar.gz
+
+# Install chainsaw
+RUN wget -O chainsaw.tar.gz https://github.com/kyverno/chainsaw/releases/download/v0.2.12/chainsaw_linux_amd64.tar.gz \
+    && tar -xvzf chainsaw.tar.gz \
+    && chmod +x chainsaw \
+    && mv chainsaw /usr/local/bin/ \
+    && rm -rf chainsaw.tar.gz

tests/README.md

@@ -0,0 +1,80 @@
+# Openshift Distributed Tracing UI Plugin Tests
+These console tests install the Openshift Cluster Observability Operator with the Distributed Tracing UI Plugin, Tempo and OpenTelemetry Operators in the specified cluster and then run a series of tests against the UI.
+
+## Prerequisite
+1. [node.js](https://nodejs.org/) >= 18
+2. [chainsaw](https://kyverno.github.io/chainsaw/latest/quick-start/install/) >= v0.2.12
+
+
+## Install dependencies
+All required dependencies are defined in `package.json` in order to run Cypress tests, run `npm install` so that dependencies will be installed in `node_modules` folder
+```bash
+$ npm install
+$ ls -ltr
+node_modules/     -> dependencies will be installed at runtime here
+```
+
+## Directory structure
+After dependencies are installed successfully and before we run actual tests, please confirm if we have correct structure as below.
+```bash
+% ls -ltr tests
+drwxr-xr-x  views
+-rw-r--r--  reporter-config.json
+-rw-r--r--  package.json
+drwxr-xr-x  node_modules
+drwxr-xr-x  cypress
+-rw-r--r--  cypress.config.ts
+-rw-r--r--  README.md
+drwxr-xr-x  tests
+-rw-r--r--  tsconfig.json
+drwxr-xr-x  fixtures
+````
+
+### Export necessary variables
+in order to run Cypress tests, we need to export some environment variables that Cypress can read then pass down to our tests, currently we have following environment variables defined and used.
+
+Using a non-admin user.
+```bash
+export CYPRESS_BASE_URL=https://<console_route_spec_host>
+export CYPRESS_LOGIN_IDP=flexy-htpasswd-provider
+export CYPRESS_LOGIN_USERS=username:password
+export CYPRESS_KUBECONFIG_PATH=~/Downloads/kubeconfig
+```
+Using kubeadmin user.
+```bash
+export CYPRESS_BASE_URL=https://<console_route_spec_host>
+export CYPRESS_LOGIN_IDP=kube:admin
+export CYPRESS_LOGIN_USERS=kubeadmin:password
+export CYPRESS_KUBECONFIG_PATH=~/Downloads/kubeconfig
+```
+
+Set the var to skip Cluster Observability and all the required operators installation.
+```bash
+export CYPRESS_SKIP_COO_INSTALL=true
+```
+
+Set the var to install Cluster Observability, OpenTelemetry and Tempo operators from redhat-operators catalog source.
+```bash
+export CYPRESS_COO_UI_INSTALL=true
+```
+
+Set the var to install Cluster Observability Operator using Konflux bundle. Tempo and OpenTelemetry operators will be installed from redhat-operators catalog source.
+```bash
+export CYPRESS_KONFLUX_COO_BUNDLE_IMAGE=<COO image>
+```
+Set the var to use custom Cluster Observability Operator bundle image. Tempo and OpenTelemetry operators will be installed from redhat-operators catalog source.
+```bash
+export CYPRESS_CUSTOM_COO_BUNDLE_IMAGE=<COO bundle image>
+```
+
+Set the following var to use custom Distributed Tracing UI plugin image. The image will be patched in Cluster Observability Operator CSV.
+```bash
+export CYPRESS_DT_CONSOLE_IMAGE=<console image>
+```
+
+### Start Cypress
+We can either open Cypress GUI(open) or run Cypress in headless mode(run) to run the tests.
+```bash
+npx cypress open
+npx cypress run
+```

tests/cypress.config.ts

@@ -0,0 +1,108 @@
+import { defineConfig } from 'cypress';
+import * as fs from 'fs';
+import * as console from 'console';
+
+export default defineConfig({
+  screenshotsFolder: './gui_test_screenshots/cypress/screenshots',
+  screenshotOnRunFailure: true,
+  trashAssetsBeforeRuns: true,
+  videosFolder: './gui_test_screenshots/cypress/videos',
+  video: true,
+  videoCompression: false,
+  reporter: './node_modules/cypress-multi-reporters',
+  reporterOptions: {
+    configFile: 'reporter-config.json',
+  },
+  env: {
+    grepFilterSpecs: true,
+    HOST_API: process.env.CYPRESS_BASE_URL.replace(/console-openshift-console.apps/, 'api').concat(
+      ':6443',
+    ),
+    LOGIN_USERNAME: process.env.CYPRESS_LOGIN_USERS.split(',')[0].split(':')[0],
+    LOGIN_PASSWORD: process.env.CYPRESS_LOGIN_USERS.split(',')[0].split(':')[1],
+  },
+  fixturesFolder: 'fixtures',
+  defaultCommandTimeout: 30000,
+  retries: {
+    runMode: 0,
+    openMode: 0,
+  },
+  e2e: {
+    browser: "chrome",
+    viewportWidth: 1920,
+    viewportHeight: 1080,
+    setupNodeEvents(on, config) {
+      on(
+        'before:browser:launch',
+        (
+          browser = {
+            name: '',
+            family: 'chromium',
+            channel: '',
+            displayName: '',
+            version: '',
+            majorVersion: '',
+            path: '',
+            isHeaded: false,
+            isHeadless: false,
+          },
+          launchOptions,
+        ) => {
+          if (browser.family === 'chromium' && browser.name !== 'electron') {
+            // Auto open devtools
+            launchOptions.args.push('--enable-precise-memory-info');
+            // Add flags for headless/container stability:
+            launchOptions.args.push('--disable-gpu'); // Often necessary for headless
+            launchOptions.args.push('--no-sandbox'); // Often needed in containers, understand security implications
+            launchOptions.args.push('--disable-dev-shm-usage'); // Crucial for Docker to prevent crashes
+            launchOptions.args.push('--window-size=1920,1080');
+          }
+
+          return launchOptions;
+        },
+      );
+      // `on` is used to hook into various events Cypress emits
+      on('task', {
+        log(message) {
+          console.log(message);
+          return null;
+        },
+        logError(message) {
+          console.error(message);
+          return null;
+        },
+        logTable(data) {
+          console.table(data);
+          return null;
+        },
+        readFileIfExists(filename) {
+          if (fs.existsSync(filename)) {
+            return fs.readFileSync(filename, 'utf8');
+          }
+          return null;
+        },
+      });
+      on('after:spec', (spec: Cypress.Spec, results: CypressCommandLine.RunResult) => {
+        if (results && results.video) {
+          // Do we have failures for any retry attempts?
+          const failures = results.tests.some((test) =>
+            test.attempts.some((attempt) => attempt.state === 'failed'),
+          );
+          if (!failures && fs.existsSync(results.video)) {
+            // Delete the video if the spec passed and no tests retried
+            fs.unlinkSync(results.video);
+          }
+        }
+      });
+      return config;
+    },
+    supportFile: './cypress/support/e2e.js',
+    specPattern: 'tests/**/*.cy.{js,jsx,ts,tsx}',
+    numTestsKeptInMemory: 1,
+    testIsolation: false,
+    experimentalModifyObstructiveThirdPartyCode: true,
+    experimentalOriginDependencies: true,
+    experimentalMemoryManagement: true,
+    experimentalStudio: true,
+  },
+});