Chore: Reduce pa11y-ci errors (#41787)

* Chore: moves alert to test-id

* Chore: moves Dashboard navigation to test-id

* Chore: moves Bar gauge value to data-testid

* Chore move Folder picker select container to data-testid

* Chore: moves Time zone picker select container to data-testid

* Chore: moves Choose starting day of the week to data-testid

* Chore: change tabIndex on search input

* Chore: moves various search related aria-lables to data-testid

* Chore: connects label to select input on alerting page

* Chore: connects TimeZonePicker and WeekStartPicker with labels

* Chore: moves CallToActionButton to data-testid

* Chore: move user home preferences select to data-testid

* Chore: lower all thresholds
This commit is contained in:
Hugo Häggmark
2021-11-17 14:45:45 +01:00
committed by GitHub
parent 4f9c096599
commit 5498203507
37 changed files with 221 additions and 116 deletions

View File

@@ -116,7 +116,7 @@ describe('AnnotationsSettings', () => {
expect(screen.queryByRole('table')).toBeInTheDocument();
expect(screen.getByRole('row', { name: /annotations & alerts \(built\-in\) grafana/i })).toBeInTheDocument();
expect(
screen.queryByLabelText(selectors.components.CallToActionCard.button('Add annotation query'))
screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query'))
).toBeInTheDocument();
expect(screen.queryByRole('link', { name: /annotations documentation/i })).toBeInTheDocument();
@@ -140,7 +140,7 @@ describe('AnnotationsSettings', () => {
expect(screen.getByRole('table')).toBeInTheDocument();
expect(screen.getByRole('row', { name: /my annotation \(built\-in\) grafana/i })).toBeInTheDocument();
expect(
screen.queryByLabelText(selectors.components.CallToActionCard.button('Add annotation query'))
screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query'))
).toBeInTheDocument();
expect(screen.queryByRole('button', { name: /new query/i })).not.toBeInTheDocument();
@@ -149,7 +149,7 @@ describe('AnnotationsSettings', () => {
expect(screen.queryAllByRole('row').length).toBe(0);
expect(
screen.queryByLabelText(selectors.components.CallToActionCard.button('Add annotation query'))
screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query'))
).toBeInTheDocument();
});
@@ -210,7 +210,7 @@ describe('AnnotationsSettings', () => {
test('it renders a form for adding/editing annotations', () => {
render(<AnnotationsSettings dashboard={dashboard} />);
userEvent.click(screen.getByLabelText(selectors.components.CallToActionCard.button('Add annotation query')));
userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')));
const heading = screen.getByRole('heading', {
name: /annotations edit/i,
@@ -237,7 +237,7 @@ describe('AnnotationsSettings', () => {
expect(screen.queryByRole('row', { name: /my prometheus annotation prometheus/i })).toBeInTheDocument();
expect(screen.queryByRole('button', { name: /new query/i })).toBeInTheDocument();
expect(
screen.queryByLabelText(selectors.components.CallToActionCard.button('Add annotation query'))
screen.queryByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query'))
).not.toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: /new query/i }));

View File

@@ -6,6 +6,7 @@ import { selectOptionInTest } from '@grafana/ui';
import { byRole } from 'testing-library-selector';
import { GeneralSettingsUnconnected as GeneralSettings, Props } from './GeneralSettings';
import { DashboardModel } from '../../state';
import { selectors } from '@grafana/e2e-selectors';
const setupTestContext = (options: Partial<Props>) => {
const defaults: Props = {
@@ -38,7 +39,7 @@ describe('General Settings', () => {
setupTestContext({});
screen.getByDisplayValue('test dashboard title');
screen.getByDisplayValue('test dashboard description');
expect(screen.getByLabelText('Time zone picker select container')).toHaveTextContent(
expect(screen.getByTestId(selectors.components.TimeZonePicker.containerV2)).toHaveTextContent(
'Coordinated Universal Time'
);
});
@@ -47,8 +48,8 @@ describe('General Settings', () => {
describe('when timezone is changed', () => {
it('should call update function', async () => {
const { props } = setupTestContext({});
userEvent.click(screen.getByLabelText('Time zone picker select container'));
const timeZonePicker = screen.getByLabelText('Time zone picker select container');
userEvent.click(screen.getByTestId(selectors.components.TimeZonePicker.containerV2));
const timeZonePicker = screen.getByTestId(selectors.components.TimeZonePicker.containerV2);
userEvent.click(byRole('textbox').get(timeZonePicker));
await selectOptionInTest(timeZonePicker, 'Browser Time');
expect(props.updateTimeZone).toHaveBeenCalledWith('browser');

View File

@@ -69,7 +69,7 @@ describe('LinksSettings', () => {
expect(screen.getByRole('heading', { name: 'Dashboard links' })).toBeInTheDocument();
expect(
screen.getByLabelText(selectors.components.CallToActionCard.button('Add dashboard link'))
screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add dashboard link'))
).toBeInTheDocument();
expect(screen.queryByRole('table')).not.toBeInTheDocument();
});
@@ -80,7 +80,7 @@ describe('LinksSettings', () => {
expect(getTableBodyRows().length).toBe(links.length);
expect(
screen.queryByLabelText(selectors.components.CallToActionCard.button('Add dashboard link'))
screen.queryByTestId(selectors.components.CallToActionCard.buttonV2('Add dashboard link'))
).not.toBeInTheDocument();
});

View File

@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import { Input, TimeZonePicker, Field, Switch, CollapsableSection, WeekStartPicker } from '@grafana/ui';
import { CollapsableSection, Field, Input, Switch, TimeZonePicker, WeekStartPicker } from '@grafana/ui';
import { rangeUtil, TimeZone } from '@grafana/data';
import { isEmpty } from 'lodash';
import { selectors } from '@grafana/e2e-selectors';
@@ -65,7 +65,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
render() {
return (
<CollapsableSection label="Time options" isOpen={true}>
<Field label="Timezone" aria-label={selectors.components.TimeZonePicker.container}>
<Field label="Timezone" data-testid={selectors.components.TimeZonePicker.containerV2}>
<TimeZonePicker
inputId="time-options-input"
includeInternal={true}
@@ -74,7 +74,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
width={40}
/>
</Field>
<Field label="Week start" aria-label={selectors.components.WeekStartPicker.container}>
<Field label="Week start" data-testid={selectors.components.WeekStartPicker.containerV2}>
<WeekStartPicker
inputId="week-start-input"
width={40}