Chore: Update e2e selectors for Transformations (#78426)

* baldm0mma/e2e_selector_migration/ update labels

* baldm0mma/e2e_selector_migration/ run prettier

* baldm0mma/e2e_selector_migration/ add test

* baldm0mma/ update results

* baldm0mma/e2e_selector_migration/ update betterer

.betterer.results

@@ -4979,9 +4979,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
     "public/app/features/transformers/editors/ReduceTransformerEditor.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
+      [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/transformers/editors/RenameByRegexTransformer.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],

e2e/panels-suite/panelEdit_transforms.spec.ts

@@ -11,5 +11,6 @@ describe('Panel edit tests - transformations', () => {
     e2e.components.Tab.title('Transform data').should('be.visible').click();
     e2e.components.TransformTab.newTransform('Reduce').scrollIntoView().should('be.visible').click();
     e2e.components.Transforms.Reduce.calculationsLabel().should('be.visible');
+    e2e.components.Transforms.Reduce.modeLabel().should('be.visible');
   });
 });

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

@@ -229,8 +229,8 @@ export const Components = {
   Transforms: {
     card: (name: string) => `data-testid New transform ${name}`,
     Reduce: {
-      modeLabel: 'Transform mode label',
-      calculationsLabel: 'Transform calculations label',
+      modeLabel: 'data-testid Transform mode label',
+      calculationsLabel: 'data-testid Transform calculations label',
     },
     SpatialOperations: {
       actionLabel: 'root Action field property editor',

public/app/features/transformers/editors/ReduceTransformerEditor.tsx

@@ -58,7 +58,7 @@ export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProp
 
   return (
     <>
-      <InlineField label="Mode" aria-label={selectors.components.Transforms.Reduce.modeLabel} grow labelWidth={16}>
+      <InlineField label="Mode" data-testid={selectors.components.Transforms.Reduce.modeLabel} grow labelWidth={16}>
         <Select
           options={modes}
           value={modes.find((v) => v.value === options.mode) || modes[0]}
@@ -67,7 +67,7 @@ export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProp
       </InlineField>
       <InlineField
         label="Calculations"
-        aria-label={selectors.components.Transforms.Reduce.calculationsLabel}
+        data-testid={selectors.components.Transforms.Reduce.calculationsLabel}
         grow
         labelWidth={16}
       >