Chore: Move variable field selectors to data-testid (#44801)

* Chore: Move variable field selectors to data-testid

* Fix data source variable editor selector

* fix test
pull/39088/head
Josh Hunt 3 years ago committed by GitHub
parent c1a0c2664c
commit 6211ca4d3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      e2e/dashboards-suite/new-constant-variable.spec.ts
  2. 8
      e2e/dashboards-suite/new-custom-variable.spec.ts
  3. 26
      e2e/dashboards-suite/new-query-variable.spec.ts
  4. 8
      e2e/dashboards-suite/new-text-box-variable.spec.ts
  5. 4
      e2e/dashboards-suite/textbox-variables.spec.ts
  6. 13
      packages/grafana-e2e-selectors/src/selectors/pages.ts
  7. 10
      packages/grafana-e2e/src/flows/addDashboard.ts
  8. 2
      public/app/features/variables/constant/ConstantVariableEditor.tsx
  9. 2
      public/app/features/variables/datasource/DataSourceVariableEditor.tsx
  10. 2
      public/app/features/variables/editor/SelectionOptionsEditor.tsx
  11. 4
      public/app/features/variables/editor/VariableEditorEditor.tsx
  12. 2
      public/app/features/variables/editor/VariableHideSelect.tsx
  13. 6
      public/app/features/variables/editor/VariableSelectField.tsx
  14. 6
      public/app/features/variables/editor/VariableTextField.tsx
  15. 2
      public/app/features/variables/editor/VariableTypeSelect.tsx
  16. 2
      public/app/features/variables/query/QueryVariableEditor.test.tsx
  17. 2
      public/app/features/variables/query/QueryVariableEditor.tsx
  18. 2
      public/app/features/variables/query/QueryVariableRefreshSelect.tsx
  19. 2
      public/app/features/variables/query/QueryVariableSortSelect.tsx
  20. 2
      public/app/features/variables/textbox/TextBoxVariableEditor.tsx

@ -10,10 +10,10 @@ describe('Variables - Constant', () => {
// Create a new "Constant" variable // Create a new "Constant" variable
e2e.components.CallToActionCard.buttonV2('Add variable').click(); 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.generalTypeSelectV2().type('Constant{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type('VariableUnderTest').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type('VariableUnderTest').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type('Variable under test').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput().type('pesto').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInputV2().type('pesto').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'pesto'); e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'pesto');

@ -3,9 +3,9 @@ import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output'; const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
function fillInCustomVariable(name: string, label: string, value: string) { 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.generalTypeSelectV2().type('Custom{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type(name).blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type(name).blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type(label).blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type(label).blur();
e2e.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput().type(value).blur(); e2e.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput().type(value).blur();
} }
@ -42,7 +42,7 @@ describe('Variables - Custom', () => {
// Create a new "Custom" variable // Create a new "Custom" variable
e2e.components.CallToActionCard.buttonV2('Add variable').click(); e2e.components.CallToActionCard.buttonV2('Add variable').click();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Custom{enter}'); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Custom{enter}');
// Set it's name, label, and content // Set it's name, label, and content
fillInCustomVariable('VariableUnderTest', 'Variable under test', 'One : 1,Two : 2, Three : 3'); fillInCustomVariable('VariableUnderTest', 'Variable under test', 'One : 1,Two : 2, Three : 3');

@ -9,18 +9,18 @@ describe('Variables - Query - Add variable', () => {
e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click(); e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput() e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2()
.should('be.visible') .should('be.visible')
.within((input) => { .within((input) => {
expect(input.attr('placeholder')).equals('name'); expect(input.attr('placeholder')).equals('name');
expect(input.val()).equals('query0'); expect(input.val()).equals('query0');
}); });
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect() e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2()
.should('be.visible') .should('be.visible')
.within((select) => { .within((select) => {
e2e.components.Select.singleValue().should('have.text', 'Query'); e2e.components.Select.singleValue().should('have.text', 'Query');
}); });
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2()
.should('be.visible') .should('be.visible')
.within((input) => { .within((input) => {
expect(input.attr('placeholder')).equals('optional display name'); expect(input.attr('placeholder')).equals('optional display name');
@ -33,7 +33,7 @@ describe('Variables - Query - Add variable', () => {
expect(input.attr('placeholder')).equals('descriptive text'); expect(input.attr('placeholder')).equals('descriptive text');
expect(input.val()).equals(''); expect(input.val()).equals('');
}); });
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect() e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelectV2()
.should('be.visible') .should('be.visible')
.within((select) => { .within((select) => {
e2e.components.Select.singleValue().should('have.text', ''); e2e.components.Select.singleValue().should('have.text', '');
@ -45,19 +45,19 @@ describe('Variables - Query - Add variable', () => {
e2e.components.Select.singleValue().should('have.text', 'gdev-testdata'); e2e.components.Select.singleValue().should('have.text', 'gdev-testdata');
}); });
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect() e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelectV2()
.should('be.visible') .should('be.visible')
.within((select) => { .within((select) => {
e2e.components.Select.singleValue().should('have.text', 'On dashboard load'); e2e.components.Select.singleValue().should('have.text', 'On dashboard load');
}); });
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput() e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2()
.should('be.visible') .should('be.visible')
.within((input) => { .within((input) => {
const placeholder = '/.*-(?<text>.*)-(?<value>.*)-.*/'; const placeholder = '/.*-(?<text>.*)-(?<value>.*)-.*/';
expect(input.attr('placeholder')).equals(placeholder); expect(input.attr('placeholder')).equals(placeholder);
expect(input.val()).equals(''); expect(input.val()).equals('');
}); });
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect() e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2()
.should('be.visible') .should('be.visible')
.within((select) => { .within((select) => {
e2e.components.Select.singleValue().should('have.text', 'Disabled'); e2e.components.Select.singleValue().should('have.text', 'Disabled');
@ -66,7 +66,7 @@ describe('Variables - Query - Add variable', () => {
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch().should('not.be.checked'); e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch().should('not.be.checked');
e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('not.exist'); e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('not.exist');
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().should('not.exist'); e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInputV2().should('not.exist');
}); });
it('adding a single value query variable', () => { it('adding a single value query variable', () => {
@ -75,7 +75,7 @@ describe('Variables - Query - Add variable', () => {
e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click(); e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2()
.should('be.visible') .should('be.visible')
.clear() .clear()
.type('a label'); .type('a label');
@ -89,7 +89,7 @@ describe('Variables - Query - Add variable', () => {
.type('*') .type('*')
.blur(); .blur();
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput() e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2()
.should('be.visible') .should('be.visible')
.type('/.*C.*/') .type('/.*C.*/')
.blur(); .blur();
@ -125,7 +125,7 @@ describe('Variables - Query - Add variable', () => {
e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click(); e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2()
.should('be.visible') .should('be.visible')
.clear() .clear()
.type('a label'); .type('a label');
@ -139,7 +139,7 @@ describe('Variables - Query - Add variable', () => {
.type('*') .type('*')
.blur(); .blur();
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput() e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2()
.should('be.visible') .should('be.visible')
.type('/.*C.*/') .type('/.*C.*/')
.blur(); .blur();
@ -152,7 +152,7 @@ describe('Variables - Query - Add variable', () => {
.click({ force: true }) .click({ force: true })
.should('be.checked'); .should('be.checked');
e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().within((input) => { e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInputV2().within((input) => {
expect(input.attr('placeholder')).equals('blank = auto'); expect(input.attr('placeholder')).equals('blank = auto');
expect(input.val()).equals(''); expect(input.val()).equals('');
}); });

@ -10,10 +10,10 @@ describe('Variables - Text box', () => {
// Create a new "Custom" variable // Create a new "Custom" variable
e2e.components.CallToActionCard.buttonV2('Add variable').click(); 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.generalTypeSelectV2().type('Text box{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type('VariableUnderTest').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type('VariableUnderTest').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type('Variable under test').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput().type('cat-dog').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2().type('cat-dog').blur();
e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'cat-dog'); e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'cat-dog');

@ -201,7 +201,7 @@ function validateVariable(value: string) {
e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields('text').should('be.visible').click(); e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields('text').should('be.visible').click();
e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput() e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2()
.should('be.visible') .should('be.visible')
.should('have.value', value); .should('have.value', value);
} }
@ -234,7 +234,7 @@ function changeQueryInput() {
e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields('text').should('be.visible').click(); e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields('text').should('be.visible').click();
e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput() e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2()
.should('be.visible') .should('be.visible')
.clear() .clear()
.type('changed value') .type('changed value')

@ -110,20 +110,28 @@ export const Pages = {
*/ */
modeLabelEdit: 'Variable editor Header mode Edit', modeLabelEdit: 'Variable editor Header mode Edit',
generalNameInput: 'Variable editor Form Name field', generalNameInput: 'Variable editor Form Name field',
generalNameInputV2: 'data-testid Variable editor Form Name field',
generalTypeSelect: 'Variable editor Form Type select', generalTypeSelect: 'Variable editor Form Type select',
generalTypeSelectV2: 'data-testid Variable editor Form Type select',
generalLabelInput: 'Variable editor Form Label field', generalLabelInput: 'Variable editor Form Label field',
generalLabelInputV2: 'data-testid Variable editor Form Label field',
generalHideSelect: 'Variable editor Form Hide select', generalHideSelect: 'Variable editor Form Hide select',
generalHideSelectV2: 'data-testid Variable editor Form Hide select',
selectionOptionsMultiSwitch: 'Variable editor Form Multi switch', selectionOptionsMultiSwitch: 'Variable editor Form Multi switch',
selectionOptionsIncludeAllSwitch: 'Variable editor Form IncludeAll switch', selectionOptionsIncludeAllSwitch: 'Variable editor Form IncludeAll switch',
selectionOptionsCustomAllInput: 'Variable editor Form IncludeAll field', selectionOptionsCustomAllInput: 'Variable editor Form IncludeAll field',
selectionOptionsCustomAllInputV2: 'data-testid Variable editor Form IncludeAll field',
previewOfValuesOption: 'Variable editor Preview of Values option', previewOfValuesOption: 'Variable editor Preview of Values option',
submitButton: 'Variable editor Submit button', submitButton: 'Variable editor Submit button',
}, },
QueryVariable: { QueryVariable: {
queryOptionsDataSourceSelect: Components.DataSourcePicker.container, queryOptionsDataSourceSelect: Components.DataSourcePicker.container,
queryOptionsRefreshSelect: 'Variable editor Form Query Refresh select', queryOptionsRefreshSelect: 'Variable editor Form Query Refresh select',
queryOptionsRefreshSelectV2: 'data-testid Variable editor Form Query Refresh select',
queryOptionsRegExInput: 'Variable editor Form Query RegEx field', queryOptionsRegExInput: 'Variable editor Form Query RegEx field',
queryOptionsRegExInputV2: 'data-testid Variable editor Form Query RegEx field',
queryOptionsSortSelect: 'Variable editor Form Query Sort select', queryOptionsSortSelect: 'Variable editor Form Query Sort select',
queryOptionsSortSelectV2: 'data-testid Variable editor Form Query Sort select',
queryOptionsQueryInput: 'Variable editor Form Default Variable Query Editor textarea', queryOptionsQueryInput: 'Variable editor Form Default Variable Query Editor textarea',
valueGroupsTagsEnabledSwitch: 'Variable editor Form Query UseTags switch', valueGroupsTagsEnabledSwitch: 'Variable editor Form Query UseTags switch',
valueGroupsTagsTagsQueryInput: 'Variable editor Form Query TagsQuery field', valueGroupsTagsTagsQueryInput: 'Variable editor Form Query TagsQuery field',
@ -131,9 +139,14 @@ export const Pages = {
}, },
ConstantVariable: { ConstantVariable: {
constantOptionsQueryInput: 'Variable editor Form Constant Query field', constantOptionsQueryInput: 'Variable editor Form Constant Query field',
constantOptionsQueryInputV2: 'data-testid Variable editor Form Constant Query field',
},
DatasourceVariable: {
datasourceSelect: 'data-testid Variable editor',
}, },
TextBoxVariable: { TextBoxVariable: {
textBoxOptionsQueryInput: 'Variable editor Form TextBox Query field', textBoxOptionsQueryInput: 'Variable editor Form TextBox Query field',
textBoxOptionsQueryInputV2: 'data-testid Variable editor Form TextBox Query field',
}, },
CustomVariable: { CustomVariable: {
customValueInput: 'data-testid custom-variable-input', customValueInput: 'data-testid custom-variable-input',

@ -162,7 +162,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
// This field is key to many reactive changes // This field is key to many reactive changes
if (type !== VARIABLE_TYPE_QUERY) { if (type !== VARIABLE_TYPE_QUERY) {
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect() e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2()
.should('be.visible') .should('be.visible')
.within(() => { .within(() => {
e2e.components.Select.singleValue().should('have.text', 'Query').click(); e2e.components.Select.singleValue().should('have.text', 'Query').click();
@ -171,10 +171,10 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
} }
if (label) { if (label) {
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type(label); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type(label);
} }
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type(name); e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type(name);
if ( if (
dataSource && dataSource &&
@ -188,7 +188,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
} }
if (constantValue && type === VARIABLE_TYPE_CONSTANT) { if (constantValue && type === VARIABLE_TYPE_CONSTANT) {
e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput().type(constantValue); e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInputV2().type(constantValue);
} }
if (type === VARIABLE_TYPE_QUERY) { if (type === VARIABLE_TYPE_QUERY) {
@ -197,7 +197,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
} }
if (regex) { if (regex) {
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput().type(regex); e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2().type(regex);
} }
} }

@ -36,7 +36,7 @@ export class ConstantVariableEditor extends PureComponent<Props> {
onChange={this.onChange} onChange={this.onChange}
onBlur={this.onBlur} onBlur={this.onBlur}
labelWidth={20} labelWidth={20}
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput} testId={selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInputV2}
grow grow
/> />
</VerticalGroup> </VerticalGroup>

@ -15,6 +15,7 @@ import { VariableSectionHeader } from '../editor/VariableSectionHeader';
import { VariableSelectField } from '../editor/VariableSelectField'; import { VariableSelectField } from '../editor/VariableSelectField';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { VariableTextField } from '../editor/VariableTextField'; import { VariableTextField } from '../editor/VariableTextField';
import { selectors } from '@grafana/e2e-selectors';
export interface OwnProps extends VariableEditorProps<DataSourceVariableModel> {} export interface OwnProps extends VariableEditorProps<DataSourceVariableModel> {}
@ -84,6 +85,7 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
options={typeOptions} options={typeOptions}
onChange={this.onDataSourceTypeChanged} onChange={this.onDataSourceTypeChanged}
labelWidth={10} labelWidth={10}
testId={selectors.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.datasourceSelect}
/> />
</InlineFieldRow> </InlineFieldRow>
<InlineFieldRow> <InlineFieldRow>

@ -68,7 +68,7 @@ export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorPro
onChange={onAllValueChanged} onChange={onAllValueChanged}
name="Custom all value" name="Custom all value"
placeholder="blank = auto" placeholder="blank = auto"
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput} testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInputV2}
labelWidth={20} labelWidth={20}
/> />
</InlineFieldRow> </InlineFieldRow>

@ -133,7 +133,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
name="Name" name="Name"
placeholder="name" placeholder="name"
required required
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput} testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2}
/> />
<VariableTypeSelect onChange={this.onTypeChange} type={this.props.variable.type} /> <VariableTypeSelect onChange={this.onTypeChange} type={this.props.variable.type} />
</InlineFieldRow> </InlineFieldRow>
@ -150,7 +150,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
onChange={this.onLabelChange} onChange={this.onLabelChange}
name="Label" name="Label"
placeholder="optional display name" placeholder="optional display name"
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput} testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2}
/> />
<VariableHideSelect <VariableHideSelect
onChange={this.onHideChange} onChange={this.onHideChange}

@ -30,7 +30,7 @@ export function VariableHideSelect({ onChange, hide, type }: PropsWithChildren<P
value={value} value={value}
options={HIDE_OPTIONS} options={HIDE_OPTIONS}
onChange={onChange} onChange={onChange}
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect} testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelectV2}
/> />
); );
} }

@ -10,7 +10,7 @@ interface VariableSelectFieldProps<T> {
options: Array<SelectableValue<T>>; options: Array<SelectableValue<T>>;
onChange: (option: SelectableValue<T>) => void; onChange: (option: SelectableValue<T>) => void;
tooltip?: string; tooltip?: string;
ariaLabel?: string; testId?: string;
width?: number; width?: number;
labelWidth?: number; labelWidth?: number;
} }
@ -21,7 +21,7 @@ export function VariableSelectField({
options, options,
tooltip, tooltip,
onChange, onChange,
ariaLabel, testId,
width, width,
labelWidth, labelWidth,
}: PropsWithChildren<VariableSelectFieldProps<any>>): ReactElement { }: PropsWithChildren<VariableSelectFieldProps<any>>): ReactElement {
@ -34,7 +34,7 @@ export function VariableSelectField({
<InlineFormLabel width={labelWidth ?? 6} tooltip={tooltip} htmlFor={inputId}> <InlineFormLabel width={labelWidth ?? 6} tooltip={tooltip} htmlFor={inputId}>
{name} {name}
</InlineFormLabel> </InlineFormLabel>
<div aria-label={ariaLabel}> <div data-testid={testId}>
<Select <Select
inputId={inputId} inputId={inputId}
menuShouldPortal menuShouldPortal

@ -6,7 +6,7 @@ interface VariableTextFieldProps {
name: string; name: string;
placeholder: string; placeholder: string;
onChange: (event: FormEvent<HTMLInputElement>) => void; onChange: (event: FormEvent<HTMLInputElement>) => void;
ariaLabel?: string; testId?: string;
tooltip?: PopoverContent; tooltip?: PopoverContent;
required?: boolean; required?: boolean;
width?: number; width?: number;
@ -20,7 +20,7 @@ export function VariableTextField({
name, name,
placeholder, placeholder,
onChange, onChange,
ariaLabel, testId,
width, width,
labelWidth, labelWidth,
required, required,
@ -39,7 +39,7 @@ export function VariableTextField({
onChange={onChange} onChange={onChange}
onBlur={onBlur} onBlur={onBlur}
width={grow ? undefined : width ?? 25} width={grow ? undefined : width ?? 25}
aria-label={ariaLabel} data-testid={testId}
required={required} required={required}
/> />
</InlineField> </InlineField>

@ -22,7 +22,7 @@ export function VariableTypeSelect({ onChange, type }: PropsWithChildren<Props>)
options={options} options={options}
onChange={onChange} onChange={onChange}
tooltip={variableAdapters.get(type).description} tooltip={variableAdapters.get(type).description}
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect} testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2}
/> />
); );
} }

@ -106,7 +106,7 @@ describe('QueryVariableEditor', () => {
const getQueryField = () => const getQueryField = () =>
screen.getByRole('textbox', { name: /variable editor form default variable query editor textarea/i }); screen.getByRole('textbox', { name: /variable editor form default variable query editor textarea/i });
const getRegExField = () => screen.getByRole('textbox', { name: /variable editor form query regex field/i }); const getRegExField = () => screen.getByLabelText('Regex');
const fieldAccessors: Record<string, () => HTMLElement> = { const fieldAccessors: Record<string, () => HTMLElement> = {
query: getQueryField, query: getQueryField,

@ -199,7 +199,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
). ).
</div> </div>
} }
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput} testId={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2}
grow grow
/> />
<QueryVariableSortSelect onChange={this.onSortChange} sort={this.props.variable.sort} /> <QueryVariableSortSelect onChange={this.onSortChange} sort={this.props.variable.sort} />

@ -24,7 +24,7 @@ export function QueryVariableRefreshSelect({ onChange, refresh }: PropsWithChild
options={REFRESH_OPTIONS} options={REFRESH_OPTIONS}
onChange={onChange} onChange={onChange}
labelWidth={10} labelWidth={10}
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect} testId={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelectV2}
tooltip="When to update the values of this variable." tooltip="When to update the values of this variable."
/> />
); );

@ -29,7 +29,7 @@ export function QueryVariableSortSelect({ onChange, sort }: PropsWithChildren<Pr
options={SORT_OPTIONS} options={SORT_OPTIONS}
onChange={onChange} onChange={onChange}
labelWidth={10} labelWidth={10}
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect} testId={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2}
tooltip="How to sort the values of this variable." tooltip="How to sort the values of this variable."
/> />
); );

@ -33,7 +33,7 @@ export function TextBoxVariableEditor({ onPropChange, variable: { query } }: Pro
onBlur={onBlur} onBlur={onBlur}
labelWidth={20} labelWidth={20}
grow grow
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput} testId={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2}
/> />
</VerticalGroup> </VerticalGroup>
); );

Loading…
Cancel
Save