Piechart: add e2e test (#33737)

e2e/suite1/specs/pie-chart.spec.ts

@@ -0,0 +1,18 @@
+import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
+
+e2e.scenario({
+  describeName: 'Pie Chart Panel',
+  itName: 'Pie Chart rendering e2e tests',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    // open Panel Tests - Pie Chart
+    e2e.flows.openDashboard({ uid: 'lVE-2YFMz' });
+
+    e2e()
+      .get(`[data-panelid=11] [aria-label^="${selectors.components.Panels.Visualization.PieChart.svgSlice}"]`)
+      .should('have.length', 5);
+  },
+});

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

@@ -44,6 +44,9 @@ export const Components = {
       BarGauge: {
         value: 'Bar gauge value',
       },
+      PieChart: {
+        svgSlice: 'Pie Chart Slice',
+      },
       Text: {
         container: () => '.markdown-html',
       },

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

@@ -8,6 +8,7 @@ import {
   getFieldDisplayValues,
   GrafanaTheme2,
 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import tinycolor from 'tinycolor2';
 import Pie, { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
@@ -317,6 +318,7 @@ function PieSlice({ arc, pie, highlighted, openMenu, fill, tooltip, tooltipOptio
       onMouseMove={tooltipOptions.mode !== 'none' ? onMouseMoveOverArc : undefined}
       onMouseOut={tooltip.hideTooltip}
       onClick={openMenu}
+      aria-label={selectors.components.Panels.Visualization.PieChart.svgSlice}
     >
       <path d={pie.path({ ...arc })!} fill={fill} stroke={theme.colors.background.primary} strokeWidth={1} />
     </g>