mirror of https://github.com/grafana/grafana
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 dropdownpull/21533/head
Hugo Häggmark
6 years ago
committed by
GitHub
parent
331bc173cc
commit
841cffbe9a
@ -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', |
||||
}, |
||||
}); |
||||
@ -1,60 +1,72 @@ |
||||
<div class="variable-link-wrapper"> |
||||
<a |
||||
<a |
||||
ng-click="vm.show()" |
||||
class="variable-value-link" |
||||
aria-label="Dashboard template variables Variable Value DropDown value link" |
||||
aria-label="{{vm.selectors.submenuItemValueDropDownValueLinkTexts(vm.linkText)}}" |
||||
> |
||||
{{vm.linkText}} |
||||
<span ng-repeat="tag in vm.selectedTags" bs-tooltip='tag.valuesText' data-placement="bottom"> |
||||
<span class="label-tag"tag-color-from-name="tag.text"> |
||||
<i class="fa fa-tag"></i> |
||||
{{tag.text}} |
||||
</span> |
||||
</span> |
||||
<i class="fa fa-caret-down" style="font-size:12px"></i> |
||||
</a> |
||||
{{vm.linkText}} |
||||
<span ng-repeat="tag in vm.selectedTags" bs-tooltip="tag.valuesText" data-placement="bottom"> |
||||
<span class="label-tag" tag-color-from-name="tag.text"> |
||||
<i class="fa fa-tag"></i> {{tag.text}} |
||||
</span> |
||||
</span> |
||||
<i class="fa fa-caret-down" style="font-size:12px"></i> |
||||
</a> |
||||
|
||||
<input type="text" class="gf-form-input" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.debouncedQueryChanged()" ></input> |
||||
<input |
||||
type="text" |
||||
class="gf-form-input" |
||||
style="display: none" |
||||
ng-keydown="vm.keyDown($event)" |
||||
ng-model="vm.search.query" |
||||
ng-change="vm.debouncedQueryChanged()" |
||||
/> |
||||
|
||||
<div |
||||
<div |
||||
class="variable-value-dropdown" |
||||
ng-if="vm.dropdownVisible" |
||||
ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}" |
||||
aria-label="Dashboard template variables Variable Value DropDown DropDown" |
||||
aria-label="{{::vm.selectors.submenuItemValueDropDownDropDown}}" |
||||
> |
||||
<div class="variable-options-wrapper"> |
||||
<div class="variable-options-column"> |
||||
<a |
||||
<div class="variable-options-wrapper"> |
||||
<div class="variable-options-column"> |
||||
<a |
||||
class="variable-options-column-header" |
||||
ng-if="vm.variable.multi" |
||||
ng-class="{'many-selected': vm.selectedValues.length > 1}" |
||||
bs-tooltip="'Clear selections'" |
||||
data-placement="top" |
||||
ng-click="vm.clearSelections()" |
||||
aria-label="Dashboard template variables Variable Value DropDown Selected link" |
||||
> |
||||
<span class="variable-option-icon"></span> |
||||
Selected ({{vm.selectedValues.length}}) |
||||
</a> |
||||
<a |
||||
<span class="variable-option-icon"></span> |
||||
Selected ({{vm.selectedValues.length}}) |
||||
</a> |
||||
<a |
||||
class="variable-option pointer" |
||||
ng-repeat="option in vm.search.options" |
||||
ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" |
||||
ng-click="vm.selectValue(option, $event)" |
||||
> |
||||
<span class="variable-option-icon"></span> |
||||
<span aria-label="Dashboard template variables Variable Value DropDown option text">{{option.text}}</span> |
||||
</a> |
||||
</div> |
||||
<div class="variable-options-column" ng-if="vm.tags.length"> |
||||
<div class="variable-options-column-header text-center"> |
||||
Tags |
||||
</div> |
||||
<a class="variable-option-tag pointer" ng-repeat="tag in vm.tags" ng-click="vm.selectTag(tag, $event)" ng-class="{'selected': tag.selected}"> |
||||
<span class="fa fa-fw variable-option-icon"></span> |
||||
<span class="label-tag" tag-color-from-name="tag.text">{{tag.text}} <i class="fa fa-tag"></i> </span> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<span class="variable-option-icon"></span> |
||||
<span aria-label="{{vm.selectors.submenuItemValueDropDownOptionTexts(option.text)}}">{{option.text}}</span> |
||||
</a> |
||||
</div> |
||||
<div class="variable-options-column" ng-if="vm.tags.length"> |
||||
<div class="variable-options-column-header text-center"> |
||||
Tags |
||||
</div> |
||||
<a |
||||
class="variable-option-tag pointer" |
||||
ng-repeat="tag in vm.tags" |
||||
ng-click="vm.selectTag(tag, $event)" |
||||
ng-class="{'selected': tag.selected}" |
||||
> |
||||
<span class="fa fa-fw variable-option-icon"></span> |
||||
<span class="label-tag" tag-color-from-name="tag.text" |
||||
>{{tag.text}} <i class="fa fa-tag"></i> </span |
||||
> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,587 @@ |
||||
import { e2e } from '@grafana/e2e'; |
||||
|
||||
const assertDefaultsForNewVariable = () => { |
||||
logSection('Asserting defaults for new variable'); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().within(input => { |
||||
expect(input.attr('placeholder')).equals('name'); |
||||
expect(input.val()).equals(''); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().within(select => { |
||||
e2e() |
||||
.get('option:selected') |
||||
.should('have.text', 'Query'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().within(input => { |
||||
expect(input.attr('placeholder')).equals('optional display name'); |
||||
expect(input.val()).equals(''); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect().within(select => { |
||||
e2e() |
||||
.get('option:selected') |
||||
.should('have.text', ''); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect().within(select => { |
||||
e2e() |
||||
.get('option:selected') |
||||
.should('not.exist'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput().should('not.exist'); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect().within(select => { |
||||
e2e() |
||||
.get('option:selected') |
||||
.should('have.text', 'Never'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput().within(input => { |
||||
expect(input.attr('placeholder')).equals('/.*-(.*)-.*/'); |
||||
expect(input.val()).equals(''); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect().within(select => { |
||||
e2e() |
||||
.get('option:selected') |
||||
.should('have.text', 'Disabled'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch().within(select => { |
||||
e2e() |
||||
.get('input') |
||||
.should('not.be.checked'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch().within(select => { |
||||
e2e() |
||||
.get('input') |
||||
.should('not.be.checked'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch().within(select => { |
||||
e2e() |
||||
.get('input') |
||||
.should('not.be.checked'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('not.exist'); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().should('not.exist'); |
||||
logSection('Asserting defaults for new variable, OK!'); |
||||
}; |
||||
|
||||
interface CreateQueryVariableArguments extends QueryVariableData { |
||||
dataSourceName: string; |
||||
} |
||||
|
||||
const createQueryVariable = ({ name, label, dataSourceName, query }: CreateQueryVariableArguments) => { |
||||
logSection('Creating a Query Variable with', { name, label, dataSourceName, query }); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().should('be.visible'); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().type(name); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type(label); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect() |
||||
.select(`string:${dataSourceName}`) |
||||
.blur(); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput() |
||||
.within(input => { |
||||
expect(input.attr('placeholder')).equals('metric name or tags query'); |
||||
expect(input.val()).equals(''); |
||||
}) |
||||
.type(query) |
||||
.blur(); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('exist'); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch() |
||||
.click() |
||||
.within(() => { |
||||
e2e() |
||||
.get('input') |
||||
.should('be.checked'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch() |
||||
.click() |
||||
.within(() => { |
||||
e2e() |
||||
.get('input') |
||||
.should('be.checked'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().within(input => { |
||||
expect(input.attr('placeholder')).equals('blank = auto'); |
||||
expect(input.val()).equals(''); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.addButton().click(); |
||||
logSection('Creating a Query Variable with required, OK!'); |
||||
}; |
||||
|
||||
const assertVariableTableRow = ({ name, query }: QueryVariableData) => { |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields(name) |
||||
.should('exist') |
||||
.contains(name); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowDefinitionFields(name) |
||||
.should('exist') |
||||
.contains(query); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(name).should('exist'); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(name).should('exist'); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(name).should('exist'); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(name).should('exist'); |
||||
}; |
||||
|
||||
const assertVariableTable = (args: QueryVariableData[]) => { |
||||
logSection('Asserting variable table with', args); |
||||
e2e.pages.Dashboard.Settings.Variables.List.table() |
||||
.should('be.visible') |
||||
.within(() => { |
||||
e2e() |
||||
.get('tbody > tr') |
||||
.should('have.length', args.length); |
||||
}); |
||||
|
||||
for (let index = 0; index < args.length; index++) { |
||||
assertVariableTableRow(args[index]); |
||||
} |
||||
|
||||
logSection('Asserting variable table, Ok'); |
||||
}; |
||||
|
||||
const assertVariableLabelAndComponent = ({ label, options, selectedOption }: QueryVariableData) => { |
||||
e2e.pages.Dashboard.SubMenu.submenuItemLabels(label).should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(selectedOption) |
||||
.should('be.visible') |
||||
.click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown().should('be.visible'); |
||||
for (let optionIndex = 0; optionIndex < options.length; optionIndex++) { |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(options[optionIndex]).should('be.visible'); |
||||
} |
||||
}; |
||||
|
||||
const assertVariableLabelsAndComponents = (args: QueryVariableData[]) => { |
||||
logSection('Asserting variable components and labels'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItem().should('have.length', args.length); |
||||
for (let index = 0; index < args.length; index++) { |
||||
e2e.pages.Dashboard.SubMenu.submenuItem() |
||||
.eq(index) |
||||
.within(() => { |
||||
e2e() |
||||
.get('label') |
||||
.contains(args[index].name); |
||||
}); |
||||
assertVariableLabelAndComponent(args[index]); |
||||
} |
||||
logSection('Asserting variable components and labels, Ok'); |
||||
}; |
||||
|
||||
const assertAdding3dependantQueryVariablesScenario = (queryVariables: QueryVariableData[]) => { |
||||
// This creates 3 variables where 2 depends on 1 and 3 depends on 2 and for each added variable
|
||||
// we assert that the variable looks ok in the variable list and that it looks ok in the submenu in dashboard
|
||||
for (let queryVariableIndex = 0; queryVariableIndex < queryVariables.length; queryVariableIndex++) { |
||||
const { name, label, query, options, selectedOption } = queryVariables[queryVariableIndex]; |
||||
const asserts = queryVariables.slice(0, queryVariableIndex + 1); |
||||
createQueryVariable({ |
||||
dataSourceName: e2e.context().get('lastAddedDataSource'), |
||||
name, |
||||
label, |
||||
query, |
||||
options, |
||||
selectedOption, |
||||
}); |
||||
|
||||
assertVariableTable(asserts); |
||||
|
||||
e2e.pages.Dashboard.Settings.General.saveDashBoard().click(); |
||||
e2e.pages.SaveDashboardModal.save().click(); |
||||
e2e.flows.assertSuccessNotification(); |
||||
|
||||
e2e.pages.Dashboard.Toolbar.backArrow().click(); |
||||
|
||||
assertVariableLabelsAndComponents(asserts); |
||||
|
||||
if (queryVariableIndex < queryVariables.length - 1) { |
||||
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click(); |
||||
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click(); |
||||
e2e.pages.Dashboard.Settings.Variables.List.newButton().click(); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
interface QueryVariableData { |
||||
name: string; |
||||
query: string; |
||||
label: string; |
||||
options: string[]; |
||||
selectedOption: string; |
||||
} |
||||
|
||||
const logSection = (message: string, args?: any) => { |
||||
e2e().logToConsole(''); |
||||
e2e().logToConsole(message, args); |
||||
e2e().logToConsole('==============================================================================='); |
||||
}; |
||||
|
||||
const assertDuplicateItem = (queryVariables: QueryVariableData[]) => { |
||||
logSection('Asserting variable duplicate'); |
||||
|
||||
const itemToDuplicate = queryVariables[1]; |
||||
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click(); |
||||
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click(); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(itemToDuplicate.name) |
||||
.should('exist') |
||||
.click(); |
||||
e2e.pages.Dashboard.Settings.Variables.List.table() |
||||
.should('be.visible') |
||||
.within(() => { |
||||
e2e() |
||||
.get('tbody > tr') |
||||
.should('have.length', queryVariables.length + 1); |
||||
}); |
||||
const newItem = { ...itemToDuplicate, name: `copy_of_${itemToDuplicate.name}` }; |
||||
assertVariableTableRow(newItem); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields(newItem.name).click(); |
||||
|
||||
newItem.label = `copy_of_${itemToDuplicate.label}`; |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() |
||||
.clear() |
||||
.type(newItem.label); |
||||
|
||||
e2e.pages.Dashboard.Settings.General.saveDashBoard().click(); |
||||
e2e.pages.SaveDashboardModal.save().click(); |
||||
e2e.flows.assertSuccessNotification(); |
||||
|
||||
e2e.pages.Dashboard.Toolbar.backArrow().click(); |
||||
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemLabels(newItem.label).should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(newItem.selectedOption) |
||||
.should('be.visible') |
||||
.eq(1) |
||||
.click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown().should('be.visible'); |
||||
for (let optionIndex = 0; optionIndex < newItem.options.length; optionIndex++) { |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(newItem.options[optionIndex]).should('be.visible'); |
||||
} |
||||
|
||||
logSection('Asserting variable duplicate, OK!'); |
||||
return [...queryVariables, newItem]; |
||||
}; |
||||
|
||||
const assertDeleteItem = (queryVariables: QueryVariableData[]) => { |
||||
logSection('Asserting variable delete'); |
||||
|
||||
const itemToDelete = queryVariables[1]; |
||||
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click(); |
||||
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click(); |
||||
|
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(itemToDelete.name).click(); |
||||
e2e.pages.Dashboard.Settings.Variables.List.table() |
||||
.should('be.visible') |
||||
.within(() => { |
||||
e2e() |
||||
.get('tbody > tr') |
||||
.should('have.length', queryVariables.length - 1); |
||||
}); |
||||
|
||||
e2e.pages.Dashboard.Settings.General.saveDashBoard().click(); |
||||
e2e.pages.SaveDashboardModal.save().click(); |
||||
e2e.flows.assertSuccessNotification(); |
||||
|
||||
e2e.pages.Dashboard.Toolbar.backArrow().click(); |
||||
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemLabels(itemToDelete.label).should('not.exist'); |
||||
|
||||
logSection('Asserting variable delete, OK!'); |
||||
|
||||
return queryVariables.filter(item => item.name !== itemToDelete.name); |
||||
}; |
||||
|
||||
const assertUpdateItem = (data: QueryVariableData[]) => { |
||||
logSection('Asserting variable update'); |
||||
const queryVariables = [...data]; |
||||
// updates an item to a constant variable instead
|
||||
const itemToUpdate = queryVariables[1]; |
||||
const updatedItem = { |
||||
...itemToUpdate, |
||||
name: `update_of_${itemToUpdate.name}`, |
||||
label: `update_of_${itemToUpdate.label}`, |
||||
query: 'A constant', |
||||
options: ['A constant'], |
||||
selectedOption: 'undefined', |
||||
}; |
||||
queryVariables[1] = updatedItem; |
||||
|
||||
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click(); |
||||
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click(); |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields(itemToUpdate.name).click(); |
||||
|
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().should('be.visible'); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput() |
||||
.should('have.value', itemToUpdate.name) |
||||
.clear() |
||||
.type(updatedItem.name); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() |
||||
.should('have.value', itemToUpdate.label) |
||||
.clear() |
||||
.type(updatedItem.label); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().select('Constant'); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect().within(select => { |
||||
e2e() |
||||
.get('option:selected') |
||||
.should('have.text', 'Variable'); |
||||
}); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect().select(''); |
||||
e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput().type(updatedItem.query); |
||||
|
||||
e2e.pages.Dashboard.Toolbar.backArrow().click(); |
||||
|
||||
assertVariableLabelAndComponent(queryVariables[1]); |
||||
|
||||
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click(); |
||||
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click(); |
||||
|
||||
assertVariableTableRow(queryVariables[1]); |
||||
queryVariables[1].selectedOption = 'A constant'; |
||||
|
||||
logSection('Asserting variable update, OK!'); |
||||
return queryVariables; |
||||
}; |
||||
|
||||
const assertMoveDownItem = (data: QueryVariableData[]) => { |
||||
logSection('Asserting variable move down'); |
||||
const queryVariables = [...data]; |
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(queryVariables[0].name).click(); |
||||
const temp = { ...queryVariables[0] }; |
||||
queryVariables[0] = { ...queryVariables[1] }; |
||||
queryVariables[1] = temp; |
||||
e2e.pages.Dashboard.Settings.Variables.List.table().within(() => { |
||||
e2e() |
||||
.get('tbody > tr') |
||||
.eq(0) |
||||
.within(() => { |
||||
e2e() |
||||
.get('td') |
||||
.eq(0) |
||||
.contains(queryVariables[0].name); |
||||
e2e() |
||||
.get('td') |
||||
.eq(1) |
||||
.contains(queryVariables[0].query); |
||||
}); |
||||
e2e() |
||||
.get('tbody > tr') |
||||
.eq(1) |
||||
.within(() => { |
||||
e2e() |
||||
.get('td') |
||||
.eq(0) |
||||
.contains(queryVariables[1].name); |
||||
e2e() |
||||
.get('td') |
||||
.eq(1) |
||||
.contains(queryVariables[1].query); |
||||
}); |
||||
}); |
||||
|
||||
e2e.pages.Dashboard.Toolbar.backArrow().click(); |
||||
|
||||
assertVariableLabelsAndComponents(queryVariables); |
||||
|
||||
logSection('Asserting variable move down, OK!'); |
||||
|
||||
return queryVariables; |
||||
}; |
||||
|
||||
const assertSelects = (queryVariables: QueryVariableData[]) => { |
||||
// Values in submenus should be
|
||||
// query1: [A] query2: [AA] query3: [AAA]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
// Values in submenus should be
|
||||
// query1: [B] query2: [All] query3: [All]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 2); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All') |
||||
.eq(0) |
||||
.click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
// Values in submenus should be
|
||||
// query1: [B] query2: [BB] query3: [All]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All') |
||||
.eq(0) |
||||
.click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBA').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBB').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBC').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBB').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 0); |
||||
// Values in submenus should be
|
||||
// query1: [B] query2: [BB] query3: [BBB]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB + BC').should('have.length', 1); |
||||
// Values in submenus should be
|
||||
// query1: [B] query2: [BB + BC] query3: [BBB]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BBB').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBA').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBB').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBC').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCA').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCB').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCC').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCC').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BBB + BCC').should('have.length', 1); |
||||
// Values in submenus should be
|
||||
// query1: [B] query2: [BB + BC] query3: [BBB + BCC]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB + BC').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BA').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 1); |
||||
// Values in submenus should be
|
||||
// query1: [B] query2: [BA] query3: [All]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C').should('be.visible'); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 2); |
||||
// Values in submenus should be
|
||||
// query1: [A] query2: [All] query3: [All]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All') |
||||
.eq(0) |
||||
.click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AA').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 1); |
||||
// Values in submenus should be
|
||||
// query1: [A] query2: [AA] query3: [All]
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All') |
||||
.eq(0) |
||||
.click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAA').click(); |
||||
e2e.pages.Dashboard.Toolbar.navBar().click(); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AAA').should('have.length', 1); |
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 0); |
||||
}; |
||||
|
||||
const assertMoveUpItem = (data: QueryVariableData[]) => { |
||||
logSection('Asserting variable move up'); |
||||
const queryVariables = [...data]; |
||||
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click(); |
||||
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click(); |
||||
|
||||
e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(queryVariables[1].name).click(); |
||||
const temp = { ...queryVariables[0] }; |
||||
queryVariables[0] = { ...queryVariables[1] }; |
||||
queryVariables[1] = temp; |
||||
e2e.pages.Dashboard.Settings.Variables.List.table().within(() => { |
||||
e2e() |
||||
.get('tbody > tr') |
||||
.eq(0) |
||||
.within(() => { |
||||
e2e() |
||||
.get('td') |
||||
.eq(0) |
||||
.contains(queryVariables[0].name); |
||||
e2e() |
||||
.get('td') |
||||
.eq(1) |
||||
.contains(queryVariables[0].query); |
||||
}); |
||||
e2e() |
||||
.get('tbody > tr') |
||||
.eq(1) |
||||
.within(() => { |
||||
e2e() |
||||
.get('td') |
||||
.eq(0) |
||||
.contains(queryVariables[1].name); |
||||
e2e() |
||||
.get('td') |
||||
.eq(1) |
||||
.contains(queryVariables[1].query); |
||||
}); |
||||
}); |
||||
|
||||
e2e.pages.Dashboard.Toolbar.backArrow().click(); |
||||
|
||||
assertVariableLabelsAndComponents(queryVariables); |
||||
|
||||
logSection('Asserting variable move up, OK!'); |
||||
|
||||
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: () => { |
||||
e2e.flows.openDashboard(e2e.context().get('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); |
||||
}, |
||||
}); |
||||
Loading…
Reference in new issue