Selectors: Add plot selectors (#121858)

* chore: add plot test-id selectors

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

@@ -102,6 +102,19 @@ export const versionedComponents = {
   LayoutContainer: {
     '12.4.0': (identifier: string) => `data-testid Layout container ${identifier}`,
   },
+  VizLayout: {
+    container: {
+      ['13.1.0']: 'data-testid viz-layout',
+    },
+    legend: {
+      ['13.1.0']: 'data-testid viz-layout-legend',
+    },
+  },
+  UPlotChart: {
+    container: {
+      [MIN_GRAFANA_VERSION]: 'uplot-main-div',
+    },
+  },
   TimePicker: {
     moveBackwardButton: {
       '12.4.0': 'data-testid explore-toolbar-timepicker-move-backward-button',
@@ -511,6 +524,14 @@ export const versionedComponents = {
           [MIN_GRAFANA_VERSION]: 'data-testid Bar gauge value',
         },
       },
+      Histogram: {
+        container: {
+          ['13.1.0']: 'data-testid viz-layout',
+        },
+        legend: {
+          ['13.1.0']: 'data-testid viz-layout-legend',
+        },
+      },
       PieChart: {
         svgSlice: {
           '10.3.0': 'data testid Pie Chart Slice',

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useMeasure } from 'react-use';
 
 import { type GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { type LegendPlacement } from '@grafana/schema';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
@@ -45,7 +46,7 @@ export const VizLayout: VizLayoutComponentType = ({ width, height, legend, child
   if (!legend) {
     return (
       <>
-        <div style={containerStyle} className={styles.viz}>
+        <div style={containerStyle} className={styles.viz} data-testid={selectors.components.VizLayout.container}>
           {children(width, height)}
         </div>
       </>
@@ -97,9 +98,9 @@ export const VizLayout: VizLayoutComponentType = ({ width, height, legend, child
   }
 
   return (
-    <div style={containerStyle}>
+    <div style={containerStyle} data-testid={selectors.components.VizLayout.container}>
       <div className={styles.viz}>{size && children(size.width, size.height)}</div>
-      <div style={legendStyle} ref={legendRef}>
+      <div style={legendStyle} ref={legendRef} data-testid={selectors.components.VizLayout.legend}>
         <ScrollContainer>{legend}</ScrollContainer>
       </div>
     </div>