Fix unit tests.

Author: jsanthosh-godaddy

.babelrc

@@ -9,6 +9,7 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-transform-runtime"
+    "@babel/plugin-transform-runtime",
+    "inline-react-svg"
   ]
 }

package-lock.json

@@ -50,6 +50,7 @@
     "autoprefixer": "^10.0.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.0",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "chai": "^4.2.0",
     "css-loader": "^0.28.11",
     "enzyme": "^3.11.0",

package.json

@@ -29,7 +29,7 @@ export default class Arrow extends Component {
       upArrowImage: PropTypes.node,
       downArrowImage: PropTypes.node,
       leftArrowImage: PropTypes.node,
-      rightArrowImage: PropTypes.node,
+      rightArrowImage: PropTypes.node
     };
   }
 

src/controls/arrow.js

@@ -84,7 +84,7 @@ export default class Carousel extends Component {
       upArrowImage: PropTypes.node,
       downArrowImage: PropTypes.node,
       leftArrowImage: PropTypes.node,
-      rightArrowImage: PropTypes.node,
+      rightArrowImage: PropTypes.node
     };
   }
 
@@ -417,8 +417,8 @@ export default class Carousel extends Component {
 
     if (arrows) {
       arr = arr.concat([
-        { component: Arrow, props: { ...isVertical ? {direction: 'top', upArrowImage} : {direction: 'left', leftArrowImage} } },
-        { component: Arrow, props: { ...isVertical ? {direction: 'bottom', downArrowImage} : {direction: 'right', rightArrowImage} } }
+        { component: Arrow, props: { ...isVertical ? { direction: 'top', upArrowImage } : { direction: 'left', leftArrowImage } } },
+        { component: Arrow, props: { ...isVertical ? { direction: 'bottom', downArrowImage } : { direction: 'right', rightArrowImage } } }
       ]);
     }
 
@@ -468,14 +468,13 @@ export default class Carousel extends Component {
     }
 
     const controls = this.getControls();
-    let arrowOffset = 0, visibleSlideCount = 0;
-    if(this._viewport && this._track){
-      const slides = this._track.childNodes;
-      arrowOffset += this._viewport.offsetHeight /2;
+    let arrowOffset = 0;
+    if (this._viewport && this._track) {
+      arrowOffset += this._viewport.offsetHeight / 2;
       arrowOffset -= this.props.verticalArrowPadding;
     }
 
-    const arrowStyle = {...isVertical && { transform: `translateY(${arrowOffset}px)` }};
+    const arrowStyle = { ...isVertical && { transform: `translateY(${ arrowOffset }px)` } };
 
     return (
       <div className={ classes } style={ containerStyle } ref={ c => { this._containerRef = c; } }>
@@ -498,7 +497,7 @@ export default class Carousel extends Component {
           <div className='carousel-viewport' ref={ v => { this._viewport = v; } } style={ viewportStyle }>
             <ul
               className='carousel-track'
-              style={ {...trackStyle, ...isVertical && { display: 'flex', flexDirection: 'column' } } }
+              style={{ ...trackStyle, ...isVertical && { display: 'flex', flexDirection: 'column' } }}
               ref={ t => { this._track = t; } }
               onTransitionEnd={ this.slideTransitionEnd }
               onMouseDown={ this.onMouseDown }
@@ -510,7 +509,7 @@ export default class Carousel extends Component {
               { this.renderSlides() }
             </ul>
           </div>
-          <div style={{...arrowStyle}}>
+          <div style={{ ...arrowStyle }}>
           {
             controls.filter(Control => {
               return Control.position !== 'top';

src/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable id-length */
 import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import Carousel from '../index';
@@ -63,7 +65,7 @@ CustomDots.propTypes = {
   title: PropTypes.node
 };
 
-const testButtons = ['test1', 'test2', 'test3', 'test4'].map((item) => <button style={{fontSize: '20px'}}>{item}</button>);
+const testButtons = ['test1', 'test2', 'test3', 'test4'].map((item) => <button style={{ fontSize: '20px' }}>{item}</button>);
 
 export const verticalInfiniteWithCellPadding = () =>
     <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ true } arrows={ true }
@@ -79,7 +81,7 @@ export const verticalNonInfiniteWithCellPadding = () =>
 
 export const verticalNonInfiniteWithCellPaddingWithCustomArrows = () =>
     <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ true }
-              dots={ false } isVertical={ true } upArrowImage={<UpImage/>} downArrowImage={<DownImage/>} >
+              dots={ false } isVertical={ true } upArrowImage={ <UpImage/> } downArrowImage={ <DownImage/> } >
       { imgElements }
     </Carousel>;