chore: add js test with mocha and chai

.gitignore

@@ -17,7 +17,7 @@
 /public/assets
 .env
 node_modules
-npm-debug.log
+npm-debug.log*
 /coverage
 
 # Ignore bundle dependencies

README.md

@@ -183,7 +183,7 @@ module.exports = {
   // And update this
   styleLoader: 'style-loader!css-loader!sass-loader?imagePath=/assets/images&includePaths[]=' + bourbonPaths,
 ```
-- `@import 'bourbon';` Import bourbon from your [scss file](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/assets/stylesheets/_app-styling-post-bootstrap-loading.scss) 
+- `@import 'bourbon';` Import bourbon from your [scss file](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/assets/stylesheets/_app-styling-post-bootstrap-loading.scss)
 
 # Notes on Rails assets
 ## Rails Asset Pipeline Magic
@@ -260,11 +260,31 @@ git push heroku master
 ```
 
 # Running Tests
-*Default rake task runs tests and linting*
+*Default rake task runs feature specs, mocha tests and linting*
 
-We have feature tests in /spec/features
+We have;
+
+* feature tests in /spec/features
+* component unit tests in /client/test/
+* javascript linting
+
+From the root of the project, you can run all specs+tests+linter with
+
+      npm run test
+
+Run the feature specs individually with `rspec`.
+
+Run the React unit tests (all .js and .jsx files) from the `client` dir with;
+
+      cd client
+      npm run test --silent
+
+In lieu of having `mocha --watch` working properly (pull request welcome!), you can have your js tests continually running with `watch`
+
+      npm install -g watch
+      cd client
+      watch 'npm run test --silent' test/ app/
 
-Run the tests with `rspec`.
 
 ## CI configuration
 Add those lines to your CI scripts after `bundle install`

client/.eslintrc

@@ -9,6 +9,7 @@ plugins:
 env:
   browser: true
   node: true
+  mocha: true
 
 rules:
   indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]

client/app/components/Comment.jsx

@@ -17,7 +17,7 @@ const Comment = React.createClass({
         <h2 className="comment-author">
           {author}
         </h2>
-        <span dangerouslySetInnerHTML={{__html: rawMarkup}}/>
+        <span dangerouslySetInnerHTML={{__html: rawMarkup}} className="comment-text"/>
       </div>
     );
   },