Cypress tests and e2e github action flow (#5896)

* test: welcome test, dashboard test, explore browser test

* test: snapshot testing

* feat: adding testing snapshots

* chore: update unmet peer dependency

* fix: name of dropdown toggle

* test: connecting to influxdb

* fix: remove unnecessary influxdb-onboarding.sh script.

* chore: updated go 1.17.1 for cypress tests

* refactor: remove unnecessary influxdb-onboarding command from Makefile

* refactor: remove unnecessary influxdb-onboarding command from circleci config

* test: initialising database by using environment properties (in Makefile)

* chore: fixing cypress tests

* test: deleting connection to influxd1

* tests: optimize build, reuse workspace

* tests: optimize build

* test: remove unused code

* fix:  remove unuse dashboard

* chore(e2e-pipeline): add pipeline for chrono cypress tests

* chore: run action on push

* chore: fix e2e pipeline

* chore: add yarn install

* chore: add log upload

* chore: show logs to see what is going on with chronograf

* chore: fix log cats

* chore: add sleep

* fix: chronograf run command

* chore(ui): regenerate yarn.lock after rebase

* test: welcome test, dashboard test, explore browser test

* test: snapshot testing

* feat: adding testing snapshots

* chore(e2e): local script for influxdb enterprise deployment

* chore(e2e): update cert-manager in actions pipeline

* chore: fix coredns issue

* chore: fix certmanager deployment

* test: welcome test, dashboard test, explore browser test

* test: snapshot testing

* feat: adding testing snapshots

* chore: update unmet peer dependency

* test(cypress): add cypress env, and commands

* test(cypress): add basic InfluxDB setup connection test

* fix: temporary commented out the file as it uses non existing functions

* test(cypress): add dashboard create, rename and delelete test

* test(cypress): add routes

* chore: regenerate yarn.lock

* chore: remove unused file

* chore: comment out code

* chore: comment out code

* fix: remove calling non-existent function

* fix: createConnection uses  unsafe SSL

* turns on flux

* test(cypress): rewritten Query Builder tests using _internal.monitor

* chore: yarn prettier

* fix: add missing custom window period

* fix: remove it.only

* Add flux-enable to a workflow file

* fix: github actions workflow file flux-enabled

* fix: force restart by deleing pod

* fix: restart a container to apply a new configmap

* fix: restart container

* chore: flux-enabled is now true by default

* fix: selecting correct elements

* chore: update e2e pipeline

* chore: add scheduled action run once a working day

* chore: remove commented code

* chore:  change file extenction to .ts and adjust code accordingly

* chore: pipeline fixes

* chore: clean up e2e:influxdb2 references

* fix: yarn installation, no risky changes in make clean

* chore: update changelog

Co-authored-by: Iszy-Ami <[email protected]>
Co-authored-by: Iszy-Ami <[email protected]>
Co-authored-by: Robert Hajek <[email protected]>
Co-authored-by: Pavel Zavora <[email protected]>
Co-authored-by: k3yi0 <[email protected]>
Co-authored-by: k3yi0 <[email protected]>

.circleci/config.yml

@@ -1,3 +1,8 @@
+version: 2.1
+orbs:
+  browser-tools: circleci/[email protected]
+
+
 workflows:
   version: 2
   main:
@@ -29,7 +34,6 @@ workflows:
             tags:
               only: /^[0-9]+(\.[0-9]+)*$/
 
-version: 2
 jobs:
   build:
     environment:

.github/workflows/chronograf-cypress-tests-report.yaml

@@ -0,0 +1,16 @@
+name: 'chronograf/cypress/report'
+on:
+  workflow_run:
+    workflows: ['chronograf/cypress']
+    types:
+      - completed
+jobs:
+  report:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dorny/test-reporter@v1
+        with:
+          artifact: test-results
+          name: Cypress Tests
+          path: "*.xml"
+          reporter: java-junit

.github/workflows/chronograf-cypress-tests.yaml

@@ -0,0 +1,92 @@
+name: "chronograf/cypress"
+
+on:
+  pull_request:
+  schedule:
+    - cron: '30 5 * * 1-5'
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+
+      - name: Setup Go
+        uses: actions/setup-go@v2
+        with:
+          go-version: '1.16.4'
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.15.0'
+      - run: if [ ! -x "$(command -v yarn)" ]; then npm install -g yarn; fi
+      - run: yarn node --version
+
+      - name: Setup Helm
+        uses: azure/setup-helm@v1
+        with:
+          version: v3.6.3
+
+      - name: Create kind cluster
+        uses: helm/[email protected]
+        with:
+          cluster_name: "chronograf-testing"
+          config: .github/workflows/resources/kind-config.yaml
+
+      - name: Create Enterprise Test Resources
+        run: |
+          helm repo add jetstack https://charts.jetstack.io
+          helm repo add influxdata https://helm.influxdata.com/
+          helm repo update
+          helm upgrade --wait --install \
+              cert-manager jetstack/cert-manager \
+              --namespace cert-manager \
+              --create-namespace \
+              --version v1.5.4 \
+              --set prometheus.enabled=false \
+              --set webhook.timeoutSeconds=30 \
+              --set installCRDs=true
+          kubectl apply -f .github/workflows/resources/test-resources.yaml
+          kubectl create secret generic influxdb-license --from-literal=INFLUXDB_ENTERPRISE_LICENSE_KEY=${INFLUXDB_ENTERPRISE_LICENSE_KEY}
+          helm upgrade --install influxdb influxdata/influxdb-enterprise --namespace default --set-string envFromSecret=influxdb-license --set-string data.service.type=NodePort
+          kubectl patch svc influxdb-influxdb-enterprise-data --type=json -p '[{"op":"replace","path":"/spec/ports/0/nodePort","value":30086}]'
+        env:
+          INFLUXDB_ENTERPRISE_LICENSE_KEY: "${{ secrets.INFLUXDB_ENTERPRISE_LICENSE_KEY }}"
+
+      - name: Chronograf
+        run: |
+          make
+          RUNNER_TRACKING_ID="" && (nohup ./chronograf > out.log 2>&1 &)
+          sleep 10
+
+      - name: Chronograf test url
+        run: |
+          echo "InfluxDB data node status: $(curl -Isk "https://localhost:8086/ping" | head -n 1)"
+          echo "Chronograf status: $(curl -Isk "http://localhost:8888" | head -n 1)"
+          cat out.log || true
+
+      - name: Cypress
+        uses: addnab/docker-run-action@v3
+        with:
+          image: cypress/browsers:node16.14.0-slim-chrome99-ff97
+          options: -i -v ${{ github.workspace }}:/chronograf -w /chronograf/ui --add-host=host.docker.internal:host-gateway
+          shell: sh
+          run: |
+            apt update
+            apt install -y build-essential
+            yarn install --frozen-lockfile
+            yarn run cypress run --browser chrome --config baseUrl=http://host.docker.internal:8888 --reporter junit --reporter-options 'mochaFile=cypress/results/results-[hash].xml'
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v2
+        if: success() || failure()
+        with:
+            name: results
+            path: |
+              out.log
+              ui/cypress/results/results-*.xml
+

.github/workflows/resources/kind-config.yaml

@@ -0,0 +1,11 @@
+---
+kind: Cluster
+apiVersion: kind.x-k8s.io/v1alpha4
+nodes:
+  - role: control-plane
+    image: kindest/node:v1.21.1@sha256:69860bda5563ac81e3c0057d654b5253219618a22ec3a346306239bba8cfa1a6
+    extraPortMappings:
+      - containerPort: 30086
+        hostPort: 8086
+        listenAddress: "0.0.0.0"
+---

.github/workflows/resources/test-resources.yaml

@@ -0,0 +1,16 @@
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: influxdb-auth
+stringData:
+  username: admin
+  password: admin
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: influxdb-shared-secret
+stringData:
+  secret: MY RANDOM STRING
+---

.gitignore

@@ -28,3 +28,6 @@ canned/apps_gen.go
 npm-debug.log
 yarn-error.log
 ui/.vs/slnx.sqlite
+out.log
+ui/cypress/kube-config
+ui/cypress/.local-chronograf-influxdb-enterprise.sh.swp

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### Other
 
 1. [#5875](https://github.com/influxdata/chronograf/pull/5875): Upgrade to node 16 LTS.
+1. [#5896](https://github.com/influxdata/chronograf/pull/5896): Add cypress tests with github workflows.
 
 ## v1.9.4 [2022-03-22]
 

Makefile

@@ -10,7 +10,7 @@ COMMIT ?= $(shell git rev-parse --short=8 HEAD)
 YARN := $(shell command -v yarn 2> /dev/null)
 
 SOURCES := $(shell find . -name '*.go' ! -name '*_gen.go' -not -path "./vendor/*" )
-UISOURCES := $(shell find ui -type f -not \( -path ui/build/\* -o -path ui/node_modules/\* -prune \) )
+UISOURCES := $(shell find ui -type f -not \( -path ui/build/\* -o -path ui/node_modules/\* -o -path ui/cypress/\* -prune \) )
 
 unexport LDFLAGS
 ifdef VERSION
@@ -124,6 +124,12 @@ run-dev: chronogiraffe
 	mkdir -p ui/build
 	./chronograf -d --log-level=debug
 
+e2e-prepare:
+	./ui/cypress/local-chronograf-influxdb-enterprise.sh
+
+e2e:
+	cd ui && yarn test:e2e
+
 clean:
 	if [ -f ${BINARY} ] ; then rm ${BINARY} ; fi
 	cd ui && yarn run clean

ui/cypress.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://on.cypress.io/cypress.schema.json",
+  "baseUrl": "http://localhost:8888",
+  "video": false,
+  "env": {
+    "ALLOW_SCREENSHOT": true,
+    "url": "https://localhost:8086",
+    "username": "admin",
+    "password": "admin",
+    "connectionName": "E1M1",
+    "insecureSkipVerify": true
+  }
+}

ui/cypress/fixtures/routes.json

@@ -0,0 +1,6 @@
+{
+  "dashboards": "/dashboards",
+  "hosts": "/hosts",
+  "explorer": "/data-explorer",
+  "config": "/manage-sources"
+}

ui/cypress/index.d.ts

@@ -0,0 +1,22 @@
+/* eslint @typescript-eslint/no-unused-vars: "off" */
+import 'jest'
+
+import {
+  getByTestID,
+  cutConnections,
+  createConnection,
+  createDashboard,
+  deleteDashboards,
+} from './support/commands'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      getByTestID: typeof getByTestID
+      cutConnections: typeof cutConnections
+      createConnection: typeof createConnection
+      createDashboard: typeof createDashboard
+      deleteDashboards: typeof deleteDashboards
+    }
+  }
+}

ui/cypress/integration/dashboard.test.ts

@@ -0,0 +1,41 @@
+describe('dashboards', () => {
+  beforeEach(() => {
+    cy.deleteDashboards()
+    cy.cutConnections()
+    cy.createConnection()
+    cy.get('@connections').then(connections => {
+      cy.fixture('routes').then(({dashboards}) => {
+        cy.visit(`/sources/${connections[0].id}${dashboards}`)
+      })
+    })
+  })
+
+  it('create, rename and delete a dashboard', () => {
+    // create a dashboard
+    cy.get('button').contains('Create Dashboard').click()
+
+    const newName = 'DashboardQA'
+
+    // rename the dashboard
+    cy.get('.rename-dashboard')
+      .should('have.text', 'Name This Dashboard')
+      .type(`${newName}{enter}`)
+      .should('have.text', newName)
+
+    // delete the dashboard
+    cy.get('@connections').then(connections => {
+      cy.fixture('routes').then(({dashboards}) => {
+        cy.visit(`/sources/${connections[0].id}${dashboards}`)
+      })
+    })
+
+    // DOM Element where the dashboard resides
+    cy.get('.panel-body > table > tbody')
+      .should('exist')
+      .within(() => {
+        // delete button
+        cy.get('.confirm-button--confirmation').click({force: true})
+      })
+      .should('not.exist')
+  })
+})