Add E2E Cypress testing (#27)

* Add E2E Cypress testing

* Update README.md

Author: mikhail-vl

.github/workflows/e2e.yml

@@ -0,0 +1,44 @@
+name: E2E
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Development build
+        run: yarn dev
+
+      - name: Start Grafana
+        run: docker-compose up -d
+
+      - name: Run e2e tests
+        run: yarn run e2e
+
+      - name: Stop Grafana
+        run: docker-compose down
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          path: |
+            cypress/videos
+            cypress/screenshots/actual

.gitignore

@@ -29,3 +29,8 @@ e2e-results/
 # Editor
 .idea
 .DS_Store
+
+# Cypress
+cypress/report.json
+cypress/videos/
+cypress/screenshots/actual

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Update CI and Release Workflows to use setup-node cache (#24)
 - Rebuild using 9.5.2 (#25)
 - Add testing-library/react (#26)
+- Add E2E Cypress testing (#27)
 
 ## 2.2.0 (2023-02-16)
 

README.md

@@ -2,18 +2,19 @@
 
 ![Dashboard](https://github.com/VolkovLabs/volkovlabs-abc-panel/raw/main/src/img/dashboard.png)
 
-[![Grafana 9](https://img.shields.io/badge/Grafana-9.3.6-orange)](https://www.grafana.com)
+[![Grafana 9](https://img.shields.io/badge/Grafana-9.5.2-orange)](https://www.grafana.com)
 ![CI](https://github.com/volkovlabs/volkovlabs-abc-panel/workflows/CI/badge.svg)
+![E2E](https://github.com/volkovlabs/volkovlabs-abc-panel/workflows/E2E/badge.svg)
 [![codecov](https://codecov.io/gh/VolkovLabs/volkovlabs-abc-panel/branch/main/graph/badge.svg?token=0m6f0ktUar)](https://codecov.io/gh/VolkovLabs/volkovlabs-abc-panel)
 [![CodeQL](https://github.com/VolkovLabs/volkovlabs-abc-panel/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/VolkovLabs/volkovlabs-abc-panel/actions/workflows/codeql-analysis.yml)
 
 ## Introduction
 
 The Abc panel is a template we created to streamline our development process and gladly share it with the Grafana community.
 
-We created many Grafana panels to this moment. To make the creation process efficient, starting with a well-constructed template is always easier.
+To make the creation process efficient, starting with a well-constructed template is always easier.
 
-Generate an application template with [https://github.com/VolkovLabs/volkovlabs-abc-panel/generate](https://github.com/VolkovLabs/volkovlabs-abc-panel/generate).
+Generate a template with [https://github.com/VolkovLabs/volkovlabs-abc-panel/generate](https://github.com/VolkovLabs/volkovlabs-abc-panel/generate).
 
 ## Requirements
 
@@ -47,7 +48,7 @@ yarn sign
 yarn run start
 ```
 
-## Features
+## Highlights
 
 - Use `docker-compose` to start the development environment with provisioned data source and a dashboard.
 - Provides unit test configuration.

cypress/integration/01-view-panel.test.ts

@@ -0,0 +1,41 @@
+import { e2e } from '@grafana/e2e';
+import { TestIds } from '../../src/constants';
+
+/**
+ * Dashboard
+ */
+const json = require('../../provisioning/dashboards/panels.json');
+const testedPanel = json.panels[0];
+
+/**
+ * Selector
+ */
+const getTestIdSelector = (testId: string) => `[data-testid="${testId}"]`;
+
+/**
+ * Panel
+ */
+describe('Viewing an Abc panel', () => {
+  beforeEach(() => {
+    e2e.flows.openDashboard({
+      uid: json.uid,
+    });
+  });
+
+  it('Should display a Hello World', () => {
+    const currentPanel = e2e.components.Panels.Panel.title(testedPanel.title);
+    currentPanel.should('be.visible');
+
+    /**
+     * Root
+     */
+    const chart = currentPanel.find(getTestIdSelector(TestIds.panel.root));
+    chart.should('be.visible');
+
+    /**
+     * Screenshot
+     */
+    chart.screenshot(testedPanel.title);
+    e2e().compareScreenshots({ name: testedPanel.title, threshold: 0.05 });
+  });
+});

cypress/screenshots/expected/01-view-panel.test.ts/Test.png

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "types": ["cypress"]
+  },
+  "extends": "../tsconfig.json"
+}

cypress/tsconfig.json

@@ -7,15 +7,9 @@ services:
     ports:
       - 3000:3000/tcp
     environment:
-      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
-      - GF_AUTH_ANONYMOUS_ENABLED=true
-      - GF_AUTH_BASIC_ENABLED=false
-      - GF_ENABLE_GZIP=true
       - GF_DEFAULT_APP_MODE=development
       - GF_DASHBOARDS_DEFAULT_HOME_DASHBOARD_PATH=/etc/grafana/provisioning/dashboards/panels.json
       - GF_INSTALL_PLUGINS=marcusolsson-static-datasource
     volumes:
       - ./dist:/var/lib/grafana/plugins/volkovlabs-abc-panel
       - ./provisioning:/etc/grafana/provisioning
-      # Uncomment to preserve Grafana configuration
-      # - ./data:/var/lib/grafana

docker-compose.yml

@@ -3,6 +3,8 @@
   "description": "Template to create a new Grafana panel plugin",
   "devDependencies": {
     "@grafana/data": "9.5.2",
+    "@grafana/e2e": "^9.5.2",
+    "@grafana/e2e-selectors": "^9.5.2",
     "@grafana/runtime": "9.5.2",
     "@grafana/toolkit": "9.5.2",
     "@grafana/ui": "9.5.2",
@@ -19,6 +21,8 @@
   "scripts": {
     "build": "grafana-toolkit plugin:build --coverage",
     "dev": "grafana-toolkit plugin:dev",
+    "e2e:update": "yarn cypress install && yarn grafana-e2e run --update-screenshots",
+    "e2e": "yarn cypress install && yarn grafana-e2e run",
     "levitate": "npx @grafana/levitate@latest is-compatible --path src/module.ts --target @grafana/data,@grafana/runtime,@grafana/ui",
     "sign": "grafana-toolkit plugin:sign --rootUrls http://localhost:3000/",
     "start": "docker-compose pull && docker-compose up",