Plugin E2E: Add fixture that reads provisioned dashboard files

packages/plugin-e2e/src/api.ts

@@ -6,8 +6,10 @@ import {
   CreateDataSourceArgs,
   CreateDataSourcePageArgs,
   DataSourceSettings,
+  ReadProvisionedDashboardArgs,
   ReadProvisionedDataSourceArgs,
   CreateUserArgs,
+  Dashboard,
 } from './types';
 import {
   PanelEditPage,
@@ -225,6 +227,13 @@ export type PluginFixture = {
    */
   readProvisionedDataSource<T = {}, S = {}>(args: ReadProvisionedDataSourceArgs): Promise<DataSourceSettings<T, S>>;
 
+  /**
+   * Fixture command that reads a dashboard json file in the provisioning/dashboards directory.
+   *
+   * Can be useful when navigating to a provisioned dashboard and you don't want to hard code the dashboard UID.
+   */
+  readProvisionedDashboard(args: ReadProvisionedDashboardArgs): Promise<Dashboard>;
+
   /**
    * Function that checks if a feature toggle is enabled. Only works for frontend feature toggles.
    */

packages/plugin-e2e/src/fixtures/commands/readProvisionedDashboard.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { TestFixture } from '@playwright/test';
+import { promises } from 'fs';
+import { PluginFixture, PluginOptions } from '../../api';
+import { ReadProvisionedDashboardArgs } from '../../types';
+import { PlaywrightCombinedArgs } from '../types';
+
+type ReadProvisionedDashboardFixture = TestFixture<
+  <T = any>(args: ReadProvisionedDashboardArgs) => Promise<T>,
+  PluginFixture & PluginOptions & PlaywrightCombinedArgs
+>;
+
+const DASHBOARDS_DIR = 'dashboards';
+
+const readProvisionedDashboard: ReadProvisionedDashboardFixture = async ({ provisioningRootDir }, use) => {
+  await use(async ({ fileName }) => {
+    const resolvedPath = path.resolve(path.join(provisioningRootDir, DASHBOARDS_DIR, fileName));
+    const contents = await promises.readFile(resolvedPath, 'utf8');
+    return JSON.parse(contents);
+  });
+};
+
+export default readProvisionedDashboard;

packages/plugin-e2e/src/fixtures/commands/readProvisionedDataSource.ts

@@ -11,9 +11,11 @@ type ReadProvisionedDataSourceFixture = TestFixture<
   PluginFixture & PluginOptions & PlaywrightCombinedArgs
 >;
 
+const DATASOURCES_DIR = 'datasources';
+
 const readProvisionedDataSource: ReadProvisionedDataSourceFixture = async ({ provisioningRootDir }, use) => {
   await use(async ({ fileName: filePath, name }) => {
-    const resolvedPath = path.resolve(path.join(provisioningRootDir, 'datasources', filePath));
+    const resolvedPath = path.resolve(path.join(provisioningRootDir, DATASOURCES_DIR, filePath));
     const contents = await promises.readFile(resolvedPath, 'utf8');
     const yml = parseYml(contents);
     if (!name) {

packages/plugin-e2e/src/fixtures/index.ts

@@ -5,8 +5,8 @@ import login from './commands/login';
 import createDataSourceConfigPage from './commands/createDataSourceConfigPage';
 import panelEditPage from './panelEditPage';
 import createDataSource from './commands/createDataSource';
-import readProvision from './commands/readProvision';
 import readProvisionedDataSource from './commands/readProvisionedDataSource';
+import readProvisionedDashboard from './commands/readProvisionedDashboard';
 import newDashboardPage from './newDashboardPage';
 import variableEditPage from './variableEditPage';
 import explorePage from './explorePage';
@@ -26,8 +26,8 @@ const fixtures = {
   annotationEditPage,
   explorePage,
   createDataSource,
-  readProvision,
   readProvisionedDataSource,
+  readProvisionedDashboard,
   isFeatureToggleEnabled,
   createUser,
 };

packages/plugin-e2e/src/types.ts

@@ -147,11 +147,11 @@ export type DashboardEditViewArgs<T> = {
   id: T;
 };
 
-export type ReadProvisionArgs = {
+export type ReadProvisionedDashboardArgs = {
   /**
    * The path, relative to the provisioning folder, to the dashboard json file
    */
-  filePath: string;
+  fileName: string;
 };
 
 export type ReadProvisionedDataSourceArgs = {

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

@@ -36,12 +36,12 @@ test('should run successfully if valid Redshift query was provided in provisione
   page,
   selectors,
   grafanaVersion,
-  readProvision,
+  readProvisionedDashboard,
 }) => {
-  const provision = await readProvision<Dashboard>({ filePath: 'dashboards/redshift.json' });
+  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
   const annotationEditPage = new AnnotationEditPage(
     { request, page, selectors, grafanaVersion },
-    { dashboard: { uid: provision.uid }, id: '1' }
+    { dashboard, id: '1' }
   );
   await annotationEditPage.goto();
   await expect(annotationEditPage.runQuery()).toBeOK();

packages/plugin-e2e/tests/as-admin-user/datasource/data-assertions/dataAssertion.spec.ts

@@ -1,10 +1,15 @@
 import * as semver from 'semver';
 import { test, expect, PanelEditPage, DashboardPage } from '../../../../src';
-import { Dashboard } from '../../../../src/types';
 
 test.describe('panel edit page', () => {
-  test('table panel data assertions', async ({ page, selectors, grafanaVersion, request, readProvision }) => {
-    const dashboard = await readProvision<Dashboard>({ filePath: 'dashboards/redshift.json' });
+  test('table panel data assertions', async ({
+    page,
+    selectors,
+    grafanaVersion,
+    request,
+    readProvisionedDashboard,
+  }) => {
+    const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
     const panelEditPage = new PanelEditPage({ page, selectors, grafanaVersion, request }, { dashboard, id: '3' });
     await panelEditPage.goto();
     await panelEditPage.setVisualization('Table');
@@ -18,9 +23,9 @@ test.describe('panel edit page', () => {
     selectors,
     grafanaVersion,
     request,
-    readProvision,
+    readProvisionedDashboard,
   }) => {
-    const dashboard = await readProvision<Dashboard>({ filePath: 'dashboards/google-sheets.json' });
+    const dashboard = await readProvisionedDashboard({ fileName: 'google-sheets.json' });
     const panelEditPage = new PanelEditPage({ page, selectors, grafanaVersion, request }, { dashboard, id: '1' });
     await panelEditPage.goto();
     await panelEditPage.setVisualization('Time series');
@@ -31,17 +36,17 @@ test.describe('panel edit page', () => {
 });
 
 test.describe('dashboard page', () => {
-  test('getting panel by title', async ({ page, selectors, grafanaVersion, request, readProvision }) => {
-    const dashboard = await readProvision<Dashboard>({ filePath: 'dashboards/redshift.json' });
+  test('getting panel by title', async ({ page, selectors, grafanaVersion, request, readProvisionedDashboard }) => {
+    const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
     const dashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request }, dashboard);
     await dashboardPage.goto();
     const panel = await dashboardPage.getPanelByTitle('Basic table example');
     await expect(panel.fieldNames).toContainText(['time', 'temperature', 'humidity', 'environment']);
     await expect(panel.data).toContainText(['25', '32', 'staging']);
   });
 
-  test('getting panel by id', async ({ page, selectors, grafanaVersion, request, readProvision }) => {
-    const dashboard = await readProvision<Dashboard>({ filePath: 'dashboards/redshift.json' });
+  test('getting panel by id', async ({ page, selectors, grafanaVersion, request, readProvisionedDashboard }) => {
+    const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
     const dashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request }, dashboard);
     await dashboardPage.goto();
     const panel = await dashboardPage.getPanelById('3');
@@ -51,7 +56,7 @@ test.describe('dashboard page', () => {
 });
 
 test.describe('explore page', () => {
-  test('table panel', async ({ grafanaVersion, explorePage }, testInfo) => {
+  test('table panel', async ({ grafanaVersion, explorePage }) => {
     const url = semver.lt('10.0.0', grafanaVersion)
       ? `panes=%7B"_t4":%7B"datasource":"grafana","queries":%5B%7B"queryType":"randomWalk","refId":"A","datasource":%7B"type":"datasource","uid":"grafana"%7D%7D%5D,"range":%7B"from":"now-6h","to":"now"%7D%7D%7D&orgId=1&left=%7B"datasource":"grafana","queries":%5B%7B"refId":"A","datasource":%7B"type":"datasource","uid":"grafana"%7D,"queryType":"randomWalk"%7D%5D,"range":%7B"from":"now-1h","to":"now"%7D%7D`
       : 'left=%7B"datasource":"grafana","queries":%5B%7B"queryType":"randomWalk","refId":"A","datasource":%7B"type":"datasource","uid":"grafana"%7D%7D%5D,"range":%7B"from":"1547161200000","to":"1576364400000"%7D%7D&orgId=1';

packages/plugin-e2e/tests/as-admin-user/datasource/explore/queryEditor.spec.ts

@@ -1,8 +1,6 @@
 import { expect, test } from '../../../../src';
-import { ProvisionFile } from '../../../../src/types';
 
-test('editor populates query from url', async ({ explorePage, readProvision }) => {
-  const provision = await readProvision<ProvisionFile>({ filePath: 'datasources/google-sheets-datasource-jwt.yaml' });
+test('editor populates query from url', async ({ explorePage }) => {
   await explorePage.goto({
     queryParams: new URLSearchParams(
       `panes=%7B%22xlX%22:%7B%22datasource%22:%22undefined%22,%22queries%22:%5B%7B%22refId%22:%22A%22,%22datasource%22:%7B%22type%22:%22grafana-redshift-datasource%22,%22uid%22:%22P7DC3E4760CFAC4AH%22%7D,%22rawSQL%22:%22SELECT%20%2A%20FROM%20public.average_temperature%22,%22format%22:0%7D%5D,%22range%22:%7B%22from%22:%221579046400000%22,%22to%22:%221607990400000%22%7D%7D%7D&schemaVersion=1&orgId=1&left=%7B%22datasource%22:%22P7DC3E4760CFAC4AH%22,%22queries%22:%5B%7B%22refId%22:%22A%22,%22datasource%22:%7B%22type%22:%22grafana-redshift-datasource%22,%22uid%22:%22P7DC3E4760CFAC4AH%22%7D,%22rawSQL%22:%22SELECT%20%2A%20FROM%20public.average_temperature%22,%22format%22:0%7D%5D,%22range%22:%7B%22from%22:%22now-1h%22,%22to%22:%22now%22%7D%7D`

packages/plugin-e2e/tests/as-admin-user/datasource/variables/customVariableQueryRunner.integration.spec.ts

@@ -23,9 +23,9 @@ test('custom variable editor query runner should return data when valid query fr
   page,
   selectors,
   grafanaVersion,
-  readProvision,
+  readProvisionedDashboard,
 }) => {
-  const provision = await readProvision<Dashboard>({ filePath: 'dashboards/redshift.json' });
+  const provision = await readProvisionedDashboard({ fileName: 'redshift.json' });
   const variableEditPage = new VariableEditPage(
     { request, page, selectors, grafanaVersion },
     { dashboard: { uid: provision.uid }, id: '2' }

packages/plugin-e2e/tests/as-admin-user/datasource/variables/variableInterpolation.spec.ts

@@ -1,13 +1,12 @@
 import { test, expect, PanelEditPage } from '../../../../src';
-import { Dashboard } from '../../../../src/types';
 
-test('variable interpolation', async ({ readProvision, request, page, selectors, grafanaVersion }) => {
-  const provision = await readProvision<Dashboard>({ filePath: 'dashboards/redshift.json' });
+test('variable interpolation', async ({ readProvisionedDashboard, request, page, selectors, grafanaVersion }) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
   const panelEditPage = new PanelEditPage(
     { request, page, selectors, grafanaVersion },
     {
       id: '5',
-      dashboard: { uid: provision.uid },
+      dashboard,
     }
   );
   const queryReq = panelEditPage.waitForQueryDataRequest((request) =>
@@ -20,18 +19,18 @@ test('variable interpolation', async ({ readProvision, request, page, selectors,
 });
 
 test('variable interpolation (navigate to panel from dashboard)', async ({
-  readProvision,
+  readProvisionedDashboard,
   request,
   page,
   selectors,
   grafanaVersion,
 }) => {
-  const provision = await readProvision<Dashboard>({ filePath: 'dashboards/redshift.json' });
+  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
   const panelEditPage = new PanelEditPage(
     { request, page, selectors, grafanaVersion },
     {
       id: '5',
-      dashboard: { uid: provision.uid },
+      dashboard,
     }
   );
   const queryReq = panelEditPage.waitForQueryDataRequest((request) =>

packages/plugin-e2e/tests/as-admin-user/panel/panel.spec.ts

@@ -1,6 +1,5 @@
 import fs from 'fs';
 import { DashboardPage, PanelEditPage, expect, test } from '../../../src';
-import { Dashboard } from '../../../src/types';
 import { clickRadioButton } from '../../utils';
 
 test.describe.configure({ mode: 'parallel' });
@@ -18,9 +17,9 @@ test('open a clock panel in a provisioned dashboard and set time format to "12 h
   page,
   request,
   grafanaVersion,
-  readProvision,
+  readProvisionedDashboard,
 }) => {
-  const dashboard = await readProvision<Dashboard>({ filePath: 'dashboards/clock-panel.json' });
+  const dashboard = await readProvisionedDashboard({ fileName: 'clock-panel.json' });
   const args = { dashboard: { uid: dashboard.uid }, id: '5' };
   const panelEditPage = await new PanelEditPage({ page, selectors, grafanaVersion, request }, args);
   await panelEditPage.goto();