From 544551cbea68e3b8b1cea35361bab94d37b30aa3 Mon Sep 17 00:00:00 2001
From: Tristan Mayshark <tmayshark@virtru.com>
Date: Tue, 16 Feb 2021 16:51:53 -0500
Subject: [PATCH] [CCR-124] chore: add data-testids to various elements (#125)

* chore: add data-testids to various elements
---
 lib/components/ChartContainer/ChartContainer.js           | 2 +-
 lib/components/Paginator/Paginator.js                     | 8 ++++++--
 lib/components/Paginator/components/Arrow/Arrow.js        | 7 ++++++-
 lib/components/PieChart/components/ArcsLayer/ArcsLayer.js | 1 +
 lib/components/Table/Table.js                             | 5 ++++-
 lib/components/Table/components/TD/TD.js                  | 2 +-
 lib/components/Table/components/TH/TH.js                  | 8 +++++++-
 lib/components/Table/components/TR/TR.js                  | 1 +
 8 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/lib/components/ChartContainer/ChartContainer.js b/lib/components/ChartContainer/ChartContainer.js
index 2e746f3d..7c2187e4 100644
--- a/lib/components/ChartContainer/ChartContainer.js
+++ b/lib/components/ChartContainer/ChartContainer.js
@@ -33,7 +33,7 @@ function ChartContainer({
       <div className={styles.row}>
         <div className={styles.rowContent}>
           {onBackClick && (
-            <div className={styles.leftItem}>
+            <div className={styles.leftItem} data-testid="VDS-chart-back-button">
               <Button
                 disabled={loading}
                 onClick={onBackClick}
diff --git a/lib/components/Paginator/Paginator.js b/lib/components/Paginator/Paginator.js
index ca5e21c0..a445cbbe 100644
--- a/lib/components/Paginator/Paginator.js
+++ b/lib/components/Paginator/Paginator.js
@@ -6,8 +6,12 @@ import Arrow from './components/Arrow/Arrow';
 import styles from './Paginator.css';
 
 const Paginator = ({ start, end, total, min, children, onPrevClick, onNextClick, ...props }) => (
-  <div className={styles.paginator} {...props}>
-    {children && <div className={styles.children}>{children}</div>}
+  <div data-testid="VDS-paginator" className={styles.paginator} {...props}>
+    {children && (
+      <div data-testid="VDS-paginator-child" className={styles.children}>
+        {children}
+      </div>
+    )}
     <div className={styles.arrows}>
       <Arrow variant={Arrow.VARIANT.LEFT} disabled={start <= min} onClick={onPrevClick} />
       <Arrow variant={Arrow.VARIANT.RIGHT} disabled={end >= total} onClick={onNextClick} />
diff --git a/lib/components/Paginator/components/Arrow/Arrow.js b/lib/components/Paginator/components/Arrow/Arrow.js
index e0d7dc7d..c7441072 100644
--- a/lib/components/Paginator/components/Arrow/Arrow.js
+++ b/lib/components/Paginator/components/Arrow/Arrow.js
@@ -9,7 +9,12 @@ const VARIANT = {
 };
 
 const Arrow = ({ variant, ...props }) => (
-  <button type="button" className={styles[variant]} {...props} />
+  <button
+    type="button"
+    className={styles[variant]}
+    data-testid={`VDS-arrow-${variant}`}
+    {...props}
+  />
 );
 
 Arrow.propTypes = {
diff --git a/lib/components/PieChart/components/ArcsLayer/ArcsLayer.js b/lib/components/PieChart/components/ArcsLayer/ArcsLayer.js
index d04b97e8..8ab5e511 100644
--- a/lib/components/PieChart/components/ArcsLayer/ArcsLayer.js
+++ b/lib/components/PieChart/components/ArcsLayer/ArcsLayer.js
@@ -35,6 +35,7 @@ const ArcsLayer = ({ radius, innerRadius, dataWithArc, centerX, centerY }) => {
             className={styles.slice}
             d={currentArcGenerator(arcData)}
             fill={d.color}
+            data-testid={`VDS-chart-slice-${d.value}`}
             onClick={(event) => onItemClick(d.data, event)}
           />
         );
diff --git a/lib/components/Table/Table.js b/lib/components/Table/Table.js
index 99c18079..128787ca 100644
--- a/lib/components/Table/Table.js
+++ b/lib/components/Table/Table.js
@@ -5,7 +5,10 @@ import cn from 'classnames';
 import styles from './Table.css';
 
 const Table = ({ children, className, isScrollableBody }) => (
-  <table className={cn(className, styles.table, { [styles.scrollableBody]: isScrollableBody })}>
+  <table
+    className={cn(className, styles.table, { [styles.scrollableBody]: isScrollableBody })}
+    data-testid="VDS-table"
+  >
     {children}
   </table>
 );
diff --git a/lib/components/Table/components/TD/TD.js b/lib/components/Table/components/TD/TD.js
index 73fba2bc..322415ba 100644
--- a/lib/components/Table/components/TD/TD.js
+++ b/lib/components/Table/components/TD/TD.js
@@ -5,7 +5,7 @@ import cn from 'classnames';
 import styles from './TD.css';
 
 const TD = ({ children, className, ...rest }) => (
-  <td className={cn(className, styles.dataCell)} {...rest}>
+  <td className={cn(className, styles.dataCell)} {...rest} data-testid="VDS-table-cell">
     {children}
   </td>
 );
diff --git a/lib/components/Table/components/TH/TH.js b/lib/components/Table/components/TH/TH.js
index 103cd38e..c3f19174 100644
--- a/lib/components/Table/components/TH/TH.js
+++ b/lib/components/Table/components/TH/TH.js
@@ -14,7 +14,13 @@ const TH = ({ className, children, sorting, onClick, min, width, ...rest }) => {
   });
 
   return (
-    <th className={thClassNames} onClick={onClick} style={{ width }} {...rest}>
+    <th
+      className={thClassNames}
+      onClick={onClick}
+      style={{ width }}
+      {...rest}
+      data-testid="VDS-table-header"
+    >
       <div className={styles.innerContainer}>
         {children}
         {sorting && (
diff --git a/lib/components/Table/components/TR/TR.js b/lib/components/Table/components/TR/TR.js
index 4dc2b41c..8beed2dc 100644
--- a/lib/components/Table/components/TR/TR.js
+++ b/lib/components/Table/components/TR/TR.js
@@ -31,6 +31,7 @@ const TR = forwardRef(
 
     return (
       <tr
+        data-testid="VDS-table-row"
         ref={ref}
         className={classNames}
         tabIndex={onClick ? '0' : undefined}