[CCR-124] chore: add data-testids to various elements (#125)

* chore: add data-testids to various elements
virtru · Feb 16, 2021 · 544551c · 544551c
1 parent 0452ac4
commit 544551c
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -31,6 +31,7 @@ const TR = forwardRef(
 
     return (
       <tr
+        data-testid="VDS-table-row"
         ref={ref}
         className={classNames}
         tabIndex={onClick ? '0' : undefined}