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

@@ -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"],

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',

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} />}

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>

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(
+    expect(screen.getByRole('button', { name: 'test' })).toBeInTheDocument();
-      screen.getByRole('button', { name: selectors.components.QueryEditorRow.actionButton('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();

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 ?? selectors.components.QueryEditorRow.actionButton(props.title)}
-        data-testid={props.dataTestId}
         {...('active' in props && { 'aria-pressed': props.active })}
       />
     </div>
@@ -47,23 +46,23 @@ export const QueryOperationToggleAction = (props: QueryOperationToggleActionProp
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    icon: css`
+    icon: css({
-      display: flex;
+      display: 'flex',
-      position: relative;
+      position: 'relative',
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-    `,
+    }),
-    active: css`
+    active: css({
-      &::before {
+      '&:before': {
-        display: block;
+        display: 'block',
-        content: ' ';
+        content: '" "',
-        position: absolute;
+        position: 'absolute',
-        left: -1px;
+        left: -1,
-        right: 2px;
+        right: 2,
-        height: 3px;
+        height: 3,
-        border-radius: ${theme.shape.radius.default};
+        borderRadius: theme.shape.radius.default,
-        bottom: -8px;
+        bottom: -8,
-        background-image: ${theme.colors.gradients.brandHorizontal} !important;
+        backgroundImage: theme.colors.gradients.brandHorizontal,
-      }
+      },
-    `,
+    }),
   };
 };

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();

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`
+  newFolder: css({
-    color: ${theme.colors.warning.main};
+    color: theme.colors.warning.main,
-    font-size: ${theme.typography.bodySmall.fontSize};
+    fontSize: theme.typography.bodySmall.fontSize,
-    padding-bottom: ${theme.spacing(1)};
+    paddingBottom: theme.spacing(1),
-  `,
+  }),
 });

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'),

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' }));

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();