diff --git a/packages/grafana-e2e/src/flows/saveDashboard.ts b/packages/grafana-e2e/src/flows/saveDashboard.ts index cd20ad95d22..94541fbd858 100644 --- a/packages/grafana-e2e/src/flows/saveDashboard.ts +++ b/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(); diff --git a/packages/grafana-e2e/src/flows/saveNewDashboard.ts b/packages/grafana-e2e/src/flows/saveNewDashboard.ts index 78a89968738..712c8f92ce2 100644 --- a/packages/grafana-e2e/src/flows/saveNewDashboard.ts +++ b/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(); diff --git a/packages/grafana-e2e/src/noTypeCheck.ts b/packages/grafana-e2e/src/noTypeCheck.ts index 0dd517ec2c8..3fad777793a 100644 --- a/packages/grafana-e2e/src/noTypeCheck.ts +++ b/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; +export type SelectorFunction = (text?: string) => Cypress.Chainable>; export type SelectorObject = { - visit: (args?: string) => Cypress.Chainable; + visit: (args?: string) => Cypress.Chainable; selectors: S; }; diff --git a/packages/grafana-e2e/src/pages/dashboard.ts b/packages/grafana-e2e/src/pages/dashboard.ts index 5f2b5a4553a..b4df0d81ea7 100644 --- a/packages/grafana-e2e/src/pages/dashboard.ts +++ b/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', }, }); diff --git a/packages/grafana-e2e/src/pages/dashboardSettings.ts b/packages/grafana-e2e/src/pages/dashboardSettings.ts index 77bbe1179a5..5a4c2c52434 100644 --- a/packages/grafana-e2e/src/pages/dashboardSettings.ts +++ b/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', }, diff --git a/packages/grafana-e2e/src/pages/index.ts b/packages/grafana-e2e/src/pages/index.ts index 6c4f10c1b3b..150ab912d82 100644 --- a/packages/grafana-e2e/src/pages/index.ts +++ b/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, - }, - }, }; diff --git a/packages/grafana-e2e/src/pages/variables.ts b/packages/grafana-e2e/src/pages/variables.ts new file mode 100644 index 00000000000..a2979de9eb5 --- /dev/null +++ b/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', + }, +}); diff --git a/public/app/core/directives/value_select_dropdown.ts b/public/app/core/directives/value_select_dropdown.ts index cd713476730..6dd7b9cc57f 100644 --- a/public/app/core/directives/value_select_dropdown.ts +++ b/public/app/core/directives/value_select_dropdown.ts @@ -5,6 +5,7 @@ import filter from 'lodash/filter'; import find from 'lodash/find'; import indexOf from 'lodash/indexOf'; import map from 'lodash/map'; +import { e2e } from '@grafana/e2e'; import coreModule from '../core_module'; import { GrafanaRootScope } from 'app/routes/GrafanaCtrl'; @@ -26,11 +27,13 @@ export class ValueSelectDropdownCtrl { onUpdated: any; queryHasSearchFilter: boolean; debouncedQueryChanged: Function; + selectors: typeof e2e.pages.Dashboard.SubMenu.selectors; /** @ngInject */ constructor(private $scope: IScope) { this.queryHasSearchFilter = this.variable ? containsSearchFilter(this.variable.query) : false; this.debouncedQueryChanged = debounce(this.queryChanged.bind(this), 200); + this.selectors = e2e.pages.Dashboard.SubMenu.selectors; } show() { diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index 7e0835ddc20..f928b9b3818 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -160,7 +160,7 @@ export class DashNav extends PureComponent { diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx index aaf4fc2acb1..ce605d12f1c 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx @@ -19,7 +19,7 @@ export const DashNavButton: FunctionComponent = ({ icon, tooltip, classSu diff --git a/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts b/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts index 2583f361ec6..4947290b794 100644 --- a/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts +++ b/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts @@ -22,7 +22,7 @@ export class SettingsCtrl { canDelete: boolean; sections: any[]; hasUnsavedFolderChange: boolean; - selectors: typeof e2e.pages.DashboardSettings.selectors; + selectors: typeof e2e.pages.Dashboard.Settings.General.selectors; /** @ngInject */ constructor( @@ -55,7 +55,7 @@ export class SettingsCtrl { this.$rootScope.onAppEvent(CoreEvents.routeUpdated, this.onRouteUpdated.bind(this), $scope); this.$rootScope.appEvent(CoreEvents.dashScroll, { animate: false, pos: 0 }); this.$rootScope.onAppEvent(CoreEvents.dashboardSaved, this.onPostSave.bind(this), $scope); - this.selectors = e2e.pages.DashboardSettings.selectors; + this.selectors = e2e.pages.Dashboard.Settings.General.selectors; } buildSectionList() { diff --git a/public/app/features/dashboard/components/DashboardSettings/template.html b/public/app/features/dashboard/components/DashboardSettings/template.html index a357124dc67..97186a6e4d2 100644 --- a/public/app/features/dashboard/components/DashboardSettings/template.html +++ b/public/app/features/dashboard/components/DashboardSettings/template.html @@ -1,5 +1,5 @@