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
This commit is contained in:
Andreas Christou 2022-11-08 17:15:21 +00:00 committed by GitHub
parent 3e92a2dc77
commit ed64133943
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 83 additions and 4 deletions

View File

@ -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,

View File

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

View File

@ -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>