From a30f8645d1a0d0c5c7525ef69080a0dc8681d5da Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 2 Feb 2024 13:26:37 +0000
Subject: [PATCH] Chore: Migrate frontend platform code to use `data-testid`
 for selectors (#81787)

* migrate some stuff from aria-label to data-testid

* convert styles to objects

* fix unit tests

* empty commit to kick drone now enterprise branch is there
---
 .betterer.results                             | 15 -------
 .../src/selectors/components.ts               |  4 +-
 .../DateTimePickers/TimeRangeInput.tsx        |  2 +-
 .../PageHeader/PanelHeaderMenuItem.tsx        |  5 ++-
 .../QueryOperationAction.test.tsx             | 14 +++----
 .../QueryOperationAction.tsx                  | 39 +++++++++----------
 .../Select/OldFolderPicker.test.tsx           | 12 +++---
 .../components/Select/OldFolderPicker.tsx     | 12 +++---
 .../alerting/unified/Silences.test.tsx        |  3 +-
 .../BrowseActions/MoveModal.test.tsx          |  7 ++--
 .../TransformationsEditor.test.tsx            |  2 +-
 11 files changed, 50 insertions(+), 65 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index eb523e906fe..acdb0ea202c 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -637,9 +637,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
     ],
-    "packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -1006,9 +1003,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
-    "public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
@@ -1016,11 +1010,6 @@ exports[`better eslint`] = {
     "public/app/core/components/QueryOperationRow/OperationRowHelp.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/core/components/QueryOperationRow/QueryOperationAction.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
     "public/app/core/components/QueryOperationRow/QueryOperationRow.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
@@ -1046,10 +1035,6 @@ exports[`better eslint`] = {
     "public/app/core/components/RolePicker/ValueContainer.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/core/components/Select/OldFolderPicker.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/core/components/TagFilter/TagFilter.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index c9dde2bacaa..6a3f126b69d 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -285,7 +285,7 @@ export const Components = {
     rows: 'Query editor row',
   },
   QueryEditorRow: {
-    actionButton: (title: string) => `${title}`,
+    actionButton: (title: string) => `data-testid ${title}`,
     title: (refId: string) => `Query editor row title ${refId}`,
     container: (refId: string) => `Query editor row ${refId}`,
   },
@@ -392,7 +392,7 @@ export const Components = {
      */
     container: 'Folder picker select container',
     containerV2: 'data-testid Folder picker select container',
-    input: 'Select a folder',
+    input: 'data-testid folder-picker-input',
   },
   ReadonlyFolderPicker: {
     container: 'data-testid Readonly folder picker select container',
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
index 8a63f528743..03b48a4d7ff 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
@@ -78,7 +78,7 @@ export const TimeRangeInput = ({
       <button
         type="button"
         className={styles.pickerInput}
-        aria-label={selectors.components.TimePicker.openButton}
+        data-testid={selectors.components.TimePicker.openButton}
         onClick={onOpen}
       >
         {showIcon && <Icon name="clock-nine" size={'sm'} className={styles.icon} />}
diff --git a/public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx b/public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx
index e9d8291a48e..28d02904d9d 100644
--- a/public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx
+++ b/public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx
@@ -33,7 +33,10 @@ export const PanelHeaderMenuItem = (props: Props & PanelMenuItem) => {
         >
           <a onClick={props.onClick} href={props.href} role="menuitem">
             {icon && <Icon name={icon} className={styles.menuIconClassName} />}
-            <span className="dropdown-item-text" aria-label={selectors.components.Panels.Panel.headerItems(props.text)}>
+            <span
+              className="dropdown-item-text"
+              data-testid={selectors.components.Panels.Panel.headerItems(props.text)}
+            >
               {props.text}
               {isSubMenu && <Icon name="angle-right" className={styles.shortcutIconClassName} />}
             </span>
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
index b7d583a01a2..5895d97c201 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
@@ -2,8 +2,6 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { ComponentPropsWithoutRef } from 'react';
 
-import { selectors } from '@grafana/e2e-selectors';
-
 import { QueryOperationAction, QueryOperationToggleAction } from './QueryOperationAction';
 
 describe('QueryOperationAction tests', () => {
@@ -22,9 +20,7 @@ describe('QueryOperationAction tests', () => {
   it('should render component', () => {
     setup();
 
-    expect(
-      screen.getByRole('button', { name: selectors.components.QueryEditorRow.actionButton('test') })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'test' })).toBeInTheDocument();
   });
 
   it('should call on click handler', async () => {
@@ -32,7 +28,7 @@ describe('QueryOperationAction tests', () => {
     setup({ disabled: false, onClick: clickSpy });
 
     expect(clickSpy).not.toHaveBeenCalled();
-    const queryButton = screen.getByRole('button', { name: selectors.components.QueryEditorRow.actionButton('test') });
+    const queryButton = screen.getByRole('button', { name: 'test' });
 
     await userEvent.click(queryButton);
 
@@ -44,7 +40,7 @@ describe('QueryOperationAction tests', () => {
     setup({ disabled: true, onClick: clickSpy });
 
     expect(clickSpy).not.toHaveBeenCalled();
-    const queryButton = screen.getByRole('button', { name: selectors.components.QueryEditorRow.actionButton('test') });
+    const queryButton = screen.getByRole('button', { name: 'test' });
 
     await userEvent.click(queryButton);
 
@@ -69,7 +65,7 @@ describe('QueryOperationToggleAction', () => {
 
     expect(
       screen.getByRole('button', {
-        name: selectors.components.QueryEditorRow.actionButton('test'),
+        name: 'test',
         pressed: false,
       })
     ).toBeInTheDocument();
@@ -78,7 +74,7 @@ describe('QueryOperationToggleAction', () => {
 
     expect(
       screen.getByRole('button', {
-        name: selectors.components.QueryEditorRow.actionButton('test'),
+        name: 'test',
         pressed: true,
       })
     ).toBeInTheDocument();
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
index 0dc58eff83c..c9a0bf2a543 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
@@ -25,8 +25,7 @@ function BaseQueryOperationAction(props: QueryOperationActionProps | QueryOperat
         disabled={!!props.disabled}
         onClick={props.onClick}
         type="button"
-        aria-label={selectors.components.QueryEditorRow.actionButton(props.title)}
-        data-testid={props.dataTestId}
+        data-testid={props.dataTestId ?? selectors.components.QueryEditorRow.actionButton(props.title)}
         {...('active' in props && { 'aria-pressed': props.active })}
       />
     </div>
@@ -47,23 +46,23 @@ export const QueryOperationToggleAction = (props: QueryOperationToggleActionProp
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    icon: css`
-      display: flex;
-      position: relative;
-      color: ${theme.colors.text.secondary};
-    `,
-    active: css`
-      &::before {
-        display: block;
-        content: ' ';
-        position: absolute;
-        left: -1px;
-        right: 2px;
-        height: 3px;
-        border-radius: ${theme.shape.radius.default};
-        bottom: -8px;
-        background-image: ${theme.colors.gradients.brandHorizontal} !important;
-      }
-    `,
+    icon: css({
+      display: 'flex',
+      position: 'relative',
+      color: theme.colors.text.secondary,
+    }),
+    active: css({
+      '&:before': {
+        display: 'block',
+        content: '" "',
+        position: 'absolute',
+        left: -1,
+        right: 2,
+        height: 3,
+        borderRadius: theme.shape.radius.default,
+        bottom: -8,
+        backgroundImage: theme.colors.gradients.brandHorizontal,
+      },
+    }),
   };
 };
diff --git a/public/app/core/components/Select/OldFolderPicker.test.tsx b/public/app/core/components/Select/OldFolderPicker.test.tsx
index 0be47d4847a..9b86d840f65 100644
--- a/public/app/core/components/Select/OldFolderPicker.test.tsx
+++ b/public/app/core/components/Select/OldFolderPicker.test.tsx
@@ -35,7 +35,7 @@ describe('OldFolderPicker', () => {
 
     render(<OldFolderPicker onChange={jest.fn()} filter={(hits) => hits.filter((h) => h.uid !== 'wfTJJL5Wz')} />);
 
-    const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
+    const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
     selectEvent.openMenu(pickerContainer);
 
     const pickerOptions = await screen.findAllByLabelText('Select option');
@@ -62,7 +62,7 @@ describe('OldFolderPicker', () => {
     render(<OldFolderPicker onChange={onChangeFn} enableCreateNew={true} allowEmpty={true} />);
     expect(await screen.findByTestId(selectors.components.FolderPicker.containerV2)).toBeInTheDocument();
 
-    await userEvent.type(screen.getByLabelText('Select a folder'), newFolder.title);
+    await userEvent.type(screen.getByTestId(selectors.components.FolderPicker.input), newFolder.title);
     const enter = await screen.findByText('Hit enter to add');
 
     await userEvent.click(enter);
@@ -89,7 +89,7 @@ describe('OldFolderPicker', () => {
     const onChangeFn = jest.fn();
     render(<OldFolderPicker onChange={onChangeFn} />);
     expect(await screen.findByTestId(selectors.components.FolderPicker.containerV2)).toBeInTheDocument();
-    const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
+    const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
     selectEvent.openMenu(pickerContainer);
 
     const pickerOptions = await screen.findAllByLabelText('Select option');
@@ -110,7 +110,7 @@ describe('OldFolderPicker', () => {
     const onChangeFn = jest.fn();
     render(<OldFolderPicker onChange={onChangeFn} showRoot={false} />);
     expect(await screen.findByTestId(selectors.components.FolderPicker.containerV2)).toBeInTheDocument();
-    const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
+    const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
     selectEvent.openMenu(pickerContainer);
 
     const pickerOptions = await screen.findAllByLabelText('Select option');
@@ -131,7 +131,7 @@ describe('OldFolderPicker', () => {
     const onChangeFn = jest.fn();
     render(<OldFolderPicker onChange={onChangeFn} />);
     expect(await screen.findByTestId(selectors.components.FolderPicker.containerV2)).toBeInTheDocument();
-    const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
+    const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
     selectEvent.openMenu(pickerContainer);
 
     const pickerOptions = await screen.findAllByLabelText('Select option');
@@ -152,7 +152,7 @@ describe('OldFolderPicker', () => {
     const onChangeFn = jest.fn();
     render(<OldFolderPicker onChange={onChangeFn} />);
 
-    const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
+    const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
     await userEvent.type(pickerContainer, 'Test');
 
     expect(await screen.findByText('Dash Test')).toBeInTheDocument();
diff --git a/public/app/core/components/Select/OldFolderPicker.tsx b/public/app/core/components/Select/OldFolderPicker.tsx
index 0ee5f997b18..c144b30fba1 100644
--- a/public/app/core/components/Select/OldFolderPicker.tsx
+++ b/public/app/core/components/Select/OldFolderPicker.tsx
@@ -340,7 +340,7 @@ export function OldFolderPicker(props: Props) {
         <FolderWarningWhenSearching />
         <AsyncVirtualizedSelect
           inputId={inputId}
-          aria-label={selectors.components.FolderPicker.input}
+          data-testid={selectors.components.FolderPicker.input}
           loadingMessage={t('folder-picker.loading', 'Loading folders...')}
           defaultOptions
           defaultValue={folder}
@@ -383,9 +383,9 @@ export async function getInitialValues({ folderName, folderUid, getFolder }: Arg
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  newFolder: css`
-    color: ${theme.colors.warning.main};
-    font-size: ${theme.typography.bodySmall.fontSize};
-    padding-bottom: ${theme.spacing(1)};
-  `,
+  newFolder: css({
+    color: theme.colors.warning.main,
+    fontSize: theme.typography.bodySmall.fontSize,
+    paddingBottom: theme.spacing(1),
+  }),
 });
diff --git a/public/app/features/alerting/unified/Silences.test.tsx b/public/app/features/alerting/unified/Silences.test.tsx
index 4b5ade80ec8..905ed88d476 100644
--- a/public/app/features/alerting/unified/Silences.test.tsx
+++ b/public/app/features/alerting/unified/Silences.test.tsx
@@ -5,6 +5,7 @@ import { TestProvider } from 'test/helpers/TestProvider';
 import { byLabelText, byPlaceholderText, byRole, byTestId, byText } from 'testing-library-selector';
 
 import { dateTime } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { config, locationService, setDataSourceSrv } from '@grafana/runtime';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AlertState, MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
@@ -62,7 +63,7 @@ const ui = {
   addSilenceButton: byRole('link', { name: /add silence/i }),
   queryBar: byPlaceholderText('Search'),
   editor: {
-    timeRange: byLabelText('Timepicker', { exact: false }),
+    timeRange: byTestId(selectors.components.TimePicker.openButton),
     durationField: byLabelText('Duration'),
     durationInput: byRole('textbox', { name: /duration/i }),
     matchersField: byTestId('matcher'),
diff --git a/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.test.tsx b/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.test.tsx
index 182e712f1fe..0691ad44206 100644
--- a/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.test.tsx
+++ b/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.test.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { TestProvider } from 'test/helpers/TestProvider';
 import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { setBackendSrv } from '@grafana/runtime';
 import { backendSrv } from 'app/core/services/__mocks__/backend_srv';
 import * as api from 'app/features/manage-dashboards/state/actions';
@@ -70,7 +71,7 @@ describe('browse-dashboards MoveModal', () => {
   it('displays a folder picker', async () => {
     render(<MoveModal {...props} />);
 
-    expect(await screen.findByRole('combobox', { name: 'Select a folder' })).toBeInTheDocument();
+    expect(await screen.findByTestId(selectors.components.FolderPicker.input)).toBeInTheDocument();
   });
 
   it('displays a warning about permissions if a folder is selected', async () => {
@@ -88,7 +89,7 @@ describe('browse-dashboards MoveModal', () => {
     render(<MoveModal {...props} />);
 
     expect(await screen.findByRole('button', { name: 'Move' })).toBeDisabled();
-    const folderPicker = await screen.findByRole('combobox', { name: 'Select a folder' });
+    const folderPicker = await screen.findByTestId(selectors.components.FolderPicker.input);
 
     await selectOptionInTest(folderPicker, mockFolders[1].title);
     expect(await screen.findByRole('button', { name: 'Move' })).toBeEnabled();
@@ -96,7 +97,7 @@ describe('browse-dashboards MoveModal', () => {
 
   it('calls onConfirm when clicking the `Move` button', async () => {
     render(<MoveModal {...props} />);
-    const folderPicker = await screen.findByRole('combobox', { name: 'Select a folder' });
+    const folderPicker = await screen.findByTestId(selectors.components.FolderPicker.input);
 
     await selectOptionInTest(folderPicker, mockFolders[1].title);
     await userEvent.click(await screen.findByRole('button', { name: 'Move' }));
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx
index 225ded8d755..e272b3bf3d4 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx
@@ -93,7 +93,7 @@ describe('TransformationsEditor', () => {
 
         expect(screen.queryByTestId(debuggerSelector)).toBeNull();
 
-        const debugButton = screen.getByLabelText(selectors.components.QueryEditorRow.actionButton('Debug'));
+        const debugButton = screen.getByTestId(selectors.components.QueryEditorRow.actionButton('Debug'));
         await userEvent.click(debugButton);
 
         expect(screen.getByTestId(debuggerSelector)).toBeInTheDocument();