e2e: adds inspect drawer tests (#23823)

* Explore: Create basic E2E test

* Feature: adds e2e tests for panel inspector

* Refactor: adds ts-ignore because of type checking errors

* Refactor: changes after PR comments and updates snapshot

* Refactor: adds typings back for IScope

* Refactor: changes after PR comments

Co-authored-by: Andreas Opferkuch <andreas.opferkuch@gmail.com>

e2e/suite1/specs/queryVariableCrud.spec.ts

@@ -1,5 +1,74 @@
 import { e2e } from '@grafana/e2e';
 
+// This test should really be broken into several smaller tests
+e2e.scenario({
+  describeName: 'Variables',
+  itName: 'Query Variables CRUD',
+  addScenarioDataSource: true,
+  addScenarioDashBoard: true,
+  skipScenario: false,
+  scenario: () => {
+    // @todo remove `@ts-ignore` when possible
+    // @ts-ignore
+    e2e.getScenarioContext().then(({ lastAddedDashboardUid }) => {
+      e2e.flows.openDashboard(lastAddedDashboardUid);
+    });
+    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
+    e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
+    e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
+
+    assertDefaultsForNewVariable();
+
+    e2e.pages.Dashboard.Settings.General.sectionItems('General').click();
+    e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
+    e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
+
+    let queryVariables: QueryVariableData[] = [
+      {
+        name: 'query1',
+        query: '*',
+        label: 'query1-label',
+        options: ['All', 'A', 'B', 'C'],
+        selectedOption: 'A',
+      },
+      {
+        name: 'query2',
+        query: '$query1.*',
+        label: 'query2-label',
+        options: ['All', 'AA', 'AB', 'AC'],
+        selectedOption: 'AA',
+      },
+      {
+        name: 'query3',
+        query: '$query1.$query2.*',
+        label: 'query3-label',
+        options: ['All', 'AAA', 'AAB', 'AAC'],
+        selectedOption: 'AAA',
+      },
+    ];
+
+    assertAdding3dependantQueryVariablesScenario(queryVariables);
+
+    // assert select updates
+    assertSelects(queryVariables);
+
+    // assert that duplicate works
+    queryVariables = assertDuplicateItem(queryVariables);
+
+    // assert that delete works
+    queryVariables = assertDeleteItem(queryVariables);
+
+    // assert that update works
+    queryVariables = assertUpdateItem(queryVariables);
+
+    // assert that move down works
+    queryVariables = assertMoveDownItem(queryVariables);
+
+    // assert that move up works
+    assertMoveUpItem(queryVariables);
+  },
+});
+
 const assertDefaultsForNewVariable = () => {
   logSection('Asserting defaults for new variable');
   e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().within(input => {
@@ -550,72 +619,3 @@ const assertMoveUpItem = (data: QueryVariableData[]) => {
 
   return queryVariables;
 };
-
-// This test should really be broken into several smaller tests
-e2e.scenario({
-  describeName: 'Variables',
-  itName: 'Query Variables CRUD',
-  addScenarioDataSource: true,
-  addScenarioDashBoard: true,
-  skipScenario: false,
-  scenario: () => {
-    // @todo remove `@ts-ignore` when possible
-    // @ts-ignore
-    e2e.getScenarioContext().then(({ lastAddedDashboardUid }) => {
-      e2e.flows.openDashboard(lastAddedDashboardUid);
-    });
-    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
-    e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-    e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
-
-    assertDefaultsForNewVariable();
-
-    e2e.pages.Dashboard.Settings.General.sectionItems('General').click();
-    e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-    e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
-
-    let queryVariables: QueryVariableData[] = [
-      {
-        name: 'query1',
-        query: '*',
-        label: 'query1-label',
-        options: ['All', 'A', 'B', 'C'],
-        selectedOption: 'A',
-      },
-      {
-        name: 'query2',
-        query: '$query1.*',
-        label: 'query2-label',
-        options: ['All', 'AA', 'AB', 'AC'],
-        selectedOption: 'AA',
-      },
-      {
-        name: 'query3',
-        query: '$query1.$query2.*',
-        label: 'query3-label',
-        options: ['All', 'AAA', 'AAB', 'AAC'],
-        selectedOption: 'AAA',
-      },
-    ];
-
-    assertAdding3dependantQueryVariablesScenario(queryVariables);
-
-    // assert select updates
-    assertSelects(queryVariables);
-
-    // assert that duplicate works
-    queryVariables = assertDuplicateItem(queryVariables);
-
-    // assert that delete works
-    queryVariables = assertDeleteItem(queryVariables);
-
-    // assert that update works
-    queryVariables = assertUpdateItem(queryVariables);
-
-    // assert that move down works
-    queryVariables = assertMoveDownItem(queryVariables);
-
-    // assert that move up works
-    assertMoveUpItem(queryVariables);
-  },
-});