From f47ab7ab2f9b893aef3c64b02e389ba392478c6b Mon Sep 17 00:00:00 2001 From: Scott Lepper Date: Tue, 20 May 2025 15:31:06 -0400 Subject: [PATCH] Dashboards E2E - edit pane - query variable (#105635) * Dashboards E2E - edit pane - query variable * update test to use gdev cloudwatch; remove duplicate label and mocks * wait for the api call to fetch the editor options --- .../dashboards-edit-query-variables.spec.ts | 70 +++++++++++++++++++ .../src/selectors/pages.ts | 12 ++++ .../variables/components/QueryEditor.tsx | 3 - .../variables/editors/QueryVariableEditor.tsx | 19 +++-- 4 files changed, 97 insertions(+), 7 deletions(-) create mode 100644 e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts diff --git a/e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts new file mode 100644 index 00000000000..86843243ad4 --- /dev/null +++ b/e2e/dashboard-new-layouts/dashboards-edit-query-variables.spec.ts @@ -0,0 +1,70 @@ +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 - Query variable', () => { + beforeEach(() => { + e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); + }); + + it('can add a new query variable', () => { + e2e.pages.Dashboards.visit(); + + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); + cy.contains(DASHBOARD_NAME).should('be.visible'); + + const queryVariableOptions = ['default']; + + const variable: Variable = { + type: 'query', + name: 'VariableUnderTest', + value: queryVariableOptions[0], + label: 'VariableUnderTest', // constant doesn't really need a label + }; + + // common steps to add a new variable + flows.newEditPaneVariableClick(); + flows.newEditPanelCommonVariableInputs(variable); + + // open the modal query variable editor + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsOpenButton().should('be.visible').click(); + // select a core data source that just runs a query during preview + e2e.components.DataSourcePicker.container().should('be.visible').click(); + + // spy on the API call to get the query options + cy.intercept('GET', '/api/datasources/**').as('getOptions'); + + const dataSource = 'gdev-cloudwatch'; + // this will trigger an API call to get the query options + cy.contains(dataSource).scrollIntoView().should('be.visible').click(); + // wait for the API call to finish + cy.wait('@getOptions'); + // show the preview of the query results + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.previewButton().should('be.visible').click(); + // assert the query results are shown + e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('be.visible'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption() + .first() + .then(($el) => { + const previewOption = $el.text().trim(); + cy.wrap(previewOption).as('previewOption'); + }); + + // close the modal + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.closeButton().should('be.visible').click(); + // assert the query variable values are in the variable value select + cy.get('@previewOption').then((opt) => { + e2e.pages.Dashboard.SubMenu.submenuItemLabels(variable.name).next().should('have.text', opt); + // 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: ${opt}`); + }); + }); + }); +}); diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index 3a82ba6efe0..0beb8916e32 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -451,11 +451,23 @@ export const versionedPages = { }, }, QueryVariable: { + closeButton: { + [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor close button', + }, + editor: { + [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor', + }, + previewButton: { + [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor preview button', + }, queryOptionsDataSourceSelect: { '10.4.0': 'data-testid Select a data source', '10.0.0': 'data-testid Data source picker select container', [MIN_GRAFANA_VERSION]: 'Data source picker select container', }, + queryOptionsOpenButton: { + [MIN_GRAFANA_VERSION]: 'data-testid Query Variable editor open button', + }, queryOptionsRefreshSelect: { [MIN_GRAFANA_VERSION]: 'Variable editor Form Query Refresh select', }, diff --git a/public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx b/public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx index 506e5d20751..b916a88c5de 100644 --- a/public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx +++ b/public/app/features/dashboard-scene/settings/variables/components/QueryEditor.tsx @@ -57,9 +57,6 @@ export function QueryEditor({ if (VariableQueryEditor && isQueryEditor(VariableQueryEditor, datasource)) { return ( - - Query - setIsOpen(true)} size="sm" fullWidth + data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsOpenButton} > Open variable editor @@ -135,10 +136,20 @@ export function ModalEditor({ variable }: { variable: QueryVariable }) { > - - @@ -195,7 +206,7 @@ export function Editor({ variable }: { variable: QueryVariable }) { const isHasVariableOptions = hasVariableOptions(variable); return ( - <> +
{isHasVariableOptions && } - +
); }