Dashboard edit pane E2E - add constant variable test (#104877)

Dashboard edit pane - add constant variable test

e2e/dashboards-edit-v2-suite/dashboard-edit-flows.ts

@@ -0,0 +1,24 @@
+import { e2e } from '../utils';
+
+// Common flows for adding/editing variables on the new edit pane
+export const flows = {
+  newEditPaneVariableClick() {
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+    e2e.components.PanelEditor.Outline.section().should('be.visible').click();
+    e2e.components.PanelEditor.Outline.item('Variables').should('be.visible').click();
+    e2e.components.PanelEditor.ElementEditPane.addVariableButton().should('be.visible').click();
+  },
+  newEditPanelCommonVariableInputs(variable: Variable) {
+    e2e.components.PanelEditor.ElementEditPane.variableType(variable.type).should('be.visible').click();
+    e2e.components.PanelEditor.ElementEditPane.variableNameInput().clear().type(variable.name).blur();
+    e2e.components.PanelEditor.ElementEditPane.variableLabelInput().clear().type(variable.label).blur();
+  },
+};
+
+export type Variable = {
+  type: string;
+  name: string;
+  label?: string;
+  description?: string;
+  value: string;
+};

e2e/dashboards-edit-v2-suite/dashboards-edit-variables.spec.ts

@@ -1,9 +1,11 @@
 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 variables', () => {
+describe('Dashboard edit - variables', () => {
   beforeEach(() => {
     e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
   });
@@ -33,28 +35,36 @@ describe('Dashboard edit variables', () => {
     const values = variable.value.split(',');
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(values[0]).should('be.visible');
   });
-});
 
-// Common flows for adding/editing variables
-// TODO: maybe move to e2e flows
-const flows = {
-  newEditPaneVariableClick() {
-    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
-    e2e.components.PanelEditor.Outline.section().should('be.visible').click();
-    e2e.components.PanelEditor.Outline.item('Variables').should('be.visible').click();
-    e2e.components.PanelEditor.ElementEditPane.addVariableButton().should('be.visible').click();
-  },
-  newEditPanelCommonVariableInputs(variable: Variable) {
-    e2e.components.PanelEditor.ElementEditPane.variableType(variable.type).should('be.visible').click();
-    e2e.components.PanelEditor.ElementEditPane.variableNameInput().clear().type(variable.name).blur();
-    e2e.components.PanelEditor.ElementEditPane.variableLabelInput().clear().type(variable.label).blur();
-  },
-};
-
-type Variable = {
-  type: string;
-  name: string;
-  label: string;
-  description?: string;
-  value: string;
-};
+  it('can add a new constant 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: 'constant',
+      name: 'VariableUnderTest',
+      value: 'foo',
+      label: 'VariableUnderTest', // constant doesn't really need a label
+    };
+
+    // common steps to add a new variable
+    flows.newEditPaneVariableClick();
+    flows.newEditPanelCommonVariableInputs(variable);
+
+    // set the constant variable value
+    const type = 'variable-type Value';
+    const field = e2e.components.PanelEditor.OptionsPane.fieldLabel(type);
+    field.should('be.visible');
+    field.find('input').should('be.visible').clear().type(variable.value).blur();
+
+    // 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: ${variable.value}`);
+      });
+  });
+});