.

koechkevin · May 25, 2019 · 7aff02c · 7aff02c
1 parent f686f95
commit 7aff02c
Show file tree

Hide file tree

Showing 12 changed files with 748 additions and 63 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,137 @@
+{
+  "extends": [
+    "airbnb",
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:cypress/recommended"
+  ],
+  "plugins": [
+    "react",
+    "cypress"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
+  "rules": {
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "new-cap": 0,
+    "no-console": 1,
+    "no-debugger": 1,
+    "no-param-reassign": 0,
+    "no-var": 1,
+    "semi": [
+      1,
+      "always"
+    ],
+    "no-trailing-spaces": 0,
+    "eol-last": 2,
+    "no-unused-vars": 0,
+    "no-underscore-dangle": 0,
+    "no-alert": 1,
+    "react/jsx-indent": [
+      "error",
+      2
+    ],
+    "indent": [
+      "error",
+      2
+    ],
+    "no-lone-blocks": 0,
+    "jsx-quotes": 1,
+    "react/display-name": [
+      1,
+      {
+        "ignoreTranspilerName": false
+      }
+    ],
+    "react/forbid-prop-types": [
+      1,
+      {
+        "forbid": [
+          "any"
+        ]
+      }
+    ],
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
+    "react/jsx-indent-props": 1,
+    "react/jsx-key": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-no-bind": 1,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-literals": 0,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/jsx-sort-prop-types": 0,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 0,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
+    "react/no-direct-mutation-state": 1,
+    "react/no-multi-comp": 1,
+    "react/no-set-state": 0,
+    "react/no-unknown-property": 1,
+    "react/prefer-es6-class": 1,
+    "react/prefer-stateless-function": 0,
+    "react/prop-types": 1,
+    "react/react-in-jsx-scope": 1,
+    "react/require-extension": 0,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/wrap-multilines": 0,
+    "jsx-a11y/label-has-for": [
+      2,
+      {
+        "components": [
+          "Label"
+        ],
+        "required": {
+          "some": [
+            "nesting",
+            "id"
+          ]
+        },
+        "allowChildren": false
+      }
+    ]
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "jest": true,
+    "jasmine": true,
+    "jquery": true,
+    "mocha": true,
+    "cypress/globals": true
+  },
+  "globals": {
+    "window": true,
+    "shallow": true,
+    "mount": true,
+    "render": true,
+    "google": true
+  }
+}
diff --git a/jest.config.js b/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
   clearMocks: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ['src/**/*.{js,jsx,mjs}', "!src/index.js"],
+  collectCoverageFrom: ['src/**/*.{js,jsx,mjs}', '!src/index.js'],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
@@ -33,8 +33,8 @@ module.exports = {
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
   // scss tests
   moduleNameMapper: {
-    "^.+\\.(css|less|scss)$": "babel-jest",
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+    '^.+\\.(css|less|scss)$': 'babel-jest',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
   },
 
   // Indicates whether each individual test should be reported during the run

diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "start:dev": "webpack -d && webpack-dev-server --open --hot",
     "build": "webpack -p",
     "start": "node server.js",
-    "test": "jest --coverage --colors"
+    "lint": "./node_modules/.bin/eslint",
+    "test": "npm run lint src && jest --coverage --colors"
   },
   "jest": {
     "transform": {
@@ -21,6 +22,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "axios": "^0.18.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "babel-polyfill": "^6.26.0",
@@ -29,6 +31,12 @@
     "dotenv": "^8.0.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.13.1",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-cypress": "^2.2.1",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.13.0",
     "express": "^4.17.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "history": "^4.9.0",

diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react';
 import {Provider} from 'react-redux';
 import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
-import Routes from "../routes/index";
-import '../app.scss'
+import Routes from '../routes/index';
+import '../app.scss';
 import store from '../redux/store';
 
 const history = createBrowserHistory();
@@ -14,6 +14,4 @@ const App = () =>  (
     </Router>
   </Provider>
 );
-
-
 export default App;
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import axios from 'axios';
-import { connect } from "react-redux";
+import { connect } from 'react-redux';
 
 
 export class Nav extends React.Component{
@@ -17,14 +17,14 @@ export class Nav extends React.Component{
 
    render(){
      const {r} = this.state;
-  return(
-    <div className="nav">
-      <button onClick={this.handleClick}>click me</button>
-      {r&&r.status}
-    </div>
-  );
+     return(
+       <div className="nav">
+         <button onClick={this.handleClick}>click me</button>
+         {r&&r.status}
+       </div>
+     );
+   }
 }
- }
 
 export class API {
   static async fetchAll(){

diff --git a/src/components/__tests__/index.test.js b/src/components/__tests__/index.test.js
@@ -1,28 +1,30 @@
 import enzyme from 'enzyme';
-import configureStore from 'redux-mock-store'
-import App from "../App";
-import React from "react";
-import NavBar, {API, Nav} from "../NavBar";
-import {Provider} from "react-redux";
-const { mount } = enzyme;
+import configureStore from 'redux-mock-store';
+import React from 'react';
+import {Provider} from 'react-redux';
 import moxios from 'moxios';
-import {add} from "../../redux/actions";
+import NavBar, {API, Nav} from '../NavBar';
+import App from '../App';
+import action from '../../redux/actions';
+
+const {add} = action;
+const { mount } = enzyme;
 
 describe('test', () => {
   const initialState = {};
   const mockStore = configureStore();
   const store = mockStore(initialState);
   it('passes', () => {
     const wrapper = mount(<App />);
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('renders nav bar', () => {
     const wrapper = mount(
       <Provider store={store}>
-      <NavBar />
+        <NavBar />
       </Provider>
-      );
+    );
   });
 
   it('passes', () => {
@@ -31,11 +33,11 @@ describe('test', () => {
     );
     const button = wrapper.find('button');
     expect(button.length).toEqual(1);
-    button.simulate('click')
+    button.simulate('click');
   });
 
   it('tests the API', async () => {
-    moxios.stubRequest(`https://jsonplaceholder.typicode.com/todos/1`, {
+    moxios.stubRequest('https://jsonplaceholder.typicode.com/todos/1', {
       status: 200,
       response: {
         message: 'Success',

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./components/App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
 
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js
@@ -1,5 +1,6 @@
-export const add = (a,b) => {
+export default {add:(a,b) => {
   if(a>b) return a;
   if(a<b)return b;
   return a+b;
+}
 };
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
@@ -1,5 +1,5 @@
-import { combineReducers } from "redux";
-import {TYPE} from "../constants";
+import { combineReducers } from 'redux';
+import {TYPE} from '../constants';
 
 const initialState = {};
 const reducer = (state=initialState, action) => {

diff --git a/src/routes/index.jsx b/src/routes/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import routes from "./routes";
+import routes from './routes';
 
 const Routes = () => (
   <Switch>

diff --git a/src/routes/routes.js b/src/routes/routes.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react';
 
 export default [{
   path: '/',
   component: ()=>(<div>poli</div>)
 },{
-  path: "/my-path",
+  path: '/my-path',
   component: ()=>(<div>path</div>)
 }];