E2E Testing with Cypress (#191)

Introduction of end to end tests to facilitate with with development, code review, regression, etc.

* bootstrap cypress
* graph_panel_spec

.gitignore

@@ -1,3 +1,4 @@
 site
 *_test_output.json
+e2e/node_modules
 .DS_Store

e2e/README.md

@@ -0,0 +1,40 @@
+# Grafonnet End to End Testing
+
+Grafonnet uses [Cypress](https://www.cypress.io).
+
+## Purpose
+
+These tests attempt to assert truth to the following:
+
+* Does this library generate valid dashboard JSON?
+* Are dashboard elements displayed as expected?
+* Do elements get configured as intended?
+* Do the configured elements do what they're expected to do?
+
+Some of this is automated here. However, the visual aspects are difficult for machines to cover. Even some behavioral aspects are as well because they incur an impractical amount of complexity, time, or cost. For those aspects, these tests provide a way to quickly generate dashboards consistently so we can use our human abilities to assert truth.
+
+## Usage
+
+Install dependencies:
+
+```
+yarn install
+```
+
+Run a Grafana instance to test with:
+
+```
+yarn run grafana-instance
+```
+
+Launch the [Cypress Test Runner](https://docs.cypress.io/guides/core-concepts/test-runner.html):
+
+```
+yarn run cypress open
+```
+
+## Notes
+
+Tests depend on compiled artifacts in [tests](../tests) for generating dashboards.
+
+Tests do not destroy the dashboards they create after they're run. This is to facilitate manual inspection. Restart your Grafana instance to start fresh.

e2e/cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://admin:admin@localhost:3030"
+}

e2e/cypress/integration/graph_panel_spec.js

@@ -0,0 +1,36 @@
+const fs = require('fs')
+
+describe('Graph Panel', function() {
+
+  let panelTitles = []
+
+  before(function() {
+    cy.readFile('../tests/graph_panel/test_compiled.json').then(function(str) {
+      let panels = []
+      for (let [i, [name, panel]] of Object.entries(Object.entries(str))) {
+        panel['id'] = parseInt(i)
+        panel['gridPos'] = {'w': 6, 'h': 4, 'x': i * 6 % 24 }
+        if (name == "alerts" || name == "alertsWithMultipleConditions") {
+          // Skip panels with alerts. They are incompatible with the
+          // test datasource and result in 500 errors.
+          continue
+        }
+        panelTitles.push(panel.title)
+        panels.push(panel)
+      }
+      let dashboardJSON = {
+        "uid": "graph-panel",
+        "title": "Graph Panel",
+        "panels": panels
+      }
+      cy.createDashboard(dashboardJSON)
+    })
+  })
+
+  it('renders all graph panels', function() {
+    cy.visit('/d/graph-panel/graph-panel')
+    for (const title of panelTitles) {
+      cy.contains(title)
+    }
+  })
+})

e2e/cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

e2e/cypress/support/commands.js

@@ -0,0 +1,24 @@
+const http = require("http")
+
+Cypress.Commands.add('createDashboard', function(dashboardJSON) {
+
+  const payload = JSON.stringify({
+    dashboard: dashboardJSON,
+    overwrite: true
+  })
+
+  const options = {
+    auth: 'admin:admin',
+    hostname: 'localhost',
+    port: 3030,
+    path: '/api/dashboards/db',
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  const req = http.request(options)
+  req.write(payload)
+  req.end()
+})

e2e/cypress/support/index.js

@@ -0,0 +1 @@
+require('./commands')

e2e/package.json

@@ -0,0 +1,9 @@
+{
+  "license": "Apache-2.0",
+  "scripts": {
+    "grafana-instance": "docker run --rm --name=grafana -p 3030:3000 grafana/grafana:6.6.2"
+  },
+  "devDependencies": {
+    "cypress": "^4.4.0"
+  }
+}