e2e updated

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'
+    );
   });
 });