Skip to content

Commit

Permalink
ci: switch e2e tests to cypress
Browse files Browse the repository at this point in the history
  • Loading branch information
andreasgerstmayr committed Mar 4, 2022
1 parent b036b01 commit 5799dad
Show file tree
Hide file tree
Showing 17 changed files with 561 additions and 639 deletions.
48 changes: 46 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout sources
uses: actions/checkout@v2
uses: actions/checkout@v3

- name: Install jsonnet, jsonnet-bundler and grafana/plugin-validator
run: |
Expand All @@ -40,7 +40,51 @@ jobs:
continue-on-error: true

- name: Publish build artifact
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: build
path: build

uitests:
name: 'UI Tests (${{ matrix.grafana_image }})'
needs: build
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
grafana_image: ['grafana:latest', 'grafana:8.4.3']
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Download the build artifact
uses: actions/download-artifact@v3
with:
name: build
path: build

- name: Start PCP and Redis in a pod
run: |
# workaround required on GitHub Actions to allow running systemd in rootless containers
# https://github.com/actions/virtual-environments/issues/3536
# https://github.com/ansible-community/molecule/discussions/3155
loginctl enable-linger $(whoami)
make test-ui-start-pod
- name: Run UI Tests
uses: cypress-io/github-action@v2
with:
browser: chrome
env:
CYPRESS_BASE_URL: http://127.0.0.1:3001
RESET_GRAFANA_CMD: make GRAFANA_IMAGE=docker.io/grafana/${{ matrix.grafana_image }} test-ui-start-grafana-build

- name: Publish screenshots and videos from UI tests
uses: actions/upload-artifact@v3
if: failure()
with:
name: cypress
path: |
cypress/screenshots
cypress/videos
22 changes: 0 additions & 22 deletions .github/workflows/e2e.yml

This file was deleted.

32 changes: 21 additions & 11 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ GRAFANA_PLUGIN_ID := $(shell jq -r '.id' src/plugin.json)
GRAFANA_PLUGIN_VERSION := $(shell jq -r '.version' package.json)
GRAFANA_PLUGIN_ARTIFACT := $(GRAFANA_PLUGIN_ID)-$(GRAFANA_PLUGIN_VERSION).zip
GRAFANA_PLUGIN_ARTIFACT_CHECKSUM := $(GRAFANA_PLUGIN_ARTIFACT).md5
GRAFANA_IMAGE := docker.io/grafana/grafana


##@ Dependencies
Expand Down Expand Up @@ -96,20 +97,29 @@ test-backend-coverage: deps-backend ## Run backend tests with coverage
test: test-frontend test-backend ## Run all tests


##@ E2E tests
##@ UI tests

test-e2e-build-container:
podman image exists grafana-pcp-e2e || podman build -t grafana-pcp-e2e -f ci/configurations/grafana-latest/Dockerfile .
test-ui-start-pod: ## Start PCP and Redis in a pod
-podman pod rm -f grafana-pcp-tests
podman pod create --name grafana-pcp-tests -p 3001:3000
podman run --pod grafana-pcp-tests --name grafana-pcp-tests-pcp -d --systemd always quay.io/performancecopilot/pcp
podman run --pod grafana-pcp-tests --name grafana-pcp-tests-redis -d docker.io/library/redis:6

test-e2e-start-container: test-e2e-build-container
-podman rm -f grafana-pcp-e2e
podman run -d -p 3001:3000 --name grafana-pcp-e2e grafana-pcp-e2e
test-ui-start-grafana-dist: ## Start Grafana with grafana-pcp from the dist/ folder
podman run --pod grafana-pcp-tests --name grafana-pcp-tests-grafana -d --replace \
-e GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS="performancecopilot-pcp-app,pcp-redis-datasource,pcp-vector-datasource,pcp-bpftrace-datasource,pcp-flamegraph-panel,pcp-breadcrumbs-panel,pcp-troubleshooting-panel" \
-v $$(pwd)/dist:/var/lib/grafana/plugins/performancecopilot-pcp-app \
$(GRAFANA_IMAGE)

test-e2e: test-e2e-start-container ## Run End-to-End tests
GRAFANA_URL="http://127.0.0.1:3001" node_modules/.bin/jest --config jest.config.e2e.js --runInBand
test-ui-start-grafana-build: ## Start Grafana with grafana-pcp from build/performancecopilot-pcp-app-*.zip
podman run --pod grafana-pcp-tests --name grafana-pcp-tests-grafana -d --replace \
-e GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS="performancecopilot-pcp-app,pcp-redis-datasource,pcp-vector-datasource,pcp-bpftrace-datasource,pcp-flamegraph-panel,pcp-breadcrumbs-panel,pcp-troubleshooting-panel" \
-e GF_INSTALL_PLUGINS="/tmp/plugin.zip;performancecopilot-pcp-app" \
-v $$(pwd)/build/$$(basename build/performancecopilot-pcp-app-*.zip):/tmp/plugin.zip \
$(GRAFANA_IMAGE)

test-e2e-ui: test-e2e-start-container ## Run End-to-End tests with a browser UI
GRAFANA_URL="http://127.0.0.1:3001" HEADLESS=false node_modules/.bin/jest --config jest.config.e2e.js --runInBand
test-ui: test-ui-start-pod ## Run Cypress UI tests
CYPRESS_BASE_URL="http://127.0.0.1:3001" RESET_GRAFANA_CMD="make test-ui-start-grafana-dist" yarn cypress:open


##@ Helpers
Expand All @@ -120,7 +130,7 @@ sign: ## Sign the plugin
jsonnetfmt: ## Run jsonnetfmt on all jsonnet files
jsonnetfmt -i $$(find . -name '*.jsonnet')

lint: ## Run Grafana plugincheck on the plugin zip file
plugincheck: ## Run Grafana plugincheck on the plugin zip file
plugincheck build/*.zip

clean: ## Clean all artifacts
Expand Down
13 changes: 0 additions & 13 deletions ci/configurations/grafana-8.4/Dockerfile

This file was deleted.

10 changes: 0 additions & 10 deletions ci/configurations/grafana-8.4/grafana.ini

This file was deleted.

13 changes: 0 additions & 13 deletions ci/configurations/grafana-latest/Dockerfile

This file was deleted.

1 change: 1 addition & 0 deletions cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
28 changes: 28 additions & 0 deletions cypress/integration/install.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
describe('grafana-pcp setup', () => {
before(() => {
cy.task('grafana:reset');
});

beforeEach(() => {
const user = 'admin';
const password = 'admin';
cy.request('POST', '/login', {
user,
password,
});
});

it('should install grafana-pcp', () => {
cy.visit('/plugins/performancecopilot-pcp-app/');
cy.contains('Enable').click();
cy.get('button').should('include.text', 'Disable');
});

it('should setup PCP Redis datasource', () => {
cy.visit('/datasources/new');
cy.contains('PCP Redis').click();
cy.get('input[placeholder="http://localhost:44322"]').type('http://localhost:44322');
cy.get('button[type=submit]').click();
cy.contains('Data source is working');
});
});
13 changes: 13 additions & 0 deletions cypress/integration/login.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
describe('Grafana', () => {
before(() => {
cy.task('grafana:reset');
});

it('login', () => {
cy.visit('/');
cy.get('[name=user]').type('admin');
cy.get('[name=password]').type('admin');
cy.contains('Log in').click();
cy.contains('Logged in');
});
});
27 changes: 27 additions & 0 deletions cypress/plugins/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as axios from 'axios';
import { execSync } from 'child_process';

/**
* @type {Cypress.PluginConfig}
*/
export default (on, config) => {
on('task', {
async 'grafana:reset'() {
const resetGrafanaCmd = process.env['RESET_GRAFANA_CMD'];
execSync(resetGrafanaCmd);

// wait until Grafana is ready
const baseUrl = process.env['CYPRESS_BASE_URL'];
let elapsed = 0;
while (elapsed < 10000) {
try {
await axios.get(baseUrl, { timeout: 500 });
return true;
} catch {
elapsed += 500;
}
}
return false;
},
});
};
25 changes: 25 additions & 0 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
19 changes: 19 additions & 0 deletions cypress/support/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands';

// Alternatively you can use CommonJS syntax:
// require('./commands')
8 changes: 8 additions & 0 deletions cypress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
},
"include": ["**/*.ts"]
}
5 changes: 0 additions & 5 deletions jest-puppeteer.config.js

This file was deleted.

13 changes: 0 additions & 13 deletions jest.config.e2e.js

This file was deleted.

7 changes: 2 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"dev": "grafana-toolkit plugin:dev",
"watch": "grafana-toolkit plugin:dev --watch",
"sign": "grafana-toolkit plugin:sign",
"start": "yarn watch"
"cypress:open": "cypress open"
},
"author": "Performance Co-Pilot and Netflix",
"license": "Apache-2.0",
Expand All @@ -30,9 +30,7 @@
"@types/d3-selection": "^1.4.2",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/expect-puppeteer": "^4.4.3",
"@types/jest": "^26.0.5",
"@types/jest-environment-puppeteer": "^4.4.0",
"@types/lodash": "^4.14.178",
"@types/memoize-one": "^5.1.2",
"@types/react-autosuggest": "^9.3.14",
Expand All @@ -41,14 +39,13 @@
"@types/redux-persist": "^4.3.1",
"@types/redux-persist-transform-filter": "^0.0.4",
"babel-plugin-remove-object-properties": "^1.0.2",
"cypress": "^9.5.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-prettier": "*",
"jest-date-mock": "^1.0.8",
"jest-puppeteer": "^5.0.4",
"monaco-editor-webpack-plugin": "^7.0.1",
"prettier-plugin-organize-imports": "^2.1.0",
"puppeteer": "^10.0.0",
"utility-types": "^3.10.0"
},
"dependencies": {
Expand Down
Loading

0 comments on commit 5799dad

Please sign in to comment.