From 36bc5535f4d2f1ec34d0121ea198f1954b4f1e25 Mon Sep 17 00:00:00 2001
From: Paul Marbach <paul.marbach@grafana.com>
Date: Wed, 17 Dec 2025 17:24:41 -0500
Subject: [PATCH] shore up testing a bit

---
 .../components/RadialGauge/RadialArcPath.tsx  | 35 ++++++-------------
 .../RadialGauge/RadialGauge.story.tsx         |  4 +++
 .../RadialGauge/RadialGauge.test.tsx          | 25 ++++++++++---
 .../src/components/RadialGauge/utils.ts       |  1 +
 4 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
index 4a0eabb7866..c648022d864 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
@@ -1,4 +1,4 @@
-import { useId, memo, HTMLAttributes, ReactElement } from 'react';
+import { useId, memo, HTMLAttributes, ReactNode } from 'react';
 
 import { FieldDisplay } from '@grafana/data';
 
@@ -77,38 +77,25 @@ export const RadialArcPath = memo(
       endpointMarker === 'point' ? Math.min((barWidth / 2) * DOT_RADIUS_FACTOR, MAX_DOT_RADIUS) : barWidth / 2;
 
     let barEndcapColors: [string | undefined, string | undefined] | undefined;
-    const endpointMarks: ReactElement[] = [];
+
+    let endpointMarks: ReactNode = null;
     if (endpointMarker && gradientStops.length > 0) {
       switch (endpointMarker) {
         case 'point':
           const [pointColorStart, pointColorEnd] = getEndpointMarkerColors(gradientStops, fieldDisplay.display.percent);
-          if (arcLengthDeg > DOT_START_MIN_ANGLE_DEG) {
-            endpointMarks.push(
-              <circle
-                key="endpoint-marker-start"
-                cx={xStart}
-                cy={yStart}
-                r={dotRadius}
-                fill={pointColorStart}
-                opacity={DOT_OPACITY}
-              />
-            );
-          }
-          endpointMarks.push(
-            <circle
-              key="endpoint-marker-end"
-              cx={xEnd}
-              cy={yEnd}
-              r={dotRadius}
-              fill={pointColorEnd}
-              opacity={DOT_OPACITY}
-            />
+          endpointMarks = (
+            <>
+              {arcLengthDeg > DOT_START_MIN_ANGLE_DEG && (
+                <circle cx={xStart} cy={yStart} r={dotRadius} fill={pointColorStart} opacity={DOT_OPACITY} />
+              )}
+              <circle cx={xEnd} cy={yEnd} r={dotRadius} fill={pointColorEnd} opacity={DOT_OPACITY} />
+            </>
           );
           break;
         case 'glow':
           const xStartMark = centerX + radius * Math.cos(endRadians - 0.2);
           const yStartMark = centerY + radius * Math.sin(endRadians - 0.2);
-          endpointMarks.push(
+          endpointMarks = (
             <path
               d={['M', xStartMark, yStartMark, 'A', radius, radius, 0, 0, 1, xEnd, yEnd].join(' ')}
               fill="none"
diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx
index e6d6da7366c..b0574ef3f87 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx
@@ -81,6 +81,7 @@ const meta: Meta<StoryProps> = {
     seriesCount: { control: { type: 'range', min: 1, max: 20 } },
     segmentCount: { control: { type: 'range', min: 0, max: 100 } },
     segmentSpacing: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+    endpointMarker: { control: { type: 'select' }, options: ['none', 'point', 'glow'] },
     colorScheme: {
       control: { type: 'select' },
       options: [
@@ -344,6 +345,7 @@ interface ExampleProps {
   roundedBars?: boolean;
   thresholdsBar?: boolean;
   colorScheme?: FieldColorModeId;
+  endpointMarker?: RadialGaugeProps['endpointMarker'];
   decimals?: number;
   showScaleLabels?: boolean;
 }
@@ -370,6 +372,7 @@ export function RadialGaugeExample({
   roundedBars = false,
   thresholdsBar = false,
   colorScheme = FieldColorModeId.Thresholds,
+  endpointMarker = 'glow',
   decimals = 0,
   showScaleLabels,
 }: ExampleProps) {
@@ -456,6 +459,7 @@ export function RadialGaugeExample({
       roundedBars={roundedBars}
       thresholdsBar={thresholdsBar}
       showScaleLabels={showScaleLabels}
+      endpointMarker={endpointMarker}
     />
   );
 }
diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx
index e2fed36ec3f..783e3b764da 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx
@@ -1,13 +1,28 @@
 import { render, screen } from '@testing-library/react';
+import { ComponentProps } from 'react';
 
 import { RadialGaugeExample } from './RadialGauge.story';
 
 describe('RadialGauge', () => {
-  it('should render', () => {
-    render(<RadialGaugeExample />);
-
-    expect(screen.getByRole('img')).toBeInTheDocument();
-  });
+  it.each([
+    { description: 'default', props: {} },
+    { description: 'gauge shape', props: { shape: 'gauge' } },
+    { description: 'with gradient', props: { gradient: true } },
+    { description: 'with glow bar', props: { glowBar: true } },
+    { description: 'with glow center', props: { glowCenter: true } },
+    { description: 'with segments', props: { segmentCount: 5 } },
+    { description: 'with rounded bars', props: { roundedBars: true } },
+    { description: 'with endpoint marker glow', props: { roundedBars: true, endpointMarker: 'glow' } },
+    { description: 'with endpoint marker point', props: { roundedBars: true, endpointMarker: 'point' } },
+    { description: 'with thresholds bar', props: { thresholdsBar: true } },
+    { description: 'with sparkline', props: { sparkline: true } },
+  ] satisfies Array<{ description: string; props?: ComponentProps<typeof RadialGaugeExample> }>)(
+    'should render $description without throwing',
+    ({ props }) => {
+      render(<RadialGaugeExample {...props} />);
+      expect(screen.getByRole('img')).toBeInTheDocument();
+    }
+  );
 
   it('should render threshold labels', () => {
     render(<RadialGaugeExample showScaleLabels={true} />);
diff --git a/packages/grafana-ui/src/components/RadialGauge/utils.ts b/packages/grafana-ui/src/components/RadialGauge/utils.ts
index 72030a09ad6..e089f9b3267 100644
--- a/packages/grafana-ui/src/components/RadialGauge/utils.ts
+++ b/packages/grafana-ui/src/components/RadialGauge/utils.ts
@@ -115,6 +115,7 @@ export function calculateDimensions(
     maxRadiusW -= labelsSize;
     maxRadiusH -= labelsSize;
 
+    // FIXME: needs coverage
     // For gauges the max label needs a bit more vertical space so that it does not get clipped
     if (maxRadiusIsLimitedByHeight && endAngle < 180) {
       const amount = outerRadius * 0.07;