From 34d81b7d13a99a038da272c1d8190a653e3985b0 Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Wed, 5 May 2021 14:02:55 +0200
Subject: [PATCH] Piechart: add e2e test (#33737)

---
 e2e/suite1/specs/pie-chart.spec.ts             | 18 ++++++++++++++++++
 .../src/selectors/components.ts                |  3 +++
 .../src/components/PieChart/PieChart.tsx       |  2 ++
 3 files changed, 23 insertions(+)
 create mode 100644 e2e/suite1/specs/pie-chart.spec.ts

diff --git a/e2e/suite1/specs/pie-chart.spec.ts b/e2e/suite1/specs/pie-chart.spec.ts
new file mode 100644
index 00000000000..1d3339e8ec1
--- /dev/null
+++ b/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);
+  },
+});
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index c32de127a6a..90e3b92861c 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/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',
       },
diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
index b15e8ccb398..3aa8934a884 100644
--- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx
+++ b/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>