Add cypress e2e tests

Author: Philipp Siegmantel

.github/workflows/e2e.yml

@@ -0,0 +1,10 @@
+name: Run the e2e tests
+on: push
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: run the e2e tests
+        run: docker-compose up --exit-code-from=cypress
+        working-directory: tests/

.gitignore

@@ -29,3 +29,7 @@ e2e-results/
 # Editor
 .idea
 
+
+# cypress atrifacts
+tests/cypress/screenshots/
+tests/cypress/videos/

DEVELOPMENT.md

@@ -46,3 +46,52 @@ yarn upgrade --latest
 ## Release
 
 TBD
+
+
+### E2E Tests
+There are serval ways to run the e2e tests.
+Make sure to have a up to date `dist/` folder using `yarn build`.
+
+#### Local development use case
+```BASH
+cd tests/
+docker-compose up -d checkmk grafana
+yarn run cypress open
+```
+This will show you a nice interactive GUI to run and debug your E2E tests.
+See the official [docs](https://docs.cypress.io/guides/overview/why-cypress) for more information.
+
+#### No Interactivity use case (e.g. CI)
+```BASH
+cd tests/
+docker-compose up --exit-code-from=cypress
+```
+This will run all tests without any further interaction necessary.
+
+#### No docker use case
+If you don't want to or can't use docker at all, make sure you have a Grafana and a CheckMK instance running somewhere.
+The Plugin you want to test needs to be installed in you Grafana instance.
+
+
+You also need to set serval environment variables.
+
+| Variable                    | Description |
+|-----------------------------|-------------|
+| CYPRESS_baseUrl             | The URL to your Grafana instance |
+| CYPRESS_grafanaUsername     | The username used to log into Grafana |
+| CYPRESS_grafanaPassword     | the password used to log into Grafana|
+| CYPRESS_grafanaToCheckmkUrl | The url from which grafana can reach CheckMK |
+| CYPRESS_cypressToCheckmkUrl | The url from which cypress can reach CheckMK |
+| CYPRESS_cmkUsername         | The username of a CheckMK admin |
+| CYPRESS_cmkPassword         | The password of that CheckMK admin |
+
+If everything is set up, just start cypress the usual way.
+```BASH
+yarn run cypress open
+
+# or if you just want to see the results
+yarn run cypress run
+```
+
+Please note that the test have side effects on your Grafana and CheckMK instance,
+such as creating a new automation user.

tests/checkmk-docker-hooks/post-create/enable-webapi.sh

@@ -0,0 +1,3 @@
+#! /usr/bin/env bash
+
+echo "disable_web_api = False" >> /omd/sites/cmk/etc/check_mk/multisite.d/wato/global.mk

tests/checkmk-docker-hooks/post-create/set-admin-password.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+htpasswd -b -m /omd/sites/cmk/etc/htpasswd cmkadmin abskjfdalkdhjbld

tests/cypress.config.js

@@ -0,0 +1,7 @@
+module.exports = require('cypress').defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    supportFile: false,
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+  },
+});

tests/cypress.env.json

@@ -0,0 +1,8 @@
+{
+  "grafanaUsername": "admin",
+  "grafanaPassword": "password",
+  "grafanaToCheckmkUrl": "http://checkmk:5000/cmk",
+  "cypressToCheckmkUrl": "http://localhost:12345/cmk",
+  "cmkUsername": "cmkadmin",
+  "cmkPassword": "abskjfdalkdhjbld"
+}

tests/cypress/e2e/spec.cy.ts

@@ -0,0 +1,51 @@
+describe('Source configuration', () => {
+  const cmkUser = 'cmkuser';
+  const cmkPassword = 'somepassword123457';
+
+  function createCmkAutomationUser() {
+    cy.request({
+      method: 'DELETE',
+      url: Cypress.env('cypressToCheckmkUrl') + '/check_mk/api/1.0/objects/user_config/' + cmkUser,
+      auth: {
+        bearer: `${Cypress.env('cmkUsername')} ${Cypress.env('cmkPassword')}`,
+      },
+      failOnStatusCode: false,
+    });
+    cy.request({
+      method: 'POST',
+      url: Cypress.env('cypressToCheckmkUrl') + '/check_mk/api/1.0/domain-types/user_config/collections/all',
+      auth: {
+        bearer: `${Cypress.env('cmkUsername')} ${Cypress.env('cmkPassword')}`,
+      },
+      body: {
+        username: cmkUser,
+        fullname: cmkUser,
+        roles: ['admin'],
+        auth_option: {
+          auth_type: 'automation',
+          secret: cmkPassword,
+        },
+      },
+    });
+  }
+
+  it('configures the datasource correctly', () => {
+    createCmkAutomationUser();
+
+    cy.visit('/');
+    cy.get('input[name="user"]').type(Cypress.env('grafanaUsername'));
+    cy.get('input[name="password"]').type(Cypress.env('grafanaPassword'));
+    cy.get('[aria-label="Login button"]').click();
+
+    cy.visit('/datasources/new');
+    cy.get('button[aria-label="Add data source Checkmk"]').contains('Checkmk').click();
+
+    cy.get('[data-test-id="checkmk-url"]').type(Cypress.env('grafanaToCheckmkUrl'));
+    cy.get('[data-test-id="checkmk-username"]').type(cmkUser);
+    cy.get('[data-test-id="checkmk-password"]').type(cmkPassword);
+
+    cy.get('[aria-label="Data source settings page Save and Test button"]').click();
+
+    cy.get('[data-testid="data-testid Alert success"]').should('be.visible');
+  });
+});

tests/cypress/start.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+npx wait-on http://checkmk:5000 && cypress run

tests/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }