From 69002a336800559acb9943a8b227a0f1eccdef99 Mon Sep 17 00:00:00 2001
From: Aramis Sennyey <sennyeya@amazon.com>
Date: Fri, 24 Feb 2023 13:14:21 -0500
Subject: [PATCH] Add test cases.

Signed-off-by: Aramis Sennyey <sennyeya@amazon.com>
---
 .../src/components/RadarGrid/RadarGrid.test.tsx   | 12 ++++++++++++
 .../src/components/RadarGrid/RadarGrid.tsx        |  1 +
 .../components/RadarLegend/RadarLegend.test.tsx   | 15 +++++++++++++++
 .../components/RadarLegend/RadarLegendRing.tsx    |  6 +++++-
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
index 2e0a5a225c..e8896ec9e0 100644
--- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
+++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
@@ -44,4 +44,16 @@ describe('RadarGrid', () => {
     expect(rendered.getByTestId('radar-grid-x-line')).toBeInTheDocument();
     expect(rendered.getByTestId('radar-grid-y-line')).toBeInTheDocument();
   });
+
+  it('should have the correct text color', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarGrid {...minProps} />
+      </svg>,
+    );
+
+    expect(rendered.getByTestId('radar-ring-heading')).toHaveStyle({
+      fill: '#93c47d',
+    });
+  });
 });
diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
index acf69e8cbb..8dc1a62c56 100644
--- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
+++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
@@ -64,6 +64,7 @@ const RadarGrid = (props: Props) => {
       textAnchor="middle"
       className={classes.text}
       style={{ fill: rings[ringIndex].color }}
+      data-testid="radar-ring-heading"
     >
       {rings[ringIndex].name}
     </text>,
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
index de8bfd15d7..70cd2d0244 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
@@ -56,4 +56,19 @@ describe('RadarLegend', () => {
     expect(rendered.getAllByTestId('radar-quadrant')).toHaveLength(1);
     expect(rendered.getAllByTestId('radar-ring')).toHaveLength(1);
   });
+
+  it('should have the correct ring text color', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarLegend {...minProps} />
+      </svg>,
+    );
+
+    expect(rendered.getByTestId('radar-legend')).toBeInTheDocument();
+
+    const legend = rendered.getByTestId('radar-legend-heading');
+    expect(legend).toHaveStyle({
+      color: '#93c47d',
+    });
+  });
 });
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx
index 577e0bcab4..da5c10831e 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx
@@ -37,7 +37,11 @@ export const RadarLegendRing = ({
 }: RadarLegendRingProps) => {
   return (
     <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
-      <h3 className={classes.ringHeading} style={{ color: ring.color }}>
+      <h3
+        className={classes.ringHeading}
+        style={{ color: ring.color }}
+        data-testid="radar-legend-heading"
+      >
         {ring.name}
       </h3>
       {entries.length === 0 ? (