Eslint (#126)

* adding eslint to webpack and fixing errors

* updating screenshot and tests to reflect dom changes

package-lock.json

@@ -5084,6 +5084,19 @@
         "semver": "^5.3.0"
       }
     },
+    "eslint-loader": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.1.2.tgz",
+      "integrity": "sha512-rA9XiXEOilLYPOIInvVH5S/hYfyTPyxag6DZhoQOduM+3TkghAEQ3VcFO8VnX4J4qg/UIBzp72aOf/xvYmpmsg==",
+      "dev": true,
+      "requires": {
+        "loader-fs-cache": "^1.0.0",
+        "loader-utils": "^1.0.2",
+        "object-assign": "^4.0.1",
+        "object-hash": "^1.1.4",
+        "rimraf": "^2.6.1"
+      }
+    },
     "eslint-module-utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.4.0.tgz",
@@ -9550,6 +9563,57 @@
         "strip-bom": "^2.0.0"
       }
     },
+    "loader-fs-cache": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz",
+      "integrity": "sha512-70IzT/0/L+M20jUlEqZhZyArTU6VKLRTYRDAYN26g4jfzpJqjipLL3/hgYpySqI9PwsVRHHFja0LfEmsx9X2Cw==",
+      "dev": true,
+      "requires": {
+        "find-cache-dir": "^0.1.1",
+        "mkdirp": "0.5.1"
+      },
+      "dependencies": {
+        "find-cache-dir": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-0.1.1.tgz",
+          "integrity": "sha1-yN765XyKUqinhPnjHFfHQumToLk=",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "mkdirp": "^0.5.1",
+            "pkg-dir": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "dev": true,
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "dev": true,
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pkg-dir": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
+          "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
+          "dev": true,
+          "requires": {
+            "find-up": "^1.0.0"
+          }
+        }
+      }
+    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -10506,6 +10570,12 @@
         }
       }
     },
+    "object-hash": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz",
+      "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",

package.json

@@ -87,6 +87,7 @@
     "eslint": "5.16.0",
     "eslint-config-airbnb": "17.1.0",
     "eslint-import-resolver-webpack": "0.11.1",
+    "eslint-loader": "^2.1.2",
     "eslint-plugin-import": "2.17.3",
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-react": "7.13.0",

src/components/__snapshots__/widget.test.js.snap

@@ -31,12 +31,14 @@ exports[`<Widget /> open/close 1`] = `
           >
             Header
           </div>
-          <a
+          <button
             className="widget-header-icon"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            type="button"
           >
             X
-          </a>
+          </button>
         </div>
         <div
           className="widget-body"
@@ -50,12 +52,14 @@ exports[`<Widget /> open/close 1`] = `
         </div>
       </div>
     </Transition>
-    <a
+    <button
       className="dock"
       onClick={[Function]}
+      onKeyPress={[Function]}
+      type="button"
     >
       ^ OPEN ^
-    </a>
+    </button>
   </div>
 </Widget>
 `;
@@ -91,12 +95,14 @@ exports[`<Widget /> open/close 2`] = `
           >
             Header
           </div>
-          <a
+          <button
             className="widget-header-icon"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            type="button"
           >
             X
-          </a>
+          </button>
         </div>
         <div
           className="widget-body"
@@ -145,12 +151,14 @@ exports[`<Widget /> open/close 3`] = `
           >
             Header
           </div>
-          <a
+          <button
             className="widget-header-icon"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            type="button"
           >
             X
-          </a>
+          </button>
         </div>
         <div
           className="widget-body"
@@ -164,12 +172,14 @@ exports[`<Widget /> open/close 3`] = `
         </div>
       </div>
     </Transition>
-    <a
+    <button
       className="dock"
       onClick={[Function]}
+      onKeyPress={[Function]}
+      type="button"
     >
       ^ OPEN ^
-    </a>
+    </button>
   </div>
 </Widget>
 `;

src/components/widget.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import './widget.scss';
 
@@ -29,31 +28,43 @@ class Widget extends Component {
   }
 
   renderBody = () => {
-    if (this.state.showDock) {
+    const { showDock } = this.state;
+
+    if (!showDock) return '';
+
     return (
-        <a className="dock" onClick={this.handleToggleOpen}>
+      <button
+        type="button"
+        className="dock"
+        onClick={this.handleToggleOpen}
+        onKeyPress={this.handleToggleOpen}
+      >
         ^ OPEN ^
-        </a>
+      </button>
     );
   }
-    return '';
-  }
 
   render() {
+    const { opened } = this.state;
     const body = this.renderBody();
 
     return (
       <div className="docked-widget">
-        <Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
+        <Transition in={opened} timeout={250} onExited={this.handleWidgetExit}>
           {status => (
             <div className={`widget widget-${status}`}>
               <div className="widget-header">
                 <div className="widget-header-title">
                   Header
                 </div>
-                <a className="widget-header-icon" onClick={this.handleToggleOpen}>
+                <button
+                  type="button"
+                  className="widget-header-icon"
+                  onClick={this.handleToggleOpen}
+                  onKeyPress={this.handleToggleOpen}
+                >
                   X
-                </a>
+                </button>
               </div>
               <div className="widget-body">
                 Body
@@ -70,6 +81,4 @@ class Widget extends Component {
   }
 }
 
-Widget.propTypes = {};
-
 export default Widget;

src/components/widget.test.js

@@ -9,7 +9,7 @@ describe('<Widget />', () => {
     expect(widgetDom).toMatchSnapshot();
 
     {
-      const dockAnchorEl = widgetDom.find('a.dock');
+      const dockAnchorEl = widgetDom.find('button.dock');
       expect(dockAnchorEl).toHaveLength(1);
       // open widget
       dockAnchorEl.simulate('click');
@@ -20,14 +20,14 @@ describe('<Widget />', () => {
     // dock does not exist anymore
     expect(widgetDom.find('a.dock')).toHaveLength(0);
 
-    const closeAnchorEl = await waitForSelection(widgetDom, 'a.widget-header-icon');
+    const closeAnchorEl = await waitForSelection(widgetDom, 'button.widget-header-icon');
 
     expect(closeAnchorEl).toHaveLength(1);
     // close widget
     closeAnchorEl.simulate('click');
 
     {
-      const dockAnchorEl = await waitForSelection(widgetDom, 'a.dock');
+      const dockAnchorEl = await waitForSelection(widgetDom, 'button.dock');
      expect(dockAnchorEl).toHaveLength(1);
     }
 

webpack.config.js

@@ -36,6 +36,11 @@ const defaultConfig = {
         exclude: /node_modules/,
         use: ['babel-loader'],
       },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: ['eslint-loader']
+      },      
       {
         test: /\.(scss|css)$/,
         use: [