From 465735a7e4607d3557bd9fb6b270e2970cd9f288 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Thu, 26 Nov 2020 10:31:34 +0100 Subject: [PATCH] Chore: Adds e2e tests for Variables (#29341) * Variables: Adds description field * Refactor: Adds new Form components * Refactor: Fixes aria labels * Refactor: removes skipped tests * Tests: Adds e2e tests for loading variables from URL * Tests: Adds set options from ui * Tests: Adds create query variable tests * Chore: removes skipped tests * Refactor: Breaks out smaller select components * Refactor: removes gf-form div * Refactor: Breaks up several more selects into smaller components * Chore: Fixes typings --- .../specs/variables/load-options-from-url.ts | 199 ++++++++++++++ .../specs/variables/new-query-variable.ts | 246 ++++++++++++++++++ .../specs/variables/set-options-from-ui.ts | 212 +++++++++++++++ 3 files changed, 657 insertions(+) create mode 100644 e2e/suite1/specs/variables/load-options-from-url.ts create mode 100644 e2e/suite1/specs/variables/new-query-variable.ts create mode 100644 e2e/suite1/specs/variables/set-options-from-ui.ts diff --git a/e2e/suite1/specs/variables/load-options-from-url.ts b/e2e/suite1/specs/variables/load-options-from-url.ts new file mode 100644 index 00000000000..6e770856621 --- /dev/null +++ b/e2e/suite1/specs/variables/load-options-from-url.ts @@ -0,0 +1,199 @@ +import { e2e } from '@grafana/e2e'; + +const PAGE_UNDER_TEST = '-Y-tnEDWk'; + +describe('Variables - Load options from Url', () => { + it('default options should be correct', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST }); + e2e().server(); + e2e() + .route({ + method: 'POST', + url: '/api/tsdb/query', + }) + .as('query'); + + e2e().wait('@query'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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.submenuItemValueDropDownValueLinkTexts('AA') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AA').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AB').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AC').should('be.visible'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAA').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAB').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAC').should('be.visible'); + }); + + it('options set in url should load correct options', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=B&var-server=BB&var-pod=BBB` }); + e2e().server(); + e2e() + .route({ + method: 'POST', + url: '/api/tsdb/query', + }) + .as('query'); + + e2e().wait('@query'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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.submenuItemValueDropDownValueLinkTexts('BB') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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.submenuItemValueDropDownValueLinkTexts('BBB') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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'); + }); + + it('options set in url that do not exist should load correct options', () => { + e2e.flows.login('admin', 'admin'); + // @ts-ignore some typing issue + e2e().on('uncaught:exception', err => { + if (err.stack?.indexOf("Couldn't find any field of type string in the results.") !== -1) { + // return false to prevent the error from + // failing this test + return false; + } + + return true; + }); + + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=X` }); + e2e().server(); + e2e() + .route({ + method: 'POST', + url: '/api/tsdb/query', + }) + .as('query'); + + e2e().wait('@query'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('X') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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.submenuItemValueDropDownValueLinkTexts('AA') + .should('be.visible') + .click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 0); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All') + .should('be.visible') + .click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 0); + }); + }); +}); diff --git a/e2e/suite1/specs/variables/new-query-variable.ts b/e2e/suite1/specs/variables/new-query-variable.ts new file mode 100644 index 00000000000..3955481b03a --- /dev/null +++ b/e2e/suite1/specs/variables/new-query-variable.ts @@ -0,0 +1,246 @@ +import { e2e } from '@grafana/e2e'; + +const PAGE_UNDER_TEST = '-Y-tnEDWk'; + +describe('Variables - Add variable', () => { + it('query variable should be default and default fields should be correct', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?editview=templating` }); + + e2e.pages.Dashboard.Settings.Variables.List.newButton() + .should('be.visible') + .click(); + + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput() + .should('be.visible') + .within(input => { + expect(input.attr('placeholder')).equals('name'); + expect(input.val()).equals('query0'); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect() + .should('be.visible') + .within(select => { + e2e.components.Select.singleValue() + .should('be.visible') + .should('have.text', 'Query'); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() + .should('be.visible') + .within(input => { + expect(input.attr('placeholder')).equals('optional display name'); + expect(input.val()).equals(''); + }); + e2e() + .get('#Description') + .should('be.visible') + .within(input => { + expect(input.attr('placeholder')).equals('descriptive text'); + expect(input.val()).equals(''); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect() + .should('be.visible') + .within(select => { + e2e.components.Select.singleValue().should('have.text', ''); + }); + + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect() + .should('be.visible') + .within(select => { + e2e.components.Select.singleValue().should('have.text', ''); + }); + + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput().should('not.exist'); + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect() + .should('be.visible') + .within(select => { + e2e.components.Select.singleValue().should('have.text', 'Never'); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput() + .should('be.visible') + .within(input => { + const placeholder = '/.*-(?.*)-(?.*)-.*/'; + expect(input.attr('placeholder')).equals(placeholder); + expect(input.val()).equals(''); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect() + .should('be.visible') + .within(select => { + e2e.components.Select.singleValue().should('have.text', 'Disabled'); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch() + .should('be.visible') + .within(select => { + e2e() + .get('input') + .should('not.be.checked'); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch() + .should('be.visible') + .within(select => { + e2e() + .get('input') + .should('not.be.checked'); + }); + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch() + .should('be.visible') + .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'); + }); + + it('adding a single value query variable', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?editview=templating` }); + + e2e.pages.Dashboard.Settings.Variables.List.newButton() + .should('be.visible') + .click(); + + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() + .should('be.visible') + .clear() + .type('a label'); + + e2e() + .get('#Description') + .should('be.visible') + .clear() + .type('a description'); + + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect() + .should('be.visible') + .within(() => { + e2e.components.Select.input() + .should('be.visible') + .type('gdev-testdata') + .type('{enter}'); + }); + + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput() + .should('be.visible') + .type('*') + .blur(); + + e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('exist'); + + e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton() + .should('be.visible') + .click(); + + e2e().wait(500); + + e2e.components.BackButton.backArrow() + .should('be.visible') + .click({ force: true }); + + e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A') + .eq(1) + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 3); + }); + + 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'); + }); + + it('adding a multi value query variable', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?editview=templating` }); + + e2e.pages.Dashboard.Settings.Variables.List.newButton() + .should('be.visible') + .click(); + + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() + .should('be.visible') + .clear() + .type('a label'); + + e2e() + .get('#Description') + .should('be.visible') + .clear() + .type('a description'); + + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect() + .should('be.visible') + .within(() => { + e2e.components.Select.input() + .should('be.visible') + .type('gdev-testdata') + .type('{enter}'); + }); + + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput() + .should('be.visible') + .type('*') + .blur(); + + 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.previewOfValuesOption().should('exist'); + + e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton() + .should('be.visible') + .click(); + + e2e().wait(500); + + e2e.components.BackButton.backArrow() + .should('be.visible') + .click({ force: true }); + + e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A') + .eq(1) + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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'); + }); +}); diff --git a/e2e/suite1/specs/variables/set-options-from-ui.ts b/e2e/suite1/specs/variables/set-options-from-ui.ts new file mode 100644 index 00000000000..143ff2c8223 --- /dev/null +++ b/e2e/suite1/specs/variables/set-options-from-ui.ts @@ -0,0 +1,212 @@ +import { e2e } from '@grafana/e2e'; + +const PAGE_UNDER_TEST = '-Y-tnEDWk'; + +describe('Variables - Set options from ui', () => { + it('clicking a value that is not part of dependents options should change these to All', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=A&var-server=AA&var-pod=AAA` }); + e2e().server(); + e2e() + .route({ + method: 'POST', + url: '/api/tsdb/query', + }) + .as('query'); + + e2e().wait('@query'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A') + .should('be.visible') + .click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A') + .should('be.visible') + .click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.Toolbar.navBar().click(); + + e2e().wait('@query'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B') + .scrollIntoView() + .should('be.visible'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 2); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All') + .eq(0) + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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.submenuItemValueDropDownValueLinkTexts('All') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 10); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BAA').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BAB').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BAC').should('be.visible'); + 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'); + }); + + it('adding a value that is not part of dependents options should add the new values dependant options', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=A&var-server=AA&var-pod=AAA` }); + e2e().server(); + e2e() + .route({ + method: 'POST', + url: '/api/tsdb/query', + }) + .as('query'); + + e2e().wait('@query'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A') + .should('be.visible') + .click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.Toolbar.navBar().click(); + + e2e().wait('@query'); + e2e().wait(500); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B') + .scrollIntoView() + .should('be.visible'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 7); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AA').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AB').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AC').should('be.visible'); + 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.submenuItemValueDropDownValueLinkTexts('AAA') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAA').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAB').should('be.visible'); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAC').should('be.visible'); + }); + + it('removing a value that is part of dependents options should remove the new values dependant options', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ + uid: `${PAGE_UNDER_TEST}?var-datacenter=A&var-datacenter=B&var-server=AA&var-server=BB&var-pod=AAA&var-pod=BBB`, + }); + e2e().server(); + e2e() + .route({ + method: 'POST', + url: '/api/tsdb/query', + }) + .as('query'); + + e2e().wait('@query'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B') + .should('be.visible') + .click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.Toolbar.navBar().click(); + + e2e().wait('@query'); + e2e().wait(500); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B') + .scrollIntoView() + .should('be.visible'); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible'); + 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.submenuItemValueDropDownValueLinkTexts('BBB') + .should('be.visible') + .click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() + .should('be.visible') + .within(() => { + e2e() + .get('.variable-option') + .should('have.length', 4); + }); + + 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'); + }); +});