Plugin E2E: Fix APIs that are broken in older versions of Grafana (#739)

docusaurus/docs/e2e-test-a-plugin/test-a-data-source-plugin/configuration-editor.md

@@ -69,7 +69,11 @@ test('"Save & test" should be successful when configuration is valid', async ({
   const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
   const configPage = await createDataSourceConfigPage({ type: ds.type });
   const healthCheckPath = `${selectors.apis.DataSource.proxy(configPage.datasource.uid)}/test`;
-  await page.route(healthCheckPath, async (route) => await route.fulfill({ status: 200, body: 'OK' }));
+  await page.route(healthCheckPath, async (route) => await route.fulfill({ status: 200, body: 'OK' })
+  const healthCheckPath = `${selectors.apis.DataSource.proxy(
+    configPage.datasource.uid,
+    configPage.datasource.id.toString()
+  )}/test`;);
   await expect(configPage.saveAndTest({ path: healthCheckPath })).toBeOK();
 });
 ```
@@ -84,7 +88,10 @@ test('"Save & test" should display success alert box when config is valid', asyn
 }) => {
   const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
   const configPage = await createDataSourceConfigPage({ type: ds.type });
-  const healthCheckPath = `${selectors.apis.DataSource.proxy(configPage.datasource.uid)}/test`;
+  const healthCheckPath = `${selectors.apis.DataSource.proxy(
+    configPage.datasource.uid,
+    configPage.datasource.id.toString()
+  )}/test`;
   await page.route(healthCheckPath, async (route) => await route.fulfill({ status: 200, body: 'OK' }));
   await expect(configPage.saveAndTest({ path: healthCheckPath })).toBeOK();
   await expect(configPage).toHaveAlert('success');

packages/create-plugin/src/commands/generate/print-success-message.ts

@@ -17,7 +17,7 @@ export function printGenerateSuccessMessage(answers: CliArgs) {
       : []),
     '- `docker-compose up` to start a grafana development server. ' +
       (answers.hasBackend
-       ? 'The plugin backend will be reloaded on every code change and a debugger can be attached on port `2345`.'
+        ? 'The plugin backend will be reloaded on every code change and a debugger can be attached on port `2345`.'
         : ''),
     '- Open http://localhost:3000 in your browser to create a dashboard to begin developing your plugin.',
   ];

packages/plugin-e2e/src/e2e-selectors/types.ts

@@ -12,7 +12,7 @@ export type APIs = {
     query: string;
     health: (uid: string, id: string) => string;
     datasourceByUID: (uid: string) => string;
-    proxy: (uid: string) => string;
+    proxy: (uid: string, id: string) => string;
   };
   Dashboard: {
     delete: (uid: string) => string;
@@ -179,10 +179,12 @@ export type Pages = {
           newButton: string;
           addVariableCTAV2: (variableName: string) => string;
           addVariableCTAV2Item: string;
+          table: string;
         };
         Edit: {
           url: (dashboardUid: string, editIndex: string) => string;
           General: {
+            selectionOptionsIncludeAllSwitch: string;
             generalTypeSelectV2: string;
             previewOfValuesOption: string;
             submitButton: string;

packages/plugin-e2e/src/e2e-selectors/versioned/apis.ts

@@ -23,7 +23,8 @@ export const versionedAPIs = {
       [MIN_GRAFANA_VERSION]: (uid: string) => `/api/datasources/uid/${uid}`,
     },
     proxy: {
-      [MIN_GRAFANA_VERSION]: (uid: string) => `api/datasources/proxy/uid/${uid}`,
+      '9.4.0': (uid: string, _: string) => `api/datasources/proxy/uid/${uid}`,
+      [MIN_GRAFANA_VERSION]: (_: string, id: string) => `/api/datasources/proxy/${id}`,
     },
   },
   Dashboard: {

packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts

@@ -120,6 +120,9 @@ export const versionedPages = {
               '10.4.0': 'data-testid Variable editor Run Query button',
               [MIN_GRAFANA_VERSION]: 'Variable editor Submit button',
             },
+            selectionOptionsIncludeAllSwitch: {
+              [MIN_GRAFANA_VERSION]: 'Variable editor Form IncludeAll switch',
+            },
           },
         },
       },

packages/plugin-e2e/src/models/pages/AnnotationEditPage.ts

@@ -19,7 +19,15 @@ export class AnnotationEditPage extends GrafanaPage {
       ? Dashboard.Settings.Annotations.Edit.url(this.args.dashboard.uid, this.args.id)
       : AddDashboard.Settings.Annotations.Edit.url(this.args.id);
 
-    return super.navigate(url, options);
+    await super.navigate(url, options);
+
+    // In versions before 9.2.0, the annotation index is not part of the URL so there's no way to navigate to it directly.
+    // Instead, we have to click the nth row in the variable list to navigate to the edit page for a given annotation index.
+    if (semver.lt(this.ctx.grafanaVersion, '9.2.0') && this.args.id) {
+      const list = this.ctx.page.locator('tbody tr');
+      const variables = await list.all();
+      await variables[Number(this.args.id)].click();
+    }
   }
 
   /**

packages/plugin-e2e/src/models/pages/ExplorePage.ts

@@ -1,4 +1,4 @@
-const semver = require('semver');
+import * as semver from 'semver';
 import { Locator, expect } from '@playwright/test';
 import { NavigateOptions, PluginTestCtx, RequestOptions } from '../../types';
 import { DataSourcePicker } from '../components/DataSourcePicker';

packages/plugin-e2e/src/models/pages/VariableEditPage.ts

@@ -1,5 +1,4 @@
-const gte = require('semver/functions/gte');
-
+import * as semver from 'semver';
 import { DashboardEditViewArgs, NavigateOptions, PluginTestCtx } from '../../types';
 import { DataSourcePicker } from '../components/DataSourcePicker';
 import { GrafanaPage } from './GrafanaPage';
@@ -24,6 +23,16 @@ export class VariableEditPage extends GrafanaPage {
       : AddDashboard.Settings.Variables.Edit.url(this.args.id);
 
     await super.navigate(url, options);
+
+    // In versions before 9.2.0, the variable index is not part of the URL so there's no way to navigate to it directly.
+    // Instead, we have to click the nth row in the variable list to navigate to the edit page for a given variable index.
+    if (semver.lt(this.ctx.grafanaVersion, '9.2.0') && this.args.id) {
+      const list = this.getByGrafanaSelector(this.ctx.selectors.pages.Dashboard.Settings.Variables.List.table).locator(
+        'tbody tr'
+      );
+      const variables = await list.all();
+      await variables[Number(this.args.id)].click();
+    }
   }
 
   /**
@@ -51,13 +60,19 @@ export class VariableEditPage extends GrafanaPage {
    */
   async runQuery() {
     // in 9.2.0, the submit button got a new purpose. it no longer submits the form, but instead runs the query
-    if (gte(this.ctx.grafanaVersion, '9.2.0')) {
+    if (semver.gte(this.ctx.grafanaVersion, '9.2.0')) {
       await this.getByGrafanaSelector(
         this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.submitButton
       ).click();
     } else {
-      // in 9.1.3, the submit button submits the form
-      await this.ctx.page.keyboard.press('Tab');
+      // in version before 9.2.0, there's no submit button, so instead we click the "Include all" button to trigger the query
+      const queryDataRequest = this.waitForQueryDataRequest();
+      const includeAllSwitch = this.getByGrafanaSelector(
+        this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
+      ).locator('..');
+      await includeAllSwitch.click();
+      await queryDataRequest;
+      await includeAllSwitch.click();
     }
   }
 }

packages/plugin-e2e/tests/as-admin-user/datasource/annotations/annotationEditor.spec.ts

@@ -1,3 +1,4 @@
+import * as semver from 'semver';
 import { test, expect, AnnotationPage } from '../../../../src';
 import { REDSHIFT_SCHEMAS } from '../mocks/resource';
 
@@ -13,7 +14,7 @@ test('should load resources and display them as options when clicking on an inpu
   await expect(annotationEditPage.getByGrafanaSelector('Select option')).toContainText(REDSHIFT_SCHEMAS);
 });
 
-test('should be able to add a new annotation when there annotations already exist', async ({
+test('should be able to add a new annotation when annotations already exist', async ({
   page,
   selectors,
   grafanaVersion,
@@ -24,5 +25,9 @@ test('should be able to add a new annotation when there annotations already exis
   const annotationPage = new AnnotationPage({ page, selectors, grafanaVersion, request, testInfo }, dashboard);
   await annotationPage.goto();
   await annotationPage.clickAddNew();
-  await expect(page).toHaveTitle(/New annotation.*/);
+  if (semver.gte(grafanaVersion, '9.2.0')) {
+    await expect(page).toHaveTitle(/New annotation.*/);
+  } else {
+    await expect(page.getByText('When enabled the annotation query is issued every dashboard refresh')).toBeVisible();
+  }
 });

packages/plugin-e2e/tests/as-admin-user/datasource/config-editor/configEditor.spec.ts

@@ -21,7 +21,10 @@ test('should call a custom health endpoint when healthCheckPath is provided', as
   selectors,
 }) => {
   const configPage = await createDataSourceConfigPage({ type: 'marcusolsson-json-datasource' });
-  const healthCheckPath = selectors.apis.DataSource.proxy(configPage.datasource.uid);
+  const healthCheckPath = selectors.apis.DataSource.proxy(
+    configPage.datasource.uid,
+    configPage.datasource.id.toString()
+  );
   await page.route(healthCheckPath, async (route) => {
     await route.fulfill({ status: 200, body: 'OK' });
   });