Add eslint, update babel config, fix issue with Object.assign and add…

… first test samples with karma

.babelrc

@@ -1,5 +1,8 @@
 {
   "presets": ["react", "es2015" , "stage-0"],
+  "plugins": [
+    "babel-plugin-rewire"
+  ],
   "env": {
     "start": {
       "presets": ["react-hmre"]

.eslintrc

@@ -0,0 +1,43 @@
+{
+  // I want to use babel-eslint for parsing!
+  "parser": "babel-eslint",
+  "ecmaFeatures": {
+    "jsx": true,
+    "classes": true,
+    "modules": true,
+  },
+  "env": {
+    // I write for browser
+    "browser": true,
+    // in CommonJS
+    "node": true
+  },
+  "globals": {
+    "process": false,
+    "require": false,
+    "define": false,
+    "console": false,
+  },
+  // To give you an idea how to override rule options:
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "eol-last": [0],
+    "no-mixed-requires": [0],
+    "no-underscore-dangle": [0],
+    "no-bitwise": 2,
+    "camelcase": 2,
+    "eqeqeq": 2,
+    "wrap-iife": [2, "inside"],
+    "no-use-before-define": [2, "nofunc"],
+    "no-caller": 2,
+    "no-undef": 2, 
+    "new-cap": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}

README.md

@@ -29,7 +29,7 @@ You will need to install [RethinkDB](http://www.rethinkdb.com). You can find ins
  - Run `npm run db-setup` to set up DB
  - Run `npm run build` to build application files and watch for changes
  - Run `npm start`
- - Go to http://localhost:3000 in two seperate tabs - see changes propagate in real time.
+ - Go to http://localhost:3001 in two seperate tabs - see changes propagate in real time (Hot Module Replacement works too)
 
 ### Tech Used
 

client/app.js

@@ -58,4 +58,4 @@ ReactDOM.render(
 setupRealtime(store, actions);
 
 // lets mutate state and set UserID as key from local storage
-store.dispatch(actions.setUserId(getOrSetUserId()));
+store.dispatch(actions.setUserId(getOrSetUserId()));

karma.conf.js

@@ -0,0 +1,33 @@
+var webpackConfig = require('./webpack.config.js');
+
+module.exports = function (config) {
+  config.set({
+    browsers: [ 'PhantomJS' ],
+    captureTimeout: 60000,
+    browserNoActivityTimeout: 60000, // We need to accept that Webpack may take a while to build!
+    singleRun: true,
+    colors: true,
+    frameworks: [ 'mocha', 'sinon', 'chai' ], // Mocha is our testing framework of choice
+    files: [
+      'tests.webpack.js'
+    ],
+    preprocessors: {
+      'tests.webpack.js': [ 'webpack' ] // Preprocess with webpack and our sourcemap loader
+    },
+    reporters: [ 'mocha' ],
+    webpack: { // Simplified Webpack configuration
+      module: {
+        loaders: webpackConfig.module.loaders,
+        noParse: [
+            /node_modules\/sinon/,
+        ]
+      },
+      node: {
+        fs: 'empty'
+      }
+    },
+    webpackServer: {
+      noInfo: true // We don't want webpack output
+    }
+  });
+};

package.json

@@ -7,7 +7,8 @@
     "start": "node server.babel.js & node server.webpack.js",
     "db-setup": "node dbSetup.babel.js",
     "build": "webpack --watch",
-    "build-prod": "webpack"
+    "test": "./node_modules/karma/bin/karma start",
+    "lint": "eslint client server universal test server.js dbSetup.js"
   },
   "keywords": [
     "react",
@@ -43,19 +44,38 @@
   "devDependencies": {
     "babel": "6.3.26",
     "babel-core": "6.4.0",
+    "babel-eslint": "5.0.0-beta6",
     "babel-loader": "6.2.1",
+    "babel-plugin-rewire": "^1.0.0-beta-5",
     "babel-polyfill": "^6.3.14",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.0.1",
     "babel-preset-stage-0": "^6.3.13",
     "babel-runtime": "^6.3.19",
-    "css-loader": "0.23.1",
-    "node-libs-browser": "0.5.3",
+    "babel-template": "^6.3.13",
+    "chai": "^3.4.1",
+    "css-loader": "0.17.0",
+    "eslint": "^1.10.3",
+    "eslint-plugin-react": "^3.15.0",
+    "karma": "^0.13.16",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-mocha": "^0.2.1",
+    "karma-mocha-reporter": "^1.1.5",
+    "karma-phantomjs-launcher": "^0.2.2",
+    "karma-sinon": "^1.0.4",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.3.4",
+    "mocha-loader": "^0.7.1",
+    "nock": "^3.6.0",
+    "node-libs-browser": "0.5.2",
+    "phantomjs": "^1.9.19",
     "raw-loader": "0.5.1",
     "react-hot-loader": "1.3.0",
     "react-transform-hmr": "^1.0.1",
     "redux-devtools": "2.1.5",
+    "redux-mock-store": "0.0.6",
     "style-loader": "0.13.0",
     "webpack": "1.12.11",
     "webpack-dev-server": "1.14.1"

server.babel.js

@@ -1,2 +1,3 @@
 require('babel-core/register');
+require('babel-polyfill');
 require('./server.js'); 

server.js

@@ -1,19 +1,19 @@
 import path from 'path';
 import bodyParser from 'body-parser';
-import Express from 'express';
+import express from 'express';
 import http from 'http';
-import SocketIO from 'socket.io';
+import socketIO from 'socket.io';
 import config from 'config';
 
 import * as api from './server/api/http';
 import * as eventService from './server/api/service/event';
 import * as uni from './server/app.js'
 
-const app = Express();
-const httpServer = http.Server(app);
+const app = express();
+const httpServer = http.createServer(app);
 const port = config.get('express.port') || 3000;
 
-var io = SocketIO(httpServer);
+var io = socketIO(httpServer);
 
 app.set('views', path.join(__dirname, 'server', 'views'));
 app.set('view engine', 'ejs')

server.webpack.js

@@ -8,13 +8,14 @@ var devServerPort = 3001;
 
 new WebpackDevServer(webpack(config), {
   contentBase: 'dist/',
-  publicPath: config.output.publicPath,
-  hot: true,
+  headers: { 'Access-Control-Allow-Origin': '*' },
   historyApiFallback: true,
+  hot: true,
+  noInfo: true,
+  publicPath: config.output.publicPath,
   proxy: {
     '*': 'http://' + host + ':' + appPort
-  },
-  noInfo: true,
+  }
 }).listen(devServerPort, host, function (err) {
   if (err) {
     console.log(err);

server/api/service/event.js

@@ -27,7 +27,7 @@ export function getEvents() {
   .then(conn => {
     return r
     .table('pulses')
-    .orderBy('id').run(conn)
+    .orderBy(r.desc('created')).run(conn)
     .then(cursor => cursor.toArray());
   });
 }

test/actions.test.js

@@ -0,0 +1,70 @@
+/* global describe */
+/* global it */
+/* global afterEach */
+
+import sinon from 'sinon';
+import chai from 'chai';
+
+var expect = chai.expect;
+
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import nock from 'nock';
+
+import * as actions from '../universal/actions/PulseActions.js';
+import * as types from '../universal/constants/ActionTypes';
+
+describe('PulseActions', () => {
+  afterEach(function() {
+    actions.__ResetDependency__('request')
+  })
+
+  /**
+   * Example of writing a test on a syncronous action creator
+   */
+  describe('setUserId', () => {
+    it('should return action with type SET_USER_ID and userId equal to 200', () => {
+      let action = actions.setUserId(200);
+      expect(action.type).to.equal(types.SET_USER_ID);
+      expect(action.userId).to.equal(200);
+    });
+
+    it('should return action with type SET_USER_ID and userId equal to 6700102', () => {
+      let action = actions.setUserId(6700102);
+      expect(action.type).to.equal(types.SET_USER_ID);
+      expect(action.userId).to.equal(6700102);
+    });
+  });
+
+  /**
+   * Example of writing a test on an asyncronous action creator
+   */
+  // describe('loadEvents', () => {
+  //   const mockStore = configureStore([thunk]);
+  //   it('should run', (done) => {
+  //     let requestMock = {
+  //       get: () => {
+  //         set: () => {
+  //           end: (x) => {
+  //             x(null, {
+  //               body: [ { name: 'Awesome', value: 54 } ]
+  //             });
+  //           }
+  //         }
+  //       }
+  //     };
+
+  //     actions.__Rewire__('request', requestMock);
+
+  //     let expectedActions = [
+  //       { type: 'LOAD_EVENTS_REQUEST' },
+  //       { type: 'LOAD_EVENTS_SUCCESS', events: [ { name: 'Awesome', value: 54 } ] }
+  //     ];
+
+  //     let initialState = {pulseApp: { events: [], userId: 'baseUser'} };
+  //     let store = mockStore(initialState, expectedActions, done);
+
+  //     store.dispatch(actions.loadEvents());
+  //   });
+  // });
+});

tests.webpack.js

@@ -0,0 +1,2 @@
+var context = require.context('./test', true, /.js$/); // Load files in /test with filename matching * .test.js
+context.keys().forEach(context);

universal/actions/PulseActions.js

@@ -11,17 +11,15 @@ export function setUserId(userId) {
   }
 }
 
-export function loadEvents(event) {
+export function loadEvents() {
   return dispatch => {
-    dispatch(LoadEventsRequest(event));
-
+    dispatch(loadEventsRequest());
     return request
       .get(eventsUrl)
-      .send(event)
       .set('Accept', 'application/json')
       .end((err, res) => {
         if (err) {
-          dispatch(loadEventsFailure(err, event));
+          dispatch(loadEventsFailure(err));
         } else {
           dispatch(loadEventsSuccess(res.body));
         }
@@ -50,6 +48,7 @@ export function loadEventsFailure(error) {
 }
 
 export function addEvent(event) {
+  console.log('Add event', event);
   return dispatch => {
     dispatch(addEventRequest(event));
 

universal/routes.js

@@ -3,6 +3,7 @@ import { Route, IndexRoute } from 'react-router';
 
 import PulseApp from './containers/PulseApp';
 import MyEvents from './containers/MyEvents';
+
 import OtherEvents from './containers/OtherEvents';
 
 export default (

webpack.config.js

@@ -23,10 +23,6 @@ module.exports = {
       loaders: ['react-hot', 'babel'],
       exclude: /node_modules/,
       include: __dirname
-    }, {
-      test: /\.js$/,
-      loaders: ['babel'],
-      include: path.join(__dirname, '..', '..', 'src')
     }, {
       test: /\.css?$/,
       loaders: ['style', 'raw'],