E2E: improvements to the importDashboard flow (#39693)

* E2E: improvements to the importDashboard flow

packages/grafana-e2e/src/flows/importDashboard.ts

@@ -7,13 +7,14 @@ type Panel = {
   [key: string]: unknown;
 };
 
-type Dashboard = { title: string; panels: Panel[]; uid: string; [key: string]: unknown };
+export type Dashboard = { title: string; panels: Panel[]; uid: string; [key: string]: unknown };
 
 /**
- * Smoke test a datasource by quickly importing a test dashboard for it
+ * Smoke test a particular dashboard by quickly importing a json file and validate that all the panels finish loading
  * @param dashboardToImport a sample dashboard
+ * @param queryTimeout a number of ms to wait for the imported dashboard to finish loading
  */
-export const importDashboard = (dashboardToImport: Dashboard) => {
+export const importDashboard = (dashboardToImport: Dashboard, queryTimeout?: number) => {
   e2e().visit(fromBaseUrl('/dashboard/import'));
 
   // Note: normally we'd use 'click' and then 'type' here, but the json object is so big that using 'val' is much faster
@@ -24,7 +25,9 @@ export const importDashboard = (dashboardToImport: Dashboard) => {
   e2e.components.DashboardImportPage.submit().should('be.visible').click();
   e2e.components.ImportDashboardForm.name().should('be.visible').click().clear().type(dashboardToImport.title);
   e2e.components.ImportDashboardForm.submit().should('be.visible').click();
-  e2e().wait(3000);
+
+  // wait for dashboard to load
+  e2e().wait(queryTimeout || 6000);
 
   // save the newly imported dashboard to context so it'll get properly deleted later
   e2e()
@@ -42,19 +45,21 @@ export const importDashboard = (dashboardToImport: Dashboard) => {
       expect(dashboardToImport.uid).to.equal(uid);
     });
 
-  // inspect first panel and verify data has been processed for it
-  e2e.components.Panels.Panel.title(dashboardToImport.panels[0].title).should('be.visible').click();
-  e2e.components.Panels.Panel.headerItems('Inspect').should('be.visible').click();
-  e2e.components.Tab.title('JSON').should('be.visible').click();
-  e2e().wait(3000);
-  e2e.components.PanelInspector.Json.content().should('be.visible').contains('Panel JSON').click();
-  e2e().wait(3000);
-  e2e.components.Select.option().should('be.visible').contains('Data').click();
-  e2e().wait(3000);
+  dashboardToImport.panels.forEach((panel) => {
+    // Look at the json data
+    e2e.components.Panels.Panel.title(panel.title).should('be.visible').click();
+    e2e.components.Panels.Panel.headerItems('Inspect').should('be.visible').click();
+    e2e.components.Tab.title('JSON').should('be.visible').click();
+    e2e.components.PanelInspector.Json.content().should('be.visible').contains('Panel JSON').click();
+    e2e.components.Select.option().should('be.visible').contains('Data').click();
 
-  // ensures that panel has loaded without knowingly hitting an error
-  // note: this does not prove that data came back as we expected it,
-  // it could get `state: Done` for no data for example
-  // but it ensures we didn't hit a 401 or 500 or something like that
-  e2e.components.CodeEditor.container().should('be.visible').contains('"state": "Done"');
+    // ensures that panel has loaded without knowingly hitting an error
+    // note: this does not prove that data came back as we expected it,
+    // it could get `state: Done` for no data for example
+    // but it ensures we didn't hit a 401 or 500 or something like that
+    e2e.components.CodeEditor.container().should('be.visible').contains('"state": "Done"');
+
+    // need to close panel
+    e2e.components.Drawer.General.close().click();
+  });
 };

packages/grafana-e2e/src/flows/importDashboards.ts

@@ -0,0 +1,19 @@
+import { importDashboard, Dashboard } from './importDashboard';
+import { e2e } from '../index';
+
+/**
+ * Smoke test several dashboard json files from a test directory
+ * and validate that all the panels in each import finish loading their queries
+ * @param dirPath the relative path to a directory which contains json files representing dashboards,
+ * for example if your dashboards live in `cypress/testDashboards` you can pass `/testDashboards`
+ * @param queryTimeout a number of ms to wait for the imported dashboard to finish loading
+ */
+export const importDashboards = async (dirPath: string, queryTimeout?: number) => {
+  e2e()
+    .getJSONFilesFromDir(dirPath)
+    .then((jsonFiles: Dashboard[]) => {
+      jsonFiles.forEach((file) => {
+        importDashboard(file, queryTimeout || 6000);
+      });
+    });
+};

packages/grafana-e2e/src/flows/index.ts

@@ -13,6 +13,7 @@ export * from './revertAllChanges';
 export * from './saveDashboard';
 export * from './selectOption';
 export * from './importDashboard';
+export * from './importDashboards';
 
 export {
   VISUALIZATION_ALERT_LIST,