diff --git a/e2e/dashboard-new-layouts/dashboards-edit-adhoc-variables.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-adhoc-variables.spec.ts new file mode 100644 index 00000000000..6a35cedbe9a --- /dev/null +++ b/e2e/dashboard-new-layouts/dashboards-edit-adhoc-variables.spec.ts @@ -0,0 +1,72 @@ +import { e2e } from '../utils'; + +import { flows, Variable } from './dashboard-edit-flows'; + +const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output'; +const DASHBOARD_NAME = 'Test variable output'; + +describe('Dashboard edit - Ad hoc variables', () => { + beforeEach(() => { + e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); + }); + + it('can add a new adhoc variable', () => { + e2e.pages.Dashboards.visit(); + + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); + cy.contains(DASHBOARD_NAME).should('be.visible'); + + const variable: Variable = { + type: 'adhoc', + name: 'VariableUnderTest', + value: 'label1', + label: 'VariableUnderTest', + }; + + // common steps to add a new variable + flows.newEditPaneVariableClick(); + flows.newEditPanelCommonVariableInputs(variable); + + e2e.pages.Dashboard.Settings.Variables.Edit.AdHocFiltersVariable.datasourceSelect().should('be.visible').click(); + const dataSource = 'gdev-loki'; + cy.contains(dataSource).scrollIntoView().should('be.visible').click(); + + // mock the API call to get the labels + const labels = ['label1', 'label2']; + cy.intercept('GET', '**/resources/labels*', { + statusCode: 200, + body: { + status: 'success', + data: labels, + }, + }).as('labels'); + + // select the variable in the dashboard and confirm the variable value is set + e2e.pages.Dashboard.SubMenu.submenuItem().should('be.visible').click(); + e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.label).should('be.visible').contains(variable.label); + + // mock the API call to get the label values + const labelValues = ['label2Value1']; + cy.intercept('GET', `**/resources/label/${labels[1]}/values*`, { + statusCode: 200, + body: { + status: 'success', + data: labelValues, + }, + }).as('label-values'); + + // choose the label and value + cy.get('div[data-testid]').contains(labels[1]).click(); + cy.get('div[data-testid]').contains('=').click(); + cy.get('div[data-testid]').contains(labelValues[0]).click(); + cy.focused().type('{esc}'); + + // assert the panel is visible and has the correct value + e2e.components.Panels.Panel.content() + .should('be.visible') + .first() + .within(() => { + cy.get('.markdown-html').should('include.text', `VariableUnderTest: ${labels[1]}="${labelValues[0]}"`); + }); + }); +});