Chore: Migrate from aria-label to data-testid in plugin-related tests (#79272)

* Update basicsettings for datasource

* Change aria-label for data-testid

* Update more tests

* Update betterer

* Remove unnecessary data-testid

* Put back aria label for some datasource selectors

* Try to use data-testid with alerts

* Update betterer

.betterer.results

@@ -3037,17 +3037,12 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
     "public/app/features/datasources/components/BasicSettings.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.", "0"]
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/features/datasources/components/DataSourceReadOnlyMessage.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
     "public/app/features/datasources/components/DataSourceTestingStatus.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "2"]
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"]
     ],
     "public/app/features/datasources/components/DataSourceTypeCard.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
@@ -4065,9 +4060,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "1"],
       [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
-    "public/app/features/plugins/admin/components/PluginDetailsDisabledError.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
@@ -4082,9 +4074,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "2"],
       [0, 0, 0, "Styles should be written using objects.", "3"]
     ],
-    "public/app/features/plugins/admin/components/PluginDetailsSignature.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
@@ -4119,9 +4108,6 @@ exports[`better eslint`] = {
     "public/app/features/plugins/admin/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/features/plugins/components/PluginsErrorsInfo.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "public/app/features/plugins/datasource_srv.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -17,11 +17,11 @@ export const Pages = {
     url: '/',
   },
   DataSource: {
-    name: 'Data source settings page name input field',
+    name: 'data-testid Data source settings page name input field',
     delete: 'Data source settings page Delete button',
-    readOnly: 'Data source settings page read only message',
+    readOnly: 'data-testid Data source settings page read only message',
     saveAndTest: 'data-testid Data source settings page Save and Test button',
-    alert: 'Data source settings page Alert',
+    alert: 'data-testid Data source settings page Alert',
   },
   DataSources: {
     url: '/datasources',
@@ -268,12 +268,12 @@ export const Pages = {
     page: 'Plugins list page',
     list: 'Plugins list',
     listItem: 'Plugins list item',
-    signatureErrorNotice: 'Unsigned plugins notice',
+    signatureErrorNotice: 'data-testid Unsigned plugins notice',
   },
   PluginPage: {
     page: 'Plugin page',
-    signatureInfo: 'Plugin signature info',
+    signatureInfo: 'data-testid Plugin signature info',
-    disabledInfo: 'Plugin disabled info',
+    disabledInfo: 'data-testid Plugin disabled info',
   },
   PlaylistForm: {
     name: 'Playlist name',

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -54,15 +54,9 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
     const ariaLabel = restProps['aria-label'] || title;
 
     return (
-      <div
+      <div ref={ref} className={cx(styles.wrapper, className)} role={role} aria-label={ariaLabel} {...restProps}>
-        ref={ref}
-        className={cx(styles.wrapper, className)}
-        data-testid={selectors.components.Alert.alertV2(severity)}
-        role={role}
-        aria-label={ariaLabel}
-        {...restProps}
-      >
         <Box
+          data-testid={selectors.components.Alert.alertV2(severity)}
           display="flex"
           backgroundColor={severity}
           borderRadius="default"

public/app/features/datasources/components/BasicSettings.test.tsx

@@ -20,7 +20,7 @@ describe('<BasicSettings>', () => {
   it('should render component', () => {
     setup();
 
-    expect(screen.getByRole('textbox', { name: selectors.pages.DataSource.name })).toBeInTheDocument();
+    expect(screen.getByTestId(selectors.pages.DataSource.name)).toBeInTheDocument();
     expect(screen.getByRole('checkbox', { name: /Default/ })).toBeInTheDocument();
   });
 });

public/app/features/datasources/components/BasicSettings.tsx

@@ -34,7 +34,7 @@ export function BasicSettings({ dataSourceName, isDefault, onDefaultChange, onNa
                 placeholder="Name"
                 onChange={(event) => onNameChange(event.currentTarget.value)}
                 required
-                aria-label={selectors.pages.DataSource.name}
+                data-testid={selectors.pages.DataSource.name}
               />
             </InlineField>
           </div>

public/app/features/datasources/components/DataSourceReadOnlyMessage.tsx

@@ -8,7 +8,7 @@ export const readOnlyMessage =
 
 export function DataSourceReadOnlyMessage() {
   return (
-    <Alert aria-label={e2eSelectors.pages.DataSource.readOnly} severity="info" title="Provisioned data source">
+    <Alert data-testid={e2eSelectors.pages.DataSource.readOnly} severity="info" title="Provisioned data source">
       {readOnlyMessage}
     </Alert>
   );

public/app/features/datasources/components/DataSourceTestingStatus.tsx

@@ -100,7 +100,7 @@ export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource
   if (message) {
     return (
       <div className="gf-form-group p-t-2">
-        <Alert severity={severity} title={message} aria-label={e2eSelectors.pages.DataSource.alert}>
+        <Alert severity={severity} title={message} data-testid={e2eSelectors.pages.DataSource.alert}>
           {testingStatus?.details && (
             <>
               {detailsMessage}

public/app/features/plugins/admin/components/PluginDetailsDisabledError.tsx

@@ -21,7 +21,7 @@ export function PluginDetailsDisabledError({ className, plugin }: Props): ReactE
       severity="error"
       title="Plugin disabled"
       className={className}
-      aria-label={selectors.pages.PluginPage.disabledInfo}
+      data-testid={selectors.pages.PluginPage.disabledInfo}
     >
       {renderDescriptionFromError(plugin.error)}
       <p>Please contact your server administrator to get this resolved.</p>

public/app/features/plugins/admin/components/PluginDetailsSignature.tsx

@@ -26,7 +26,7 @@ export function PluginDetailsSignature({ className, plugin }: Props): React.Reac
     <Alert
       severity="warning"
       title="Invalid plugin signature"
-      aria-label={selectors.pages.PluginPage.signatureInfo}
+      data-testid={selectors.pages.PluginPage.signatureInfo}
       className={className}
     >
       <p>

public/app/features/plugins/admin/pages/PluginDetails.test.tsx

@@ -382,14 +382,14 @@ describe('Plugin details page', () => {
     });
 
     it('should display alert with information about why the plugin is disabled', async () => {
-      const { queryByLabelText } = renderPluginDetails({
+      const { queryByTestId } = renderPluginDetails({
         id,
         isInstalled: true,
         isDisabled: true,
         error: PluginErrorCode.modifiedSignature,
       });
 
-      expect(await queryByLabelText(selectors.pages.PluginPage.disabledInfo)).toBeInTheDocument();
+      expect(queryByTestId(selectors.pages.PluginPage.disabledInfo)).toBeInTheDocument();
     });
 
     it('should display grafana dependencies for a plugin if they are available', async () => {

public/app/features/plugins/components/PluginsErrorsInfo.tsx

@@ -23,7 +23,7 @@ export function PluginsErrorsInfo({ filterByPluginType }: PluginsErrorInfoProps)
   return (
     <Alert
       title="Unsigned plugins were found during plugin initialization. Grafana Labs cannot guarantee the integrity of these plugins. We recommend only using signed plugins."
-      aria-label={selectors.pages.PluginsList.signatureErrorNotice}
+      data-testid={selectors.pages.PluginsList.signatureErrorNotice}
       severity="warning"
     >
       <p>The following plugins are disabled and not shown in the list below:</p>