e2e: adds e2e for panel edit (#23849)

* 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

* e2e: adds e2e for panel edit

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

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

@@ -1,8 +1,8 @@
 import { TestData } from '../pages/testdata';
 import { Panel } from '../pages/panel';
-import { EditPanel } from '../pages/editPanel';
 import { Graph } from '../pages/graph';
 import { componentFactory } from '../support';
+import { Dashboard } from '../pages/dashboard';
 
 export const Components = {
   DataSource: {
@@ -10,7 +10,6 @@ export const Components = {
   },
   Panels: {
     Panel,
-    EditPanel,
     Visualization: {
       Graph,
     },
@@ -26,6 +25,27 @@ export const Components = {
       },
     }),
   },
+  PanelEditor: {
+    General: componentFactory({
+      selectors: {
+        content: 'Panel editor content',
+      },
+    }),
+    OptionsPane: componentFactory({
+      selectors: {
+        content: 'Panel editor option pane content',
+        close: Dashboard.selectors.toolbarItems('Close options pane'),
+        open: Dashboard.selectors.toolbarItems('Open options pane'),
+        select: 'Panel editor option pane select',
+      },
+    }),
+    // not sure about the naming *DataPane*
+    DataPane: componentFactory({
+      selectors: {
+        content: 'Panel editor data pane content',
+      },
+    }),
+  },
   PanelInspector: {
     Data: componentFactory({
       selectors: {
@@ -54,6 +74,21 @@ export const Components = {
       active: () => '[class*="-activeTabStyle"]',
     },
   }),
+  QueryTab: componentFactory({
+    selectors: {
+      content: 'Query editor tab content',
+    },
+  }),
+  AlertTab: componentFactory({
+    selectors: {
+      content: 'Alert editor tab content',
+    },
+  }),
+  TransformTab: componentFactory({
+    selectors: {
+      content: 'Transform editor tab content',
+    },
+  }),
   QueryEditorToolbarItem: componentFactory({
     selectors: {
       button: (title: string) => `QueryEditor toolbar item button ${title}`,
@@ -64,4 +99,30 @@ export const Components = {
       backArrow: 'Go Back button',
     },
   }),
+  OptionsGroup: componentFactory({
+    selectors: {
+      toggle: (title: string) => `Options group ${title}`,
+    },
+  }),
+  PluginVisualization: componentFactory({
+    selectors: {
+      item: (title: string) => `Plugin visualization item ${title}`,
+      current: () => '[class*="-currentVisualizationItem"]',
+    },
+  }),
+  Select: componentFactory({
+    selectors: {
+      option: 'Select option',
+    },
+  }),
+  FieldConfigEditor: componentFactory({
+    selectors: {
+      content: 'Field config editor content',
+    },
+  }),
+  OverridesConfigEditor: componentFactory({
+    selectors: {
+      content: 'Field overrides editor content',
+    },
+  }),
 };

packages/grafana-e2e/src/pages/editPanel.ts

@@ -1,8 +0,0 @@
-import { pageFactory } from '../support';
-
-export const EditPanel = pageFactory({
-  url: '',
-  selectors: {
-    tabItems: (text: string) => `Edit panel tab item ${text}`,
-  },
-});