From ed641339430333e2fbfc0ca5bb5c63504173ee17 Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Tue, 8 Nov 2022 17:15:21 +0000
Subject: [PATCH] grafana/e2e: Update add dashboard flow (#58360)
* Update variable editor e2e flow
- Use correct selector for Variables
- Add variable query form
- Add label for variable apply button
* Use data-testid instead of aria-label
* Add jsdoc
---
.../src/selectors/pages.ts | 1 +
.../grafana-e2e/src/flows/addDashboard.ts | 80 ++++++++++++++++++-
.../variables/editor/VariableEditorEditor.tsx | 6 +-
3 files changed, 83 insertions(+), 4 deletions(-)
diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts
index 4bdc8923d45..a6d0faae018 100644
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts
@@ -124,6 +124,7 @@ export const Pages = {
selectionOptionsCustomAllInputV2: 'data-testid Variable editor Form IncludeAll field',
previewOfValuesOption: 'Variable editor Preview of Values option',
submitButton: 'Variable editor Submit button',
+ applyButton: 'data-testid Variable editor Apply button',
},
QueryVariable: {
queryOptionsDataSourceSelect: Components.DataSourcePicker.container,
diff --git a/packages/grafana-e2e/src/flows/addDashboard.ts b/packages/grafana-e2e/src/flows/addDashboard.ts
index 252f9b79156..36dca49b86b 100644
--- a/packages/grafana-e2e/src/flows/addDashboard.ts
+++ b/packages/grafana-e2e/src/flows/addDashboard.ts
@@ -31,6 +31,7 @@ interface AddVariableOptional {
label?: string;
query?: string;
regex?: string;
+ variableQueryForm?: (config: AddVariableConfig) => void;
}
interface AddVariableRequired {
@@ -40,6 +41,74 @@ interface AddVariableRequired {
export type PartialAddVariableConfig = Partial<AddVariableDefault> & AddVariableOptional & AddVariableRequired;
export type AddVariableConfig = AddVariableDefault & AddVariableOptional & AddVariableRequired;
+/**
+ * This flow is used to add a dashboard with whatever configuration specified.
+ * @param config Configuration object. Currently supports configuring dashboard time range, annotations, and variables (support dependant on type).
+ * @see{@link AddDashboardConfig}
+ *
+ * @example
+ * ```
+ * // Configuring a simple dashboard
+ * addDashboard({
+ * timeRange: {
+ * from: '2022-10-03 00:00:00',
+ * to: '2022-10-03 23:59:59',
+ * zone: 'Coordinated Universal Time',
+ * },
+ * title: 'Test Dashboard',
+ * })
+ * ```
+ *
+ * @example
+ * ```
+ * // Configuring a dashboard with annotations
+ * addDashboard({
+ * title: 'Test Dashboard',
+ * annotations: [
+ * {
+ * // This should match the datasource name
+ * dataSource: 'azure-monitor',
+ * name: 'Test Annotation',
+ * dataSourceForm: () => {
+ * // Insert steps to create annotation using datasource form
+ * }
+ * }
+ * ]
+ * })
+ * ```
+ *
+ * @see{@link AddAnnotationConfig}
+ *
+ * @example
+ * ```
+ * // Configuring a dashboard with variables
+ * addDashboard({
+ * title: 'Test Dashboard',
+ * variables: [
+ * {
+ * name: 'test-query-variable',
+ * label: 'Testing Query',
+ * hide: '',
+ * type: e2e.flows.VARIABLE_TYPE_QUERY,
+ * dataSource: 'azure-monitor',
+ * variableQueryForm: () => {
+ * // Insert steps to create variable using datasource form
+ * },
+ * },
+ * {
+ * name: 'test-constant-variable',
+ * label: 'Testing Constant',
+ * type: e2e.flows.VARIABLE_TYPE_CONSTANT,
+ * constantValue: 'constant',
+ * }
+ * ]
+ * })
+ * ```
+ *
+ * @see{@link AddVariableConfig}
+ *
+ * @see{@link https://github.com/grafana/grafana/blob/main/e2e/cloud-plugins-suite/azure-monitor.spec.ts Azure Monitor Tests for full examples}
+ */
export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
const fullConfig: AddDashboardConfig = {
annotations: [],
@@ -160,7 +229,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
e2e.pages.Dashboard.Settings.Variables.List.newButton().click();
}
- const { constantValue, dataSource, label, name, query, regex, type } = fullConfig;
+ const { constantValue, dataSource, label, name, query, regex, type, variableQueryForm } = fullConfig;
// This field is key to many reactive changes
if (type !== VARIABLE_TYPE_QUERY) {
@@ -185,7 +254,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
.should('be.visible')
.within(() => {
- e2e.components.Select.input().should('be.visible').type(`${dataSource}{enter}`);
+ e2e.components.DataSourcePicker.inputV2().type(`${dataSource}{enter}`);
});
}
@@ -201,6 +270,10 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
if (regex) {
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2().type(regex);
}
+
+ if (variableQueryForm) {
+ variableQueryForm(fullConfig);
+ }
}
// Avoid flakiness
@@ -215,13 +288,14 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
});
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
+ e2e.pages.Dashboard.Settings.Variables.Edit.General.applyButton().click();
return fullConfig;
};
const addVariables = (configs: PartialAddVariableConfig[]): AddVariableConfig[] => {
if (configs.length > 0) {
- e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
+ e2e.components.Tab.title('Variables').click();
}
return configs.map((config, i) => addVariable(config, i === 0));
diff --git a/public/app/features/variables/editor/VariableEditorEditor.tsx b/public/app/features/variables/editor/VariableEditorEditor.tsx
index 4c3f7113a9e..5ebb4ce7ebd 100644
--- a/public/app/features/variables/editor/VariableEditorEditor.tsx
+++ b/public/app/features/variables/editor/VariableEditorEditor.tsx
@@ -204,7 +204,11 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props, State>
Run query
{loading && <Icon className="spin-clockwise" name="sync" size="sm" style={{ marginLeft: '2px' }} />}
</Button>
- <Button variant="primary" onClick={this.onApply}>
+ <Button
+ variant="primary"
+ onClick={this.onApply}
+ data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.General.applyButton}
+ >
Apply
</Button>
</HorizontalGroup>