mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
3e92a2dc77
commit
ed64133943
@ -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,
|
||||
|
@ -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));
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user