Chore: More variable e2e tests (#44803)

* Add Datasource variable e2e tests

* Update other tests

* Fix names/comments in tests

* Add Interval variable tests

* fix typo

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

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();
 

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');
+  });
+});

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');
+  });
+});

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

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',
+          },
         },
       },
     },

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<IntervalVariableModel> {}
 
@@ -70,6 +71,7 @@ export class IntervalVariableEditor extends PureComponent<Props> {
             onChange={this.onQueryChanged}
             onBlur={this.onQueryBlur}
             labelWidth={20}
+            testId={selectors.pages.Dashboard.Settings.Variables.Edit.IntervalVariable.intervalsValueInput}
             grow
             required
           />