Update E2E tests

.github/workflows/e2e.yml

@@ -38,3 +38,10 @@ jobs:
 
       - name: Stop Grafana
         run: docker-compose down
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/main.yml

@@ -1,9 +1,12 @@
-name: Daily E2E using Grafana Main
+name: E2E Main
 
 on:
   push:
     branches:
       - main
+  pull_request:
+    branches:
+      - main
 
   schedule:
     - cron: '0 0 * * *'

CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### Features / Enhancements
 
-- Add plugin e2e tests and remove cypress (#281)
+- Add plugin e2e tests and remove cypress (#281, #283)
+- Update context parameters in Examples (#282)
 
 ## 6.0.0 (2024-03-24)
 

provisioning/dashboards/e2e.json

@@ -18,7 +18,7 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 2,
+  "id": 3,
   "links": [],
   "liveNow": false,
   "panels": [
@@ -66,7 +66,7 @@
           "series": []
         }
       },
-      "pluginVersion": "6.0.0",
+      "pluginVersion": "6.1.0",
       "targets": [
         {
           "datasource": {
@@ -96,52 +96,6 @@
       ],
       "title": "Bar Chart",
       "type": "volkovlabs-echarts-panel"
-    },
-    {
-      "datasource": {
-        "type": "marcusolsson-static-datasource",
-        "uid": "4ytGZmF4k"
-      },
-      "gridPos": {
-        "h": 15,
-        "w": 12,
-        "x": 12,
-        "y": 0
-      },
-      "id": 2,
-      "options": {
-        "baidu": {
-          "callback": "bmapReady",
-          "key": ""
-        },
-        "editor": {
-          "format": "auto"
-        },
-        "editorMode": "visual",
-        "gaode": {
-          "key": "",
-          "plugin": "AMap.Scale,AMap.ToolBar"
-        },
-        "getOption": "const series = context.panel.data.series.map((s) => {\n  const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;\n  const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;\n  \n  return {\n    name: s.refId,\n    type: 'line',\n    showSymbol: false,\n    areaStyle: {\n      opacity: 0.1,\n    },\n    lineStyle: {\n      width: 1,\n    },\n    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),\n  };\n});\n\n/**\n * Enable Data Zoom by default\n */\nsetTimeout(() => context.panel.chart.dispatchAction({\n  type: 'takeGlobalCursor',\n  key: 'dataZoomSelect',\n  dataZoomSelectActive: true,\n}), 500);\n\n/**\n * Update Time Range on Zoom\n */\ncontext.panel.chart.on('datazoom', function (params) {\n  const startValue = params.batch[0]?.startValue;\n  const endValue = params.batch[0]?.endValue;\n  locationService.partial({ from: startValue, to: endValue });\n});\n\nreturn {\n  backgroundColor: 'transparent',\n  tooltip: {\n    trigger: 'axis',\n  },\n  legend: {\n    left: '0',\n    bottom: '0',\n    data: context.panel.data.series.map((s) => s.refId),\n    textStyle: {\n      color: 'rgba(128, 128, 128, .9)',\n    },\n  },\n  toolbox: {\n    feature: {\n      dataZoom: {\n        yAxisIndex: 'none',\n        icon: {\n          zoom: 'path://',\n          back: 'path://',\n        },\n      },\n      saveAsImage: {},\n    }\n  },\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n  grid: {\n    left: '2%',\n    right: '2%',\n    top: '2%',\n    bottom: 24,\n    containLabel: true,\n  },\n  series,\n};",
-        "google": {
-          "callback": "gmapReady",
-          "key": ""
-        },
-        "map": "none",
-        "renderer": "canvas",
-        "themeEditor": {
-          "config": "{}",
-          "name": "default"
-        },
-        "visualEditor": {
-          "code": "return {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
-          "dataset": [],
-          "series": []
-        }
-      },
-      "pluginVersion": "6.0.0",
-      "title": "Empty Chart",
-      "type": "volkovlabs-echarts-panel"
     }
   ],
   "refresh": "",
@@ -179,6 +133,6 @@
   "timezone": "",
   "title": "E2E Testing",
   "uid": "fdd5dbe3-794c-4441-9d1c-024a537bbe99",
-  "version": 2,
+  "version": 1,
   "weekStart": ""
 }

test/panel.spec.ts

@@ -1,38 +1,25 @@
 import { test, expect } from '@grafana/plugin-e2e';
+import { TEST_IDS } from '../src/constants/tests';
 
 test.describe('Business Charts Panel', () => {
-  test('should display empty chart without data and Bar Chart', async ({
-    readProvisionedDashboard,
-    gotoDashboardPage,
-    page,
-  }) => {
+  test('should display empty chart without data and Bar Chart', async ({ gotoDashboardPage, dashboardPage }) => {
     /**
-     * Use e2e.json dashboard
+     * Go To E2E dashboard
+     * return dashboardPage
      */
-    const dashboard = await readProvisionedDashboard({ fileName: 'e2e.json' });
+    await gotoDashboardPage({ uid: 'fdd5dbe3-794c-4441-9d1c-024a537bbe99' });
 
     /**
-     * Go to e2e dashboard
+     * Find panel by title with chart
+     * Should be visible
      */
-    await gotoDashboardPage(dashboard);
+    await expect(dashboardPage.getPanelByTitle('Bar Chart').locator).toBeVisible();
 
     /**
-     * Wait canvas is visible and animation is finished
+     * Check and compare image
      */
-    await page.waitForTimeout(3000);
-
-    await expect(page.getByTestId('data-testid Panel header Bar Chart').locator('canvas')).toBeVisible();
-    await expect(page.getByRole('heading', { name: 'Bar Chart' })).toBeVisible();
-    await expect(page.getByRole('heading', { name: 'Empty Chart' })).toBeVisible();
-
-    /**
-     * Check screenshot
-     */
-    // await expect(page).toHaveScreenshot('actual-screenshot.png');
-
-    /**
-     * Compare screenshot actual
-     */
-    // await expect(await page.screenshot()).toMatchSnapshot('actual-screenshot.png', { threshold: 0.3 });
+    await expect(dashboardPage.getPanelByTitle('Bar Chart').locator.getByTestId(TEST_IDS.panel.chart)).toHaveScreenshot(
+      'actual-screenshot.png'
+    );
   });
 });