Add e2e tests for panel-frame-select

examples/panel-frame-select/docker-compose.yaml

@@ -2,12 +2,14 @@ version: '3.0'
 
 services:
   grafana:
-    container_name: 'example'
+    container_name: 'panel-frame-select'
     build:
       context: ./.config
       args:
         grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
         grafana_version: ${GRAFANA_VERSION:-10.3.3}
+    environment:
+      - GF_INSTALL_PLUGINS=marcusolsson-static-datasource
     ports:
       - 3000:3000/tcp
     volumes:

examples/panel-frame-select/package.json

@@ -24,6 +24,8 @@
     "@babel/core": "^7.21.4",
     "@grafana/eslint-config": "^7.0.0",
     "@grafana/tsconfig": "1.3.0-rc1",
+    "@grafana/plugin-e2e": "^1.3.1",
+    "@playwright/test": "^1.42.1",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",

examples/panel-frame-select/playwright.config.ts

@@ -0,0 +1,44 @@
+import { dirname } from 'path';
+import { defineConfig, devices } from '@playwright/test';
+
+const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'auth',
+      testDir: pluginE2eAuth,
+      testMatch: [/.*\.js/],
+    },
+    {
+      name: 'run-tests',
+      use: {
+        ...devices['Desktop Chrome'],
+        // @grafana/plugin-e2e writes the auth state to this file,
+        // the path should not be modified
+        storageState: 'playwright/.auth/admin.json',
+      },
+      dependencies: ['auth'],
+    },
+  ],
+});

examples/panel-frame-select/provisioning/dashboards/default.yaml

@@ -0,0 +1,7 @@
+apiVersion: 1
+
+providers:
+  - name: Default
+    type: file
+    options:
+      path: /etc/grafana/provisioning/dashboards

examples/panel-frame-select/provisioning/dashboards/panels.json

@@ -0,0 +1,93 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "grafana",
+          "uid": "-- Grafana --"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": 1,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "P1D2C73DC01F2359B"
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 2,
+      "options": {
+        "seriesCountSize": "sm",
+        "showSeriesCount": false,
+        "text": "Default value of text input option"
+      },
+      "title": "Panel Title",
+      "type": "example-frameselect-panel"
+    },
+    {
+      "datasource": {
+        "type": "grafana-testdata-datasource",
+        "uid": "trlxrdZVk"
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 8
+      },
+      "id": 1,
+      "options": {
+        "selectedRefId": "A",
+        "seriesCountSize": "sm",
+        "showSeriesCount": false,
+        "text": "Default value of text input option"
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "grafana-testdata-datasource",
+            "uid": "trlxrdZVk"
+          },
+          "refId": "A",
+          "scenarioId": "exponential_heatmap_bucket_data"
+        }
+      ],
+      "title": "Panel frame select",
+      "type": "example-frameselect-panel"
+    }
+  ],
+  "refresh": "",
+  "schemaVersion": 39,
+  "tags": [],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-6h",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "Panel frame select",
+  "uid": "cda759d7-d406-46fe-97f6-31b4752d79d9",
+  "version": 1,
+  "weekStart": ""
+}

examples/panel-frame-select/provisioning/datasources/datasources.yaml

@@ -0,0 +1,14 @@
+apiVersion: 1
+
+datasources:
+  - name: Static
+    type: marcusolsson-static-datasource
+    access: proxy
+    isDefault: true
+    orgId: 1
+    version: 1
+    editable: true
+
+  - name: TestData DB
+    type: testdata
+    uid: trlxrdZVk

examples/panel-frame-select/src/SimplePanel.tsx

@@ -1,5 +1,6 @@
 import { PanelProps, SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
+import { PanelDataErrorView } from '@grafana/runtime';
 import React from 'react';
 import { SimpleOptions } from 'types';
 
@@ -37,7 +38,9 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height, onO
           <Select value={selectedRefId} options={values} onChange={(value) => setSelectedRefId(value.value)} />
           <p>Currently selected: {selectedFrame.name}</p>
         </>
-      ) : null}
+      ) : (
+        <PanelDataErrorView panelId={Number(selectedRefId)} data={data} needsStringField />
+      )}
     </div>
   );
 };

examples/panel-frame-select/tests/panel.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('should display "No data" in case panel data is empty', async ({
+  gotoPanelEditPage,
+  readProvisionedDashboard,
+}) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'panels.json' });
+  const panelEditPage = await gotoPanelEditPage({ dashboard, id: '2' });
+  await expect(panelEditPage.panel.locator).toContainText('No data');
+});
+
+test('should display selected data', async ({ gotoPanelEditPage, readProvisionedDashboard }) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'panels.json' });
+  const panelEditPage = await gotoPanelEditPage({ dashboard, id: '1' });
+  await expect(panelEditPage.panel.locator).toContainText('Currently selected: data');
+});