diff --git a/e2e/dashboards-suite/new-constant-variable.spec.ts b/e2e/dashboards-suite/new-constant-variable.spec.ts index 1fff721a8a6..9df1d069df1 100644 --- a/e2e/dashboards-suite/new-constant-variable.spec.ts +++ b/e2e/dashboards-suite/new-constant-variable.spec.ts @@ -3,7 +3,7 @@ import { e2e } from '@grafana/e2e'; const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output'; describe('Variables - Constant', () => { - it('can add a new text box variable', () => { + it('can add a new constant variable', () => { e2e.flows.login('admin', 'admin'); e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` }); @@ -19,7 +19,7 @@ describe('Variables - Constant', () => { // Navigate back to the homepage and change the selected variable value e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click(); - e2e.components.BackButton.backArrow().should('be.visible').click({ force: true }); + e2e.components.BackButton.backArrow().click({ force: true }); e2e.components.RefreshPicker.runButtonV2().click(); // Assert it was rendered diff --git a/e2e/dashboards-suite/new-custom-variable.spec.ts b/e2e/dashboards-suite/new-custom-variable.spec.ts index d9d0750f3b6..a9c1408c69d 100644 --- a/e2e/dashboards-suite/new-custom-variable.spec.ts +++ b/e2e/dashboards-suite/new-custom-variable.spec.ts @@ -50,7 +50,7 @@ describe('Variables - Custom', () => { // Navigate back to the homepage and change the selected variable value e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click(); - e2e.components.BackButton.backArrow().should('be.visible').click({ force: true }); + e2e.components.BackButton.backArrow().click({ force: true }); e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('One').click(); e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('Two').click(); diff --git a/e2e/dashboards-suite/new-datasource-variable.spec.ts b/e2e/dashboards-suite/new-datasource-variable.spec.ts new file mode 100644 index 00000000000..0818e7ff4db --- /dev/null +++ b/e2e/dashboards-suite/new-datasource-variable.spec.ts @@ -0,0 +1,37 @@ +import { e2e } from '@grafana/e2e'; + +const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output'; + +describe('Variables - Datasource', () => { + it('can add a new datasource variable', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` }); + + // Create a new "Datasource" variable + e2e.components.CallToActionCard.buttonV2('Add variable').click(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Data source{enter}'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type('VariableUnderTest').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur(); + + // If this is failing, but sure to check there are Prometheus datasources named "gdev-prometheus" and "gdev-slow-prometheus" + // Or, just update is to match some gdev datasources to test with :) + e2e.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.datasourceSelect().type('Prometheus{enter}'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption() + .eq(0) + .should('have.text', 'gdev-prometheus'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption() + .eq(1) + .should('have.text', 'gdev-slow-prometheus'); + + // Navigate back to the homepage and change the selected variable value + e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click(); + e2e.components.BackButton.backArrow().click({ force: true }); + e2e.components.RefreshPicker.runButtonV2().click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('gdev-prometheus').click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('gdev-slow-prometheus').click(); + + // Assert it was rendered + e2e().get('.markdown-html').should('include.text', 'VariableUnderTest: gdev-slow-prometheus'); + }); +}); diff --git a/e2e/dashboards-suite/new-interval-variable.spec.ts b/e2e/dashboards-suite/new-interval-variable.spec.ts new file mode 100644 index 00000000000..c22f40ba865 --- /dev/null +++ b/e2e/dashboards-suite/new-interval-variable.spec.ts @@ -0,0 +1,41 @@ +import { e2e } from '@grafana/e2e'; + +const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output'; + +function assertPreviewValues(expectedValues: string[]) { + for (const expected of expectedValues) { + const index = expectedValues.indexOf(expected); + e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(index).should('have.text', expected); + } +} + +describe('Variables - Interval', () => { + it('can add a new interval variable', () => { + e2e.flows.login('admin', 'admin'); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` }); + + // Create a new "Interval" variable + e2e.components.CallToActionCard.buttonV2('Add variable').click(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Interval{enter}'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type('VariableUnderTest').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur(); + + e2e.pages.Dashboard.Settings.Variables.Edit.IntervalVariable.intervalsValueInput() + .clear() + .type('10s,10m,60m,90m,1h30m') + .blur(); + + assertPreviewValues(['10s', '10m', '60m', '90m', '1h30m']); + + // Navigate back to the homepage and change the selected variable value + e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click(); + e2e.components.BackButton.backArrow().click({ force: true }); + e2e.components.RefreshPicker.runButtonV2().click(); + + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('10s').click(); + e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('1h30m').click(); + + // Assert it was rendered + e2e().get('.markdown-html').should('include.text', 'VariableUnderTest: 1h30m'); + }); +}); diff --git a/e2e/dashboards-suite/new-text-box-variable.spec.ts b/e2e/dashboards-suite/new-text-box-variable.spec.ts index 0d79adb4dea..0f5dddb8a04 100644 --- a/e2e/dashboards-suite/new-text-box-variable.spec.ts +++ b/e2e/dashboards-suite/new-text-box-variable.spec.ts @@ -7,7 +7,7 @@ describe('Variables - Text box', () => { e2e.flows.login('admin', 'admin'); e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` }); - // Create a new "Custom" variable + // Create a new "text box" variable e2e.components.CallToActionCard.buttonV2('Add variable').click(); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Text box{enter}'); @@ -19,7 +19,7 @@ describe('Variables - Text box', () => { // Navigate back to the homepage and change the selected variable value e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click(); - e2e.components.BackButton.backArrow().should('be.visible').click({ force: true }); + e2e.components.BackButton.backArrow().click({ force: true }); e2e().get('#VariableUnderTest').clear().type('dog-cat').blur(); // Assert it was rendered diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index 5a82afa9667..6ac5d7fbe6e 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -142,7 +142,7 @@ export const Pages = { constantOptionsQueryInputV2: 'data-testid Variable editor Form Constant Query field', }, DatasourceVariable: { - datasourceSelect: 'data-testid Variable editor', + datasourceSelect: 'data-testid datasource variable datasource type', }, TextBoxVariable: { textBoxOptionsQueryInput: 'Variable editor Form TextBox Query field', @@ -151,6 +151,9 @@ export const Pages = { CustomVariable: { customValueInput: 'data-testid custom-variable-input', }, + IntervalVariable: { + intervalsValueInput: 'data-testid interval variable intervals input', + }, }, }, }, diff --git a/public/app/features/variables/interval/IntervalVariableEditor.tsx b/public/app/features/variables/interval/IntervalVariableEditor.tsx index 3221b4b831a..4c12a7960fd 100644 --- a/public/app/features/variables/interval/IntervalVariableEditor.tsx +++ b/public/app/features/variables/interval/IntervalVariableEditor.tsx @@ -8,6 +8,7 @@ import { VariableTextField } from '../editor/VariableTextField'; import { VariableSwitchField } from '../editor/VariableSwitchField'; import { VariableSelectField } from '../editor/VariableSelectField'; import { SelectableValue } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; export interface Props extends VariableEditorProps {} @@ -70,6 +71,7 @@ export class IntervalVariableEditor extends PureComponent { onChange={this.onQueryChanged} onBlur={this.onQueryBlur} labelWidth={20} + testId={selectors.pages.Dashboard.Settings.Variables.Edit.IntervalVariable.intervalsValueInput} grow required />