e2e: Migrates query variable CRUD tests to new framework (#21146)

* Refactor: Adds params to visit

* Refactor: Restructures exported Pages somewhat

* Refactor: Moves more into new framework but holdup because of bugs in digest

* Refactor: Finish migrating templating e2e tests to new framework

* Refactor: Changes after merge with master

* Refactor: Removes weird change

* Refactor: Adds duplication test

* Refactor: Adds move down and move up variable asserts

* Refactor: Adds some test to value select dropdown

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

@@ -1,7 +1,7 @@
 import { e2e } from '../index';
 
 export const saveDashboard = () => {
-  e2e.pages.Dashboard.toolbarItems('Save dashboard').click();
+  e2e.pages.Dashboard.Toolbar.toolbarItems('Save dashboard').click();
 
   e2e.pages.SaveDashboardModal.save().click();
 

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

@@ -1,7 +1,7 @@
 import { e2e } from '../index';
 
 export const saveNewDashboard = () => {
-  e2e.pages.Dashboard.toolbarItems('Save dashboard').click();
+  e2e.pages.Dashboard.Toolbar.toolbarItems('Save dashboard').click();
 
   const dashboardTitle = `e2e-${new Date().getTime()}`;
   e2e.pages.SaveDashboardAsModal.newName().clear();

packages/grafana-e2e/src/noTypeCheck.ts

@@ -8,9 +8,9 @@ import { Pages } from './pages';
 import { Flows } from './flows';
 import { scenarioContext } from './support/scenarioContext';
 
-export type SelectorFunction = (text?: string) => Cypress.Chainable<any>;
+export type SelectorFunction = (text?: string) => Cypress.Chainable<JQuery<HTMLElement>>;
 export type SelectorObject<S> = {
-  visit: (args?: string) => Cypress.Chainable<any>;
+  visit: (args?: string) => Cypress.Chainable<Window>;
   selectors: S;
 };
 

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

@@ -5,5 +5,6 @@ export const Dashboard = pageFactory({
   selectors: {
     toolbarItems: (button: string) => `Dashboard navigation bar button ${button}`,
     backArrow: 'Dashboard settings Go Back button',
+    navBar: () => '.navbar',
   },
 });

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

@@ -4,7 +4,7 @@ export const DashboardSettings = pageFactory({
   url: '',
   selectors: {
     deleteDashBoard: 'Dashboard settings page delete dashboard button',
-    sectionItems: 'Dashboard settings section item',
+    sectionItems: (item: string) => `Dashboard settings section item ${item}`,
     saveDashBoard: 'Dashboard settings aside actions Save button',
     saveAsDashBoard: 'Dashboard settings aside actions Save As button',
   },

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

@@ -14,6 +14,7 @@ import { Graph } from './graph';
 import { SaveDashboardModal } from './saveDashboardModal';
 import { Panel } from './panel';
 import { SharePanelModal } from './sharePanelModal';
+import { ConstantVariable, QueryVariable, VariableGeneral, Variables, VariablesSubMenu } from './variables';
 
 export const Pages = {
   Login,
@@ -22,20 +23,34 @@ export const Pages = {
   AddDataSource,
   ConfirmModal,
   AddDashboard,
-  Dashboard,
+  Dashboard: {
+    visit: (uid: string) => Dashboard.visit(uid),
+    Toolbar: Dashboard,
+    SubMenu: VariablesSubMenu,
+    Settings: {
+      General: DashboardSettings,
+      Variables: {
+        List: Variables,
+        Edit: {
+          General: VariableGeneral,
+          QueryVariable: QueryVariable,
+          ConstantVariable: ConstantVariable,
+        },
+      },
+    },
+    Panels: {
+      Panel,
+      EditPanel,
+      DataSource: {
+        TestData,
+      },
+      Visualization: {
+        Graph,
+      },
+    },
+  },
   Dashboards,
   SaveDashboardAsModal,
   SaveDashboardModal,
-  DashboardSettings,
   SharePanelModal,
-  Panels: {
-    Panel,
-    EditPanel,
-    DataSource: {
-      TestData,
-    },
-    Visualization: {
-      Graph,
-    },
-  },
 };

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

@@ -0,0 +1,69 @@
+import { pageFactory } from '../support';
+
+export const Variables = pageFactory({
+  url: '',
+  selectors: {
+    addVariableCTA: 'Call to action button Add variable',
+    newButton: 'Variable editor New variable button',
+    table: 'Variable editor Table',
+    tableRowNameFields: (variableName: string) => `Variable editor Table Name field ${variableName}`,
+    tableRowDefinitionFields: (variableName: string) => `Variable editor Table Definition field ${variableName}`,
+    tableRowArrowUpButtons: (variableName: string) => `Variable editor Table ArrowUp button ${variableName}`,
+    tableRowArrowDownButtons: (variableName: string) => `Variable editor Table ArrowDown button ${variableName}`,
+    tableRowDuplicateButtons: (variableName: string) => `Variable editor Table Duplicate button ${variableName}`,
+    tableRowRemoveButtons: (variableName: string) => `Variable editor Table Remove button ${variableName}`,
+  },
+});
+
+export const VariablesSubMenu = pageFactory({
+  url: '',
+  selectors: {
+    submenuItem: 'Dashboard template variables submenu item',
+    submenuItemLabels: (item: string) => `Dashboard template variables submenu Label ${item}`,
+    submenuItemValueDropDownValueLinkTexts: (item: string) =>
+      `Dashboard template variables Variable Value DropDown value link text ${item}`,
+    submenuItemValueDropDownDropDown: 'Dashboard template variables Variable Value DropDown DropDown',
+    submenuItemValueDropDownOptionTexts: (item: string) =>
+      `Dashboard template variables Variable Value DropDown option text ${item}`,
+  },
+});
+
+export const VariableGeneral = pageFactory({
+  url: '',
+  selectors: {
+    headerLink: 'Variable editor Header link',
+    modeLabelNew: 'Variable editor Header mode New',
+    modeLabelEdit: 'Variable editor Header mode Edit',
+    generalNameInput: 'Variable editor Form Name field',
+    generalTypeSelect: 'Variable editor Form Type select',
+    generalLabelInput: 'Variable editor Form Label field',
+    generalHideSelect: 'Variable editor Form Hide select',
+    selectionOptionsMultiSwitch: 'Variable editor Form Multi switch',
+    selectionOptionsIncludeAllSwitch: 'Variable editor Form IncludeAll switch',
+    selectionOptionsCustomAllInput: 'Variable editor Form IncludeAll field',
+    previewOfValuesOption: 'Variable editor Preview of Values option',
+    addButton: 'Variable editor Add button',
+    updateButton: 'Variable editor Update button',
+  },
+});
+
+export const QueryVariable = pageFactory({
+  url: '',
+  selectors: {
+    queryOptionsDataSourceSelect: 'Variable editor Form Query DataSource select',
+    queryOptionsRefreshSelect: 'Variable editor Form Query Refresh select',
+    queryOptionsRegExInput: 'Variable editor Form Query RegEx field',
+    queryOptionsSortSelect: 'Variable editor Form Query Sort select',
+    queryOptionsQueryInput: 'Variable editor Form Default Variable Query Editor textarea',
+    valueGroupsTagsEnabledSwitch: 'Variable editor Form Query UseTags switch',
+    valueGroupsTagsTagsQueryInput: 'Variable editor Form Query TagsQuery field',
+    valueGroupsTagsTagsValuesQueryInput: 'Variable editor Form Query TagsValuesQuery field',
+  },
+});
+
+export const ConstantVariable = pageFactory({
+  url: '',
+  selectors: {
+    constantOptionsQueryInput: 'Variable editor Form Constant Query field',
+  },
+});