[tiny][lint] Fixing some lint failures I noticed while publishing (#43)

* [tiny][lint] Fixing some lint failures I noticed while publishing

* fix formatting of backgroundSize

* Gulp@3 doesnt work with node@12, remove it since it was just used for tests, use enzyme for test rather than trying to touch the dom directly.

* remove gulp and godaddy-test-tools

Author: msluther

.gitignore

@@ -12,6 +12,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+.nyc_output/
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt

.npmignore

@@ -12,6 +12,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+.nyc_output/
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt

gulpfile.babel.js

@@ -25,9 +25,9 @@
     "prebuild": "npm run clean",
     "build": "babel src -d lib && lessc src/carousel.less lib/carousel.css && postcss --no-map --use autoprefixer -o lib/carousel.css lib/carousel.css",
     "eslint": "eslint-godaddy-react src/ test/",
-    "unit": "gulp unit-coverage",
-    "pretest": "npm run eslint",
-    "test": "npm run unit",
+    "unit": "mocha --require setup-env \"test/unit/**/*.tests.js\"",
+    "posttest": "npm run eslint",
+    "test": "nyc --reporter=text --reporter=json-summary npm run unit",
     "prepublish": "npm run test && npm run build",
     "storybook": "start-storybook"
   },
@@ -48,33 +48,36 @@
     "autoprefixer": "^7.2.6",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.6",
-    "babel-loader": "^7.1.5",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^7.0.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
     "chai": "^4.2.0",
     "css-loader": "^0.28.11",
-    "eslint": "^4.19.1",
-    "eslint-config-godaddy-react": "^2.2.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-config-godaddy-react": "^6.0.0",
     "eslint-plugin-json": "^1.4.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-mocha": "^4.12.1",
     "eslint-plugin-react": "^7.14.3",
-    "godaddy-test-tools": "^9.2.0",
-    "gulp": "3.9.0",
     "html-webpack-plugin": "^2.30.1",
-    "jsdom": "^11.12.0",
+    "jsdom": "^16.2.0",
     "less": "^2.7.3",
     "less-loader": "^4.1.0",
-    "mocha": "^5.2.0",
+    "mocha": "^7.0.1",
+    "nyc": "^15.0.0",
     "postcss-cli": "^5.0.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "rimraf": "^2.7.1",
-    "sinon": "^4.5.0",
-    "sinon-chai": "^2.14.0",
+    "rimraf": "^3.0.2",
+    "setup-env": "^1.2.3",
+    "sinon": "^9.0.0",
+    "sinon-chai": "^3.5.0",
     "style-loader": "^0.20.3",
     "webpack": "^3.12.0"
   }

package-lock.json

@@ -1,3 +1,7 @@
+/* eslint
+  jsx-a11y/mouse-events-have-key-events: 0,
+  jsx-a11y/no-noninteractive-element-interactions: 0,
+  jsx-a11y/click-events-have-key-events: 0 */
 import React, { Component, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import nth from 'lodash.nth';
@@ -211,6 +215,7 @@ export default class Carousel extends Component {
     const startIndex = currentSlide - Math.floor(imagesToPrefetch / 2);
     const endIndex = startIndex + imagesToPrefetch;
     const pendingImages = [];
+
     const currentImage = slides[currentSlide].props.src;
 
     for (let index = startIndex; index < endIndex; index++) {
@@ -383,8 +388,8 @@ export default class Carousel extends Component {
 
     if (arrows) {
       arr = arr.concat([
-        { component: Arrow, props: { direction: 'left' }},
-        { component: Arrow, props: { direction: 'right' }}
+        { component: Arrow, props: { direction: 'left' } },
+        { component: Arrow, props: { direction: 'right' } }
       ]);
     }
 

package.json

@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import PropTypes from 'prop-types';
 import Carousel from '../index';
 
 require('../carousel.less');
@@ -19,7 +20,7 @@ const IMAGES = [
   'http://picsum.photos/325/300'
 ];
 
-const imgElements = IMAGES.map((image, index) => <img src={ image } key={ index } />);
+const imgElements = IMAGES.map((image, index) => <img src={ image } key={ index } alt='A sample' />);
 
 const CustomDots = ({ numSlides, selectedIndex, goToSlide, title }) => {
   const dots = [];
@@ -52,6 +53,13 @@ const CustomDots = ({ numSlides, selectedIndex, goToSlide, title }) => {
   );
 };
 
+CustomDots.propTypes = {
+  numSlides: PropTypes.number.isRequired,
+  selectedIndex: PropTypes.number,
+  goToSlide: PropTypes.func.isRequired,
+  title: PropTypes.node
+};
+
 export const infiniteWithCellPadding = () =>
   <Carousel width='450px' cellPadding={ 5 }>
     { imgElements }
@@ -75,8 +83,8 @@ export const fadeTransition = () =>
 
 export const infiniteWithOnly2Slides = () =>
   <Carousel width='450px' arrows={ false } slideHeight='300px'>
-    <img src='http://picsum.photos/325/300'/>
-    <img src='http://picsum.photos/350/300'/>
+    <img src='http://picsum.photos/325/300' alt='A sample' />
+    <img src='http://picsum.photos/350/300' alt='A sample' />
   </Carousel>;
 
 export const infiniteWithOnly1Slide = () =>
@@ -86,7 +94,7 @@ export const infiniteWithOnly1Slide = () =>
     arrows={ false }
     dots={ false }
   >
-    <img src='http://picsum.photos/325/300'/>
+    <img src='http://picsum.photos/325/300' alt='A sample' />
   </Carousel>;
 
 export const autoplayWithBackgroundImages = () =>
@@ -97,10 +105,30 @@ export const autoplayWithBackgroundImages = () =>
     arrows={ false }
     autoplay={ true }
   >
-    <div style={{ backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/600/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/650/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/675/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/700/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
   </Carousel>;
 
 export const backgroundImagesWithFade = () =>
@@ -113,13 +141,48 @@ export const backgroundImagesWithFade = () =>
     autoplay={ true }
     arrows={ true }
   >
-    <div style={{ backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/750/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/725/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
-    <div style={{ backgroundImage: 'url(http://picsum.photos/625/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/600/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/650/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/675/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/700/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/750/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/725/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
+    <div style={{
+      backgroundImage: 'url(http://picsum.photos/625/300)',
+      backgroundSize: 'cover',
+      height: '100%',
+      width: '100%'
+    }}/>
   </Carousel>;
 
 export const customDotsComponent = () =>
@@ -157,7 +220,7 @@ export const addImages = () => {
         controls={ [{ component: CustomDots, props: { title: 'My Slides' }, position: 'top' }] }
       >
         {
-          images.map((image, index) => <img key={ index } src={ image }/>)
+          images.map((image, index) => <img key={ index } src={ image } alt='A sample' />)
         }
       </Carousel>
       <button onClick={ addImage }>Add Image</button>