refactor(tech-radar): update test + RadarLegend refacto

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();
   });
 });

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}>

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();
   });
 });

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}

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})`);
   });
 });

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>
   );

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();
   });
 });

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"
     />,
   ];
 

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);
   });
 });

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>
   );
 };

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);
   });
 });

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}