From 984f777b677157b37603f226d8b081b55c4a240e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20DOREAU?= <remi.d45@gmail.com>
Date: Sat, 20 Jun 2020 17:45:12 +0200
Subject: [PATCH] refactor(tech-radar): update test + RadarLegend refacto

---
 .../RadarBubble/RadarBubble.test.tsx          |  2 +-
 .../components/RadarBubble/RadarBubble.tsx    |  1 +
 .../components/RadarEntry/RadarEntry.test.tsx |  6 +-
 .../src/components/RadarEntry/RadarEntry.tsx  |  1 +
 .../RadarFooter/RadarFooter.test.tsx          |  6 +-
 .../components/RadarFooter/RadarFooter.tsx    |  6 +-
 .../components/RadarGrid/RadarGrid.test.tsx   |  3 +-
 .../src/components/RadarGrid/RadarGrid.tsx    |  2 +
 .../RadarLegend/RadarLegend.test.tsx          |  4 +-
 .../components/RadarLegend/RadarLegend.tsx    | 84 +++++++++++--------
 .../components/RadarPlot/RadarPlot.test.tsx   |  6 +-
 .../src/components/RadarPlot/RadarPlot.tsx    |  2 +-
 12 files changed, 81 insertions(+), 42 deletions(-)

diff --git a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx
index 9e402b9a91..d56ca743c2 100644
--- a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx
+++ b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx
@@ -47,6 +47,6 @@ describe('RadarBubble', () => {
       </ThemeProvider>,
     );
 
-    expect(rendered).not.toBeNull();
+    expect(rendered.getByText(minProps.text)).toBeInTheDocument();
   });
 });
diff --git a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx
index be38231087..abaed92253 100644
--- a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx
+++ b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx
@@ -98,6 +98,7 @@ const RadarBubble = (props: Props): JSX.Element => {
       x={0}
       y={0}
       className={visible ? classes.visibleBubble : classes.bubble}
+      data-testid="radar-bubble"
     >
       <rect ref={rectElem} rx={4} ry={4} className={classes.background} />
       <text ref={textElem} className={classes.text}>
diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx
index 14614e88e1..2d24f301d1 100644
--- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx
+++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx
@@ -47,6 +47,10 @@ describe('RadarEntry', () => {
       </ThemeProvider>,
     );
 
-    expect(rendered).not.toBeNull();
+    const radarEntry = rendered.getByTestId('radar-entry');
+    const { x, y } = minProps;
+    expect(radarEntry).toBeInTheDocument();
+    expect(radarEntry.getAttribute('transform')).toBe(`translate(${x}, ${y})`);
+    expect(rendered.getByText(String(minProps.value))).toBeInTheDocument();
   });
 });
diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx
index 98841dce87..29d35e01e2 100644
--- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx
+++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx
@@ -80,6 +80,7 @@ const RadarEntry = (props: Props): JSX.Element => {
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onClick={onClick}
+      data-testid="radar-entry"
     >
       <WithLink url={url} className={classes.link}>
         {blip}
diff --git a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx
index 321947a24c..77f21b6e63 100644
--- a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx
+++ b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx
@@ -44,7 +44,9 @@ describe('RadarFooter', () => {
         </svg>
       </ThemeProvider>,
     );
-
-    expect(rendered).not.toBeNull();
+    const radarFooter = rendered.getByTestId('radar-footer');
+    const { x, y } = minProps;
+    expect(radarFooter).toBeInTheDocument();
+    expect(radarFooter.getAttribute('transform')).toBe(`translate(${x}, ${y})`);
   });
 });
diff --git a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx
index 9ba0ed0405..ced1ab8054 100644
--- a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx
+++ b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx
@@ -36,7 +36,11 @@ const RadarFooter = (props: Props): JSX.Element => {
   const classes = useStyles(props);
 
   return (
-    <text transform={`translate(${x}, ${y})`} className={classes.text}>
+    <text
+      data-testid="radar-footer"
+      transform={`translate(${x}, ${y})`}
+      className={classes.text}
+    >
       {'▲ moved up\u00a0\u00a0\u00a0\u00a0\u00a0▼ moved down'}
     </text>
   );
diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
index 9ba170a0e7..3027cc4adb 100644
--- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
+++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx
@@ -45,6 +45,7 @@ describe('RadarGrid', () => {
       </ThemeProvider>,
     );
 
-    expect(rendered).not.toBeNull();
+    expect(rendered.getByTestId('radar-grid-x-line')).toBeInTheDocument();
+    expect(rendered.getByTestId('radar-grid-y-line')).toBeInTheDocument();
   });
 });
diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
index cd06bf6ef8..63c164bc7d 100644
--- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
+++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
@@ -76,6 +76,7 @@ const RadarGrid = (props: Props) => {
       x2={0}
       y2={radius}
       className={classes.axis}
+      data-testid="radar-grid-x-line"
     />,
     // Y axis
     <line
@@ -85,6 +86,7 @@ const RadarGrid = (props: Props) => {
       x2={radius}
       y2={0}
       className={classes.axis}
+      data-testid="radar-grid-y-line"
     />,
   ];
 
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
index 5900f5c1bc..68bfe892ea 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx
@@ -55,6 +55,8 @@ describe('RadarLegend', () => {
       </ThemeProvider>,
     );
 
-    expect(rendered).not.toBeNull();
+    expect(rendered.getByTestId('radar-legend')).toBeInTheDocument();
+    expect(rendered.getAllByTestId('radar-quadrant')).toHaveLength(1);
+    expect(rendered.getAllByTestId('radar-ring')).toHaveLength(1);
   });
 });
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
index 59bd2e2337..57a453205a 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { makeStyles, Theme } from '@material-ui/core';
-import { Quadrant, Ring, Entry } from '../../utils/types';
+import type { Quadrant, Ring, Entry } from '../../utils/types';
 import { WithLink } from '../../utils/components';
 
 type Segments = {
@@ -110,14 +110,21 @@ const RadarLegend = (props: Props): JSX.Element => {
       : segmentedData[ringIndex + ringOffset] || [];
   };
 
-  const renderRing = (
-    ring: Ring,
-    entries: Entry[],
-    onEntryMouseEnter?: Props['onEntryMouseEnter'],
-    onEntryMouseLeave?: Props['onEntryMouseEnter'],
-  ) => {
+  type RadarLegendRingProps = {
+    ring: Ring;
+    entries: Entry[];
+    onEntryMouseEnter?: Props['onEntryMouseEnter'];
+    onEntryMouseLeave?: Props['onEntryMouseEnter'];
+  };
+
+  const RadarLegendRing = ({
+    ring,
+    entries,
+    onEntryMouseEnter,
+    onEntryMouseLeave,
+  }: RadarLegendRingProps) => {
     return (
-      <div key={ring.id} className={classes.ring}>
+      <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
         <h3 className={classes.ringHeading}>{ring.name}</h3>
         {!entries.length ? (
           <p>(empty)</p>
@@ -145,13 +152,21 @@ const RadarLegend = (props: Props): JSX.Element => {
     );
   };
 
-  const renderQuadrant = (
-    segments: Segments,
-    quadrant: Quadrant,
-    rings: Ring[],
-    onEntryMouseEnter: Props['onEntryMouseEnter'],
-    onEntryMouseLeave: Props['onEntryMouseLeave'],
-  ) => {
+  type RadarLegendQuadrantProps = {
+    segments: Segments;
+    quadrant: Quadrant;
+    rings: Ring[];
+    onEntryMouseEnter: Props['onEntryMouseEnter'];
+    onEntryMouseLeave: Props['onEntryMouseLeave'];
+  };
+
+  const RadarLegendQuadrant = ({
+    segments,
+    quadrant,
+    rings,
+    onEntryMouseEnter,
+    onEntryMouseLeave,
+  }: RadarLegendQuadrantProps) => {
     return (
       <foreignObject
         key={quadrant.id}
@@ -159,18 +174,20 @@ const RadarLegend = (props: Props): JSX.Element => {
         y={quadrant.legendY}
         width={quadrant.legendWidth}
         height={quadrant.legendHeight}
+        data-testid="radar-quadrant"
       >
         <div className={classes.quadrant}>
           <h2 className={classes.quadrantHeading}>{quadrant.name}</h2>
           <div className={classes.rings}>
-            {rings.map(ring =>
-              renderRing(
-                ring,
-                getSegment(segments, quadrant, ring),
-                onEntryMouseEnter,
-                onEntryMouseLeave,
-              ),
-            )}
+            {rings.map(ring => (
+              <RadarLegendRing
+                key={ring.id}
+                ring={ring}
+                entries={getSegment(segments, quadrant, ring)}
+                onEntryMouseEnter={onEntryMouseEnter}
+                onEntryMouseLeave={onEntryMouseLeave}
+              />
+            ))}
           </div>
         </div>
       </foreignObject>
@@ -218,16 +235,17 @@ const RadarLegend = (props: Props): JSX.Element => {
   const segments: Segments = setupSegments(entries);
 
   return (
-    <g>
-      {quadrants.map(quadrant =>
-        renderQuadrant(
-          segments,
-          quadrant,
-          rings,
-          onEntryMouseEnter,
-          onEntryMouseLeave,
-        ),
-      )}
+    <g data-testid="radar-legend">
+      {quadrants.map(quadrant => (
+        <RadarLegendQuadrant
+          key={quadrant.id}
+          segments={segments}
+          quadrant={quadrant}
+          rings={rings}
+          onEntryMouseEnter={onEntryMouseEnter}
+          onEntryMouseLeave={onEntryMouseLeave}
+        />
+      ))}
     </g>
   );
 };
diff --git a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx
index 876d3009e4..5b17578478 100644
--- a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx
+++ b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx
@@ -58,6 +58,10 @@ describe('RadarPlot', () => {
       </ThemeProvider>,
     );
 
-    expect(rendered).not.toBeNull();
+    expect(rendered.getByTestId('radar-plot')).toBeInTheDocument();
+    expect(rendered.getByTestId('radar-legend')).toBeInTheDocument();
+    expect(rendered.getByTestId('radar-footer')).toBeInTheDocument();
+    expect(rendered.getByTestId('radar-bubble')).toBeInTheDocument();
+    expect(rendered.getAllByTestId('radar-entry')).toHaveLength(1);
   });
 });
diff --git a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx
index c1ce70eecc..f1b41373ca 100644
--- a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx
+++ b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx
@@ -50,7 +50,7 @@ const RadarPlot = (props: Props): JSX.Element => {
   } = props;
 
   return (
-    <g>
+    <g data-testid="radar-plot">
       <RadarLegend
         quadrants={quadrants}
         rings={rings}