mocha tests and update dependencies

.gitignore

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

.nvmrc

@@ -1 +1 @@
-0.12.7
+5.0

.ruby-version

@@ -1 +1 @@
-2.2.2
+2.2.3

.travis.yml

@@ -1,7 +1,7 @@
 language:
   - ruby
 rvm:
-  - 2.2.2
+  - 2.2.3
 install:
   - bundle install
   - npm install -g npm

Gemfile

@@ -1,5 +1,5 @@
 source "https://rubygems.org"
-ruby "2.2.2"
+ruby "2.2.3"
 
 #
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"

Gemfile.lock

@@ -43,7 +43,7 @@ GEM
     ast (2.1.0)
     astrolabe (1.3.1)
       parser (~> 2.2)
-    autoprefixer-rails (6.0.3)
+    autoprefixer-rails (6.1.0.1)
       execjs
       json
     awesome_print (1.6.1)
@@ -68,8 +68,7 @@ GEM
     bundler-audit (0.4.0)
       bundler (~> 1.2)
       thor (~> 0.18)
-    byebug (5.0.0)
-      columnize (= 0.9.0)
+    byebug (8.0.0)
     capybara (2.5.0)
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
@@ -92,7 +91,6 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.9.1.1)
-    columnize (0.9.0)
     connection_pool (2.2.0)
     coveralls (0.8.3)
       json (~> 1.8)
@@ -155,8 +153,8 @@ GEM
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
-    pry-byebug (3.2.0)
-      byebug (~> 5.0)
+    pry-byebug (3.3.0)
+      byebug (~> 8.0)
       pry (~> 0.10)
     pry-doc (0.8.0)
       pry (~> 0.9)
@@ -205,10 +203,10 @@ GEM
     raindrops (0.15.0)
     rake (10.4.2)
     rdoc (4.2.0)
-    react_on_rails (1.0.0.pre)
+    react_on_rails (1.0.1)
       connection_pool
       execjs (~> 2.5)
-      rails (>= 4.0)
+      rails (>= 3.2)
     ref (2.0.0)
     rest-client (1.8.0)
       http-cookie (>= 1.0.2, < 2.0)
@@ -307,7 +305,7 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.7.1)
-    unicorn (4.9.0)
+    unicorn (5.0.0)
       kgio (~> 2.6)
       rack
       raindrops (~> 0.7)

README.md

@@ -189,7 +189,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
@@ -266,11 +266,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`

app/views/pages/simple.html.erb

@@ -1,8 +1,11 @@
-<h2>Using React (no Flux framework) + Rails Backend (with react_on_rails gem)</h2>
+<h2>Using React (no Flux framework) + Rails Backend (with
+  <a href="https://github.com/shakacode/react_on_rails">react_on_rails gem</a>)</h2>
 <p>This example is much simpler than the one using React + Redux and is appropriate when:</p>
 <ul>
   <li>No or minimal MVC</li>
   <li>No async necessary</li>
+  <li>No server rendering</li>
+  <li>No pre-population of props</li>
 </ul>
 <hr/>
 

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

@@ -16,7 +16,7 @@ class Comment extends React.Component {
         <h2 className="comment-author">
           {author}
         </h2>
-        <span dangerouslySetInnerHTML={{__html: rawMarkup}}/>
+        <span dangerouslySetInnerHTML={{__html: rawMarkup}} className="comment-text"/>
       </div>
     );
   }