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

A11y: Fix fastpass issues for /explore with gdev-testdata (#40309)

Browse Source 
* A11y: Fix fastpass issues for /explore with gdev-testdata

* Chore: changes after PR feedback

* Chore: revert file to main

* Tests: fix for e2e tests
This commit is contained in:
Hugo Häggmark 2021-10-13 06:09:35 +02:00 committed by GitHub
parent 2448123a65
commit 30c1e7fa5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 21 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/shared/smokeTestScenario.ts
View File

@ -14,7 +14,7 @@ export const smokeTestScenario = {
e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
.should('be.visible')
.within(() => {
e2e().get('input[id*="scenario-input-"]').should('be.visible').click();
e2e().get('input[id*="test-data-scenario-select-"]').should('be.visible').click();
});
cy.contains('CSV Metric Values').scrollIntoView().should('be.visible').click();

12
e2e/suite1/specs/exemplars.spec.ts
View File

@ -9,11 +9,7 @@ const addDataSource = () => {
form: () => {
e2e.components.DataSource.Prometheus.configPage.exemplarsAddButton().click();
e2e.components.DataSource.Prometheus.configPage.internalLinkSwitch().check({ force: true });
e2e.components.DataSourcePicker.container()
.should('be.visible')
.within(() => {
e2e.components.DataSourcePicker.input().should('be.visible').click({ force: true });
});
e2e.components.DataSourcePicker.inputV2().should('be.visible').click({ force: true });
e2e().contains('gdev-tempo').scrollIntoView().should('be.visible').click();
},
@ -48,11 +44,7 @@ describe('Exemplars', () => {
e2e.pages.Explore.visit();
e2e.components.DataSourcePicker.container()
.should('be.visible')
.within(() => {
e2e.components.DataSourcePicker.input().should('be.visible').click();
});
e2e.components.DataSourcePicker.input().should('be.visible').click();
e2e().contains(dataSourceName).scrollIntoView().should('be.visible').click();
e2e.components.TimePicker.openButton().click();
e2e.components.TimePicker.fromField().clear().type('2021-07-10 17:10:00');

2
e2e/suite1/specs/explore.spec.ts
View File

@ -14,7 +14,7 @@ e2e.scenario({
e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
.should('be.visible')
.within(() => {
e2e().get('input[id*="scenario-input-"]').should('be.visible').click();
e2e().get('input[id*="test-data-scenario-select-"]').should('be.visible').click();
});
cy.contains('CSV Metric Values').scrollIntoView().should('be.visible').click();

2
e2e/suite1/specs/panelEdit_queries.spec.ts
View File

@ -50,7 +50,7 @@ e2e.scenario({
e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
.should('be.visible')
.within(() => {
e2e().get('input[id*="scenario-input-"]').eq(0).should('be.visible').click();
e2e().get('input[id*="test-data-scenario-select-"]').eq(0).should('be.visible').click();
});
cy.contains('CSV Metric Values').scrollIntoView().should('be.visible').eq(0).click();

6
e2e/suite1/specs/query-editor.spec.ts
View File

@ -8,11 +8,7 @@ e2e.scenario({
skipScenario: false,
scenario: () => {
e2e.pages.Explore.visit();
e2e.components.DataSourcePicker.container()
.should('be.visible')
.within(() => {
e2e.components.DataSourcePicker.input().should('be.visible').click();
});
e2e.components.DataSourcePicker.inputV2().should('be.visible').click();
cy.contains('gdev-prometheus').scrollIntoView().should('be.visible').click();
const queryText = 'http_requests_total';

6
e2e/suite1/specs/trace-view-scrolling.spec.ts
View File

@ -11,11 +11,7 @@ describe('Trace view', () => {
e2e.pages.Explore.visit();
e2e.components.DataSourcePicker.container()
.should('be.visible')
.within(() => {
e2e.components.DataSourcePicker.input().should('be.visible').click();
});
e2e.components.DataSourcePicker.inputV2().should('be.visible').click();
e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();

12
e2e/suite1/specs/variables/new-query-variable.ts
View File

@ -82,11 +82,7 @@ describe('Variables - Add variable', () => {
e2e().get('#Description').should('be.visible').clear().type('a description');
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
.should('be.visible')
.within(() => {
e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
});
e2e.components.DataSourcePicker.inputV2().should('be.visible').type('gdev-testdata').type('{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
.should('be.visible')
@ -136,11 +132,7 @@ describe('Variables - Add variable', () => {
e2e().get('#Description').should('be.visible').clear().type('a description');
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
.should('be.visible')
.within(() => {
e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
});
e2e.components.DataSourcePicker.inputV2().should('be.visible').type('gdev-testdata').type('{enter}');
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
.should('be.visible')

4
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -209,7 +209,11 @@ export const Components = {
},
DataSourcePicker: {
container: 'Data source picker select container',
/**
* @deprecated use inputV2 instead
*/
input: () => 'input[id="data-source-picker"]',
inputV2: 'Select a data source',
},
TimeZonePicker: {
container: 'Time zone picker select container',

1
packages/grafana-runtime/src/components/DataSourcePicker.tsx
View File

@ -145,6 +145,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
return (
<div aria-label={selectors.components.DataSourcePicker.container}>
<Select
aria-label={selectors.components.DataSourcePicker.inputV2}
inputId="data-source-picker"
menuShouldPortal
className={styles.select}

5
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useCallback } from 'react';
import React, { useCallback, useState } from 'react';
import { Icon, renderOrCallToRender, stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { css, cx } from '@emotion/css';
@ -102,10 +102,11 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
return (
<Draggable draggableId={id} index={index}>
{(provided) => {
const dragHandleProps = { ...provided.dragHandleProps, role: 'group' }; // replace the role="button" because it causes https://dequeuniversity.com/rules/axe/4.3/nested-interactive?application=msftAI
return (
<>
<div ref={provided.innerRef} className={styles.wrapper} {...provided.draggableProps}>
<div {...provided.dragHandleProps}>{rowHeader}</div>
<div {...dragHandleProps}>{rowHeader}</div>
{isContentVisible && <div className={styles.content}>{children}</div>}
</div>
</>

8
public/app/plugins/datasource/testdata/QueryEditor.tsx vendored
View File

@ -4,13 +4,13 @@ import { useAsync } from 'react-use';
// Components
import { selectors as editorSelectors } from '@grafana/e2e-selectors';
import { Input, InlineFieldRow, InlineField, Select, TextArea, InlineSwitch } from '@grafana/ui';
import { InlineField, InlineFieldRow, InlineSwitch, Input, Select, TextArea } from '@grafana/ui';
import { QueryEditorProps, SelectableValue } from '@grafana/data';
import { StreamingClientEditor, RandomWalkEditor } from './components';
import { RandomWalkEditor, StreamingClientEditor } from './components';
// Types
import { TestDataDataSource } from './datasource';
import { TestDataQuery, NodesQuery, CSVWave, USAQuery } from './types';
import { CSVWave, NodesQuery, TestDataQuery, USAQuery } from './types';
import { PredictablePulseEditor } from './components/PredictablePulseEditor';
import { CSVWavesEditor } from './components/CSVWaveEditor';
import { defaultCSVWaveQuery, defaultPulseQuery, defaultQuery } from './constants';
@ -170,12 +170,12 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
<InlineFieldRow aria-label={selectors.scenarioSelectContainer}>
<InlineField labelWidth={14} label="Scenario">
<Select
inputId={`test-data-scenario-select-${query.refId}`}
menuShouldPortal
options={options}
value={options.find((item) => item.value === query.scenarioId)}
onChange={onScenarioChange}
width={32}
inputId={`scenario-input-${query.refId}`}
/>
</InlineField>
{currentScenario?.stringInput && (