From 549820350779c41ae28ee49175ce07258bbb573b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Wed, 17 Nov 2021 14:45:45 +0100 Subject: [PATCH] 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 --- .pa11yci-pr.conf.js | 18 ++++----- e2e/suite1/specs/bar-gauge.spec.ts | 2 +- e2e/suite1/specs/dashboard-time-zone.spec.ts | 2 +- e2e/suite1/specs/select-focus.spec.ts | 6 +-- .../src/selectors/components.ts | 37 +++++++++++++++++++ .../src/selectors/pages.ts | 18 +++++++++ .../grafana-e2e/src/flows/addDashboard.ts | 12 +++++- .../src/flows/assertSuccessNotification.ts | 6 ++- .../grafana-e2e/src/flows/deleteDashboard.ts | 10 +++-- .../grafana-e2e/src/flows/setTimeRange.ts | 18 ++++++--- .../grafana-ui/src/components/Alert/Alert.tsx | 2 +- .../src/components/BarGauge/BarGauge.tsx | 24 ++++++------ .../__snapshots__/BarGauge.test.tsx.snap | 2 +- .../TimeRangePicker/TimePickerFooter.tsx | 8 ++-- .../DateTimePickers/WeekStartPicker.tsx | 3 +- .../components/EmptyListCTA/EmptyListCTA.tsx | 2 +- .../core/components/Select/FolderPicker.tsx | 2 +- .../__snapshots__/FolderPicker.test.tsx.snap | 2 +- .../SharedPreferences/SharedPreferences.tsx | 21 ++++++++--- .../app/features/alerting/AlertRuleList.tsx | 7 +++- .../features/api-keys/ApiKeysPage.test.tsx | 4 +- .../AnnotationsSettings.test.tsx | 10 ++--- .../GeneralSettings.test.tsx | 7 ++-- .../DashboardSettings/LinksSettings.test.tsx | 4 +- .../DashboardSettings/TimePickerSettings.tsx | 6 +-- .../containers/DashboardPage.test.tsx | 6 +-- .../dashboard/containers/DashboardPage.tsx | 2 +- .../explore/ResponseErrorContainer.test.tsx | 14 ++++--- .../profile/UserProfileEditPage.test.tsx | 4 +- .../components/DashboardSearch.test.tsx | 10 +++-- .../search/components/SearchField.tsx | 2 +- .../search/components/SearchItem.test.tsx | 8 ++-- .../features/search/components/SearchItem.tsx | 6 +-- .../search/components/SearchResults.test.tsx | 19 ++++++---- .../search/components/SearchResults.tsx | 9 ++--- .../search/components/SectionHeader.tsx | 8 +++- .../panel/bargauge/BarGaugePanel.test.tsx | 16 ++++---- 37 files changed, 221 insertions(+), 116 deletions(-) diff --git a/.pa11yci-pr.conf.js b/.pa11yci-pr.conf.js index 225fa97ef77..1d729078a94 100644 --- a/.pa11yci-pr.conf.js +++ b/.pa11yci-pr.conf.js @@ -25,37 +25,37 @@ var config = { "click element button[aria-label='Login button']", "wait for element [aria-label='Skip change password button'] to be visible", ], - threshold: 14, + threshold: 13, rootElement: '.main-view', }, { url: '${HOST}/?orgId=1', wait: 500, - threshold: 1, + threshold: 0, }, { url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge', wait: 500, rootElement: '.main-view', - threshold: 51, + threshold: 0, }, { url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=settings', wait: 500, rootElement: '.main-view', - threshold: 54, + threshold: 0, }, { url: '${HOST}/?orgId=1&search=open', wait: 500, rootElement: '.main-view', - threshold: 8, + threshold: 0, }, { url: '${HOST}/alerting/list', wait: 500, rootElement: '.main-view', - threshold: 1, + threshold: 0, }, { url: '${HOST}/datasources', @@ -85,19 +85,19 @@ var config = { url: '${HOST}/org', wait: 500, rootElement: '.main-view', - threshold: 3, + threshold: 0, }, { url: '${HOST}/org/apikeys', wait: 500, rootElement: '.main-view', - threshold: 1, + threshold: 0, }, { url: '${HOST}/dashboards', wait: 500, rootElement: '.main-view', - threshold: 2, + threshold: 0, }, ], }; diff --git a/e2e/suite1/specs/bar-gauge.spec.ts b/e2e/suite1/specs/bar-gauge.spec.ts index cdc469cb2b9..8881dde4e17 100644 --- a/e2e/suite1/specs/bar-gauge.spec.ts +++ b/e2e/suite1/specs/bar-gauge.spec.ts @@ -12,7 +12,7 @@ e2e.scenario({ e2e.flows.openDashboard({ uid: 'O6f11TZWk' }); e2e() - .get(`[data-panelid=6] [aria-label^="${selectors.components.Panels.Visualization.BarGauge.value}"]`) + .get(`[data-panelid=6] [data-testid^="${selectors.components.Panels.Visualization.BarGauge.valueV2}"]`) .should('have.css', 'color', 'rgb(242, 73, 92)') .contains('100'); }, diff --git a/e2e/suite1/specs/dashboard-time-zone.spec.ts b/e2e/suite1/specs/dashboard-time-zone.spec.ts index 01bba9ce8dd..cfa9ffce794 100644 --- a/e2e/suite1/specs/dashboard-time-zone.spec.ts +++ b/e2e/suite1/specs/dashboard-time-zone.spec.ts @@ -50,7 +50,7 @@ e2e.scenario({ e2e.components.PageToolbar.item('Dashboard settings').click(); - e2e.components.TimeZonePicker.container() + e2e.components.TimeZonePicker.containerV2() .should('be.visible') .within(() => { e2e.components.Select.singleValue().should('be.visible').should('have.text', 'Coordinated Universal Time'); diff --git a/e2e/suite1/specs/select-focus.spec.ts b/e2e/suite1/specs/select-focus.spec.ts index 1a6f2e9ae25..1a83d956c5c 100644 --- a/e2e/suite1/specs/select-focus.spec.ts +++ b/e2e/suite1/specs/select-focus.spec.ts @@ -10,7 +10,7 @@ e2e.scenario({ e2e.flows.openDashboard({ uid: '5SdHCadmz' }); e2e.components.PageToolbar.item('Dashboard settings').click(); - e2e.components.FolderPicker.container() + e2e.components.FolderPicker.containerV2() .should('be.visible') .within(() => { e2e().get('#dashboard-folder-input').should('be.visible').click(); @@ -18,7 +18,7 @@ e2e.scenario({ e2e.components.Select.option().should('be.visible').first().click(); - e2e.components.FolderPicker.container() + e2e.components.FolderPicker.containerV2() .should('be.visible') .within(() => { e2e().get('#dashboard-folder-input').should('exist').should('have.focus'); @@ -26,7 +26,7 @@ e2e.scenario({ e2e.pages.Dashboard.Settings.General.title().click(); - e2e.components.FolderPicker.container() + e2e.components.FolderPicker.containerV2() .should('be.visible') .within(() => { e2e().get('#dashboard-folder-input').should('exist').should('not.have.focus'); diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 10a65d79e3e..ef23263ae4c 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -72,7 +72,11 @@ export const Components = { }, }, BarGauge: { + /** + * @deprecated use valueV2 from Grafana 8.3 instead + */ value: 'Bar gauge value', + valueV2: 'data-testid Bar gauge value', }, PieChart: { svgSlice: 'Pie Chart Slice', @@ -164,7 +168,11 @@ export const Components = { content: 'Alert editor tab content', }, Alert: { + /** + * @deprecated use alertV2 from Grafana 8.3 instead + */ alert: (severity: string) => `Alert ${severity}`, + alertV2: (severity: string) => `data-testid Alert ${severity}`, }, TransformTab: { content: 'Transform editor tab content', @@ -210,7 +218,11 @@ export const Components = { content: 'Field overrides editor content', }, FolderPicker: { + /** + * @deprecated use containerV2 from Grafana 8.3 instead + */ container: 'Folder picker select container', + containerV2: 'data-testid Folder picker select container', input: 'Select a folder', }, ReadonlyFolderPicker: { @@ -225,10 +237,19 @@ export const Components = { inputV2: 'Select a data source', }, TimeZonePicker: { + /** + * @deprecated use TimeZonePicker.containerV2 from Grafana 8.3 instead + */ container: 'Time zone picker select container', + containerV2: 'data-testid Time zone picker select container', }, WeekStartPicker: { + /** + * @deprecated use WeekStartPicker.containerV2 from Grafana 8.3 instead + */ container: 'Choose starting day of the week', + containerV2: 'data-testid Choose starting day of the week', + placeholder: 'Choose starting day of the week', }, TraceViewer: { spanBar: () => '[data-test-id="SpanBar--wrapper"]', @@ -239,8 +260,20 @@ export const Components = { select: (name: string) => `Value picker select ${name}`, }, Search: { + /** + * @deprecated use sectionV2 from Grafana 8.3 instead + */ section: 'Search section', + sectionV2: 'data-testid Search section', + /** + * @deprecated use itemsV2 from Grafana 8.3 instead + */ items: 'Search items', + itemsV2: 'data-testid Search items', + collapseFolder: (sectionId: string) => `data-testid Collapse folder ${sectionId}`, + expandFolder: (sectionId: string) => `data-testid Expand folder ${sectionId}`, + dashboardItem: (item: string) => `${Components.Search.dashboardItems} ${item}`, + dashboardItems: 'data-testid Dashboard search item', }, DashboardLinks: { container: 'data-testid Dashboard link container', @@ -251,7 +284,11 @@ export const Components = { icon: 'Loading indicator', }, CallToActionCard: { + /** + * @deprecated use buttonV2 from Grafana 8.3 instead + */ button: (name: string) => `Call to action button ${name}`, + buttonV2: (name: string) => `data-testid Call to action button ${name}`, }, DataLinksContextMenu: { singleLink: 'Data link', diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index 0c842b7217c..ec9066362d2 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -43,7 +43,11 @@ export const Pages = { Dashboard: { url: (uid: string) => `/d/${uid}`, DashNav: { + /** + * @deprecated use navV2 from Grafana 8.3 instead + */ nav: 'Dashboard navigation', + navV2: 'data-testid Dashboard navigation', }, SubMenu: { submenu: 'Dashboard submenu', @@ -61,12 +65,19 @@ export const Pages = { sectionItems: (item: string) => `Dashboard settings section item ${item}`, saveDashBoard: 'Dashboard settings aside actions Save button', saveAsDashBoard: 'Dashboard settings aside actions Save As button', + /** + * @deprecated use components.TimeZonePicker.containerV2 from Grafana 8.3 instead + */ timezone: 'Time zone picker select container', title: 'Dashboard settings page title', }, Annotations: { List: { + /** + * @deprecated use addAnnotationCTAV2 from Grafana 8.3 instead + */ addAnnotationCTA: Components.CallToActionCard.button('Add annotation query'), + addAnnotationCTAV2: Components.CallToActionCard.buttonV2('Add annotation query'), }, Settings: { name: 'Annotations settings name input', @@ -74,7 +85,11 @@ export const Pages = { }, Variables: { List: { + /** + * @deprecated use addVariableCTAV2 from Grafana 8.3 instead + */ addVariableCTA: Components.CallToActionCard.button('Add variable'), + addVariableCTAV2: Components.CallToActionCard.buttonV2('Add variable'), newButton: 'Variable editor New variable button', table: 'Variable editor Table', tableRowNameFields: (variableName: string) => `Variable editor Table Name field ${variableName}`, @@ -124,6 +139,9 @@ export const Pages = { }, Dashboards: { url: '/dashboards', + /** + * @deprecated use components.Search.dashboardItem from Grafana 8.3 instead + */ dashboards: (title: string) => `Dashboard search item ${title}`, }, SaveDashboardAsModal: { diff --git a/packages/grafana-e2e/src/flows/addDashboard.ts b/packages/grafana-e2e/src/flows/addDashboard.ts index a0be67e10cb..9d3d57fa8f3 100644 --- a/packages/grafana-e2e/src/flows/addDashboard.ts +++ b/packages/grafana-e2e/src/flows/addDashboard.ts @@ -101,7 +101,11 @@ export const addDashboard = (config?: Partial) => { const addAnnotation = (config: AddAnnotationConfig, isFirst: boolean) => { if (isFirst) { - e2e.pages.Dashboard.Settings.Annotations.List.addAnnotationCTA().click(); + if (e2e.pages.Dashboard.Settings.Annotations.List.addAnnotationCTAV2) { + e2e.pages.Dashboard.Settings.Annotations.List.addAnnotationCTAV2().click(); + } else { + e2e.pages.Dashboard.Settings.Annotations.List.addAnnotationCTA().click(); + } } else { cy.contains('New query').click(); } @@ -145,7 +149,11 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar }; if (isFirst) { - e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click(); + if (e2e.pages.Dashboard.Settings.Variables.List.addVariableCTAV2) { + e2e.pages.Dashboard.Settings.Variables.List.addVariableCTAV2().click(); + } else { + e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click(); + } } else { e2e.pages.Dashboard.Settings.Variables.List.newButton().click(); } diff --git a/packages/grafana-e2e/src/flows/assertSuccessNotification.ts b/packages/grafana-e2e/src/flows/assertSuccessNotification.ts index c86f4cc0b98..25f9228683c 100644 --- a/packages/grafana-e2e/src/flows/assertSuccessNotification.ts +++ b/packages/grafana-e2e/src/flows/assertSuccessNotification.ts @@ -1,5 +1,9 @@ import { e2e } from '../index'; export const assertSuccessNotification = () => { - e2e().get('[aria-label^="Alert success"]').should('exist'); + if (e2e.components.Alert.alertV2) { + e2e.components.Alert.alertV2('success').should('exist'); + } else { + e2e.components.Alert.alert('success').should('exist'); + } }; diff --git a/packages/grafana-e2e/src/flows/deleteDashboard.ts b/packages/grafana-e2e/src/flows/deleteDashboard.ts index 9bb90a6412e..d69c3da7146 100644 --- a/packages/grafana-e2e/src/flows/deleteDashboard.ts +++ b/packages/grafana-e2e/src/flows/deleteDashboard.ts @@ -41,7 +41,11 @@ const uiDelete = (uid: string, title: string) => { e2e.pages.Dashboards.visit(); // @todo replace `e2e.pages.Dashboards.dashboards` with this when argument is empty - e2e() - .get('[aria-label^="Dashboard search item "]') - .each((item) => e2e().wrap(item).should('not.contain', title)); + if (e2e.components.Search.dashboardItems) { + e2e.components.Search.dashboardItems().each((item) => e2e().wrap(item).should('not.contain', title)); + } else { + e2e() + .get('[aria-label^="Dashboard search item "]') + .each((item) => e2e().wrap(item).should('not.contain', title)); + } }; diff --git a/packages/grafana-e2e/src/flows/setTimeRange.ts b/packages/grafana-e2e/src/flows/setTimeRange.ts index 8f79bc1d6c4..bcf719087d8 100644 --- a/packages/grafana-e2e/src/flows/setTimeRange.ts +++ b/packages/grafana-e2e/src/flows/setTimeRange.ts @@ -13,11 +13,19 @@ export const setTimeRange = ({ from, to, zone }: TimeRangeConfig) => { if (zone) { e2e().contains('button', 'Change time settings').click(); - selectOption({ - clickToOpen: true, - container: e2e.components.TimeZonePicker.container(), - optionText: zone, - }); + if (e2e.components.TimeZonePicker.containerV2) { + selectOption({ + clickToOpen: true, + container: e2e.components.TimeZonePicker.containerV2(), + optionText: zone, + }); + } else { + selectOption({ + clickToOpen: true, + container: e2e.components.TimeZonePicker.container(), + optionText: zone, + }); + } } // For smaller screens diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index de73527b6e8..831d0519e86 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -47,7 +47,7 @@ export const Alert = React.forwardRef(
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 6e32384abc1..5f6641c819e 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -1,26 +1,26 @@ // Library -import React, { PureComponent, CSSProperties, ReactNode } from 'react'; +import React, { CSSProperties, PureComponent, ReactNode } from 'react'; import tinycolor from 'tinycolor2'; import { - TimeSeriesValue, + DisplayProcessor, DisplayValue, - formattedValueToString, + DisplayValueAlignmentFactors, + FALLBACK_COLOR, + FieldColorModeId, + FieldConfig, FormattedValue, + formattedValueToString, GAUGE_DEFAULT_MAXIMUM, GAUGE_DEFAULT_MINIMUM, - DisplayValueAlignmentFactors, - ThresholdsMode, - DisplayProcessor, - FieldConfig, - FieldColorModeId, getFieldColorMode, - FALLBACK_COLOR, TextDisplayOptions, + ThresholdsMode, + TimeSeriesValue, VizOrientation, } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay'; -import { measureText, calculateFontSize } from '../../utils/measureText'; +import { calculateFontSize, measureText } from '../../utils/measureText'; import { Themeable2 } from '../../types'; const MIN_VALUE_HEIGHT = 18; @@ -114,7 +114,7 @@ export class BarGauge extends PureComponent { return (
@@ -195,7 +195,7 @@ export class BarGauge extends PureComponent {
{cells} diff --git a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap index be671326cee..a5910cdd095 100644 --- a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap +++ b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap @@ -23,7 +23,7 @@ exports[`BarGauge Render with basic options should render 1`] = ` } > = (props) => {
{editMode === 'tz' ? (
= (props) => {
) : (
diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx index d48e44e7e5c..858d42e6c96 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx @@ -37,7 +37,7 @@ export const WeekStartPicker: React.FC = (props) => { { /> - - + + - - + +
- +