@grafana/e2e: improvements (#25610)

* Added dependency for attaching files to forms

* Fixed closing of panel options

* Updated lockfile

packages/grafana-e2e/cypress/support/commands.ts

+import 'cypress-file-upload';
+
 interface CompareScreenshotsConfig {
   name: string;
   threshold?: number;

packages/grafana-e2e/cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "declaration": false,
     "module": "commonjs",
-    "types": ["cypress"]
+    "types": ["cypress", "cypress-file-upload"]
   },
   "extends": "@grafana/tsconfig",
   "include": ["**/*.ts"]

packages/grafana-e2e/package.json

@@ -50,6 +50,7 @@
     "blink-diff": "1.0.13",
     "commander": "5.0.0",
     "cypress": "^4.7.0",
+    "cypress-file-upload": "^4.0.7",
     "execa": "4.0.0",
     "resolve-as-bin": "2.1.0",
     "ts-loader": "6.2.1",

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

@@ -45,11 +45,7 @@ export const addPanel = (config?: Partial<AddPanelConfig>): any =>
       .scrollIntoView()
       .click();
 
-    isOptionsOpen().then((isOpen: any) => {
-      if (!isOpen) {
-        toggleOptions();
-      }
-    });
+    openOptions();
 
     openOptionsGroup('settings');
     getOptionsGroup('settings')
@@ -75,11 +71,7 @@ export const addPanel = (config?: Partial<AddPanelConfig>): any =>
     //e2e.components.Panels.Panel.containerByTitle(panelTitle).find('.panel-content').contains('No data');
     //e2e.components.QueryEditorRow.actionButton('Disable/enable query').click();
 
-    isOptionsOpen().then((isOpen: any) => {
-      if (isOpen) {
-        toggleOptions();
-      }
-    });
+    closeOptions();
 
     e2e()
       .get('button[title="Apply changes and go back to dashboard"]')
@@ -90,6 +82,14 @@ export const addPanel = (config?: Partial<AddPanelConfig>): any =>
   });
 
 // @todo this actually returns type `Cypress.Chainable`
+const closeOptions = (): any =>
+  isOptionsOpen().then((isOpen: any) => {
+    if (isOpen) {
+      e2e.components.PanelEditor.OptionsPane.close().click();
+    }
+  });
+
+// @todo this actually returns type `Cypress.Chainable`
 const closeOptionsGroup = (name: string): any =>
   isOptionsGroupOpen(name).then((isOpen: any) => {
     if (isOpen) {
@@ -119,6 +119,14 @@ const isOptionsOpen = (): any =>
   });
 
 // @todo this actually returns type `Cypress.Chainable`
+const openOptions = (): any =>
+  isOptionsOpen().then((isOpen: any) => {
+    if (!isOpen) {
+      e2e.components.PanelEditor.OptionsPane.open().click();
+    }
+  });
+
+// @todo this actually returns type `Cypress.Chainable`
 const openOptionsGroup = (name: string): any =>
   isOptionsGroupOpen(name).then((isOpen: any) => {
     if (!isOpen) {
@@ -126,8 +134,6 @@ const openOptionsGroup = (name: string): any =>
     }
   });
 
-const toggleOptions = () => e2e.components.PanelEditor.OptionsPane.close().click();
-
 const toggleOptionsGroup = (name: string) =>
   getOptionsGroup(name)
     .find('.editor-options-group-toggle')

yarn.lock

@@ -10627,6 +10627,14 @@ cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
+
+cypress-file-upload@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-4.0.7.tgz#1136139bb3c660b9c39a69f231ac1da7785acaae"
+  integrity sha512-rFFmnoZ2bWyWFpSV09AhkSUgYEiVy70pcQ6nf/mGTMTrVHvKCCCIfRu3TbgVYHbgBq+0hqjfjQrtz4IbgH7qZA==
+  dependencies:
+    mime "^2.4.4"
+
 cypress@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.7.0.tgz#3ea29bddaf9a1faeaa5b8d54b60a84ed1cafa83d"