IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: E2E tests for various variables types (#44747)

Browse Source 
* Pass data-testid into VariableTextEditorField

* Add e2e tests for custom variables

* Rename query variable specs to match others

* Add e2e tests for Text Box variables

* manually remove id: null

* Add tests for constant variables
This commit is contained in:
Josh Hunt 2022-02-03 09:58:56 +11:00 committed by GitHub
parent 984c95de63
commit ce4d8646fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 204 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
devenv/dev-dashboards/feature-templating/testdata-test-variable-output.json Normal file
View File

@ -0,0 +1,76 @@
{
"__inputs": [],
"__elements": [],
"__requires": [
{
"type": "grafana",
"id": "grafana",
"name": "Grafana",
"version": "8.4.0-pre"
},
{
"type": "panel",
"id": "text",
"name": "Text",
"version": ""
}
],
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"links": [],
"liveNow": false,
"panels": [
{
"gridPos": {
"h": 9,
"w": 12,
"x": 0,
"y": 0
},
"id": 2,
"options": {
"mode": "markdown",
"content": "VariableUnderTest: $VariableUnderTest"
},
"pluginVersion": "8.4.0-pre",
"title": "Panel Title",
"type": "text"
}
],
"schemaVersion": 35,
"style": "dark",
"tags": [],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "Test variable output",
"uid": "kVi2Gex7z",
"version": 2,
"weekStart": ""
}

31
e2e/dashboards-suite/new-constant-variable.spec.ts Normal file
View File

@ -0,0 +1,31 @@
import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
describe('Variables - Constant', () => {
it('can add a new text box variable', () => {
e2e.flows.login('admin', 'admin');
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
// Create a new "Constant" variable
e2e.components.CallToActionCard.buttonV2('Add variable').click();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Constant{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type('VariableUnderTest').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type('Variable under test').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput().type('pesto').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'pesto');
// 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.RefreshPicker.runButtonV2().click();
// Assert it was rendered
e2e().get('.markdown-html').should('include.text', 'VariableUnderTest: pesto');
// Assert the variable is not visible in the dashboard nav
e2e.pages.Dashboard.SubMenu.submenuItemLabels('Variable under test').should('not.exist');
});
});

60
e2e/dashboards-suite/new-custom-variable.spec.ts Normal file
View File

@ -0,0 +1,60 @@
import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
function fillInCustomVariable(name: string, label: string, value: string) {
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Custom{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type(name).blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type(label).blur();
e2e.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput().type(value).blur();
}
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 - Custom', () => {
it('can add a custom template variable', () => {
e2e.flows.login('admin', 'admin');
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
// Create a new "Custom" variable
e2e.components.CallToActionCard.buttonV2('Add variable').click();
fillInCustomVariable('VariableUnderTest', 'Variable under test', 'one,two,three');
assertPreviewValues(['one', 'two', 'three']);
// 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.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('one').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('two').click();
// Assert it was rendered
e2e().get('.markdown-html').should('include.text', 'VariableUnderTest: two');
});
it('can add a custom template variable with labels', () => {
e2e.flows.login('admin', 'admin');
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
// Create a new "Custom" variable
e2e.components.CallToActionCard.buttonV2('Add variable').click();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Custom{enter}');
// Set it's name, label, and content
fillInCustomVariable('VariableUnderTest', 'Variable under test', 'One : 1,Two : 2, Three : 3');
assertPreviewValues(['One', 'Two', 'Three']);
// 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.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('One').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('Two').click();
// Assert it was rendered
e2e().get('.markdown-html').should('include.text', 'VariableUnderTest: 2');
});
});

2
e2e/dashboards-suite/new-query-variable.spec.ts
View File

@ -2,7 +2,7 @@ import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = '-Y-tnEDWk/templating-nested-template-variables';
describe('Variables - Add variable', () => {
describe('Variables - Query - Add variable', () => {
it('query variable should be default and default fields should be correct', () => {
e2e.flows.login('admin', 'admin');
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });

28
e2e/dashboards-suite/new-text-box-variable.spec.ts Normal file
View File

@ -0,0 +1,28 @@
import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
describe('Variables - Text box', () => {
it('can add a new text box variable', () => {
e2e.flows.login('admin', 'admin');
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1&editview=templating` });
// Create a new "Custom" variable
e2e.components.CallToActionCard.buttonV2('Add variable').click();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Text box{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type('VariableUnderTest').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type('Variable under test').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput().type('cat-dog').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'cat-dog');
// 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().get('#VariableUnderTest').clear().type('dog-cat').blur();
// Assert it was rendered
e2e().get('.markdown-html').should('include.text', 'VariableUnderTest: dog-cat');
});
});

3
packages/grafana-e2e-selectors/src/selectors/pages.ts
View File

@ -135,6 +135,9 @@ export const Pages = {
TextBoxVariable: {
textBoxOptionsQueryInput: 'Variable editor Form TextBox Query field',
},
CustomVariable: {
customValueInput: 'data-testid custom-variable-input',
},
},
},
},

2
public/app/features/variables/custom/CustomVariableEditor.tsx
View File

@ -5,6 +5,7 @@ import { OnPropChangeArguments, VariableEditorProps } from '../editor/types';
import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
import { MapDispatchToProps, MapStateToProps } from 'react-redux';
import { VerticalGroup } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import { StoreState } from 'app/types';
import { changeVariableMultiValue } from '../state/actions';
import { VariableSectionHeader } from '../editor/VariableSectionHeader';
@ -55,6 +56,7 @@ class CustomVariableEditorUnconnected extends PureComponent<Props> {
required
width={50}
labelWidth={27}
testId={selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput}
/>
</VerticalGroup>
<SelectionOptionsEditor

3
public/app/features/variables/editor/VariableTextAreaField.tsx
View File

@ -13,6 +13,7 @@ interface VariableTextAreaFieldProps<T> {
ariaLabel?: string;
required?: boolean;
labelWidth?: number;
testId?: string;
onBlur?: (event: FormEvent<HTMLTextAreaElement>) => void;
}
@ -27,6 +28,7 @@ export function VariableTextAreaField({
required,
width,
labelWidth,
testId,
}: PropsWithChildren<VariableTextAreaFieldProps<any>>): ReactElement {
const styles = useStyles(getStyles);
const getLineCount = useCallback((value: any) => {
@ -49,6 +51,7 @@ export function VariableTextAreaField({
aria-label={ariaLabel}
cols={width}
className={styles.textarea}
data-testid={testId}
/>
</InlineField>
);