chore: add js test with mocha and chai

This commit adds a JS unit testing framework with mocha and chai.
Sample unit tests are provided for Comment and CommentList.

Author: glennr

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 with ESLint
+
+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>
     );
   },

client/package.json

@@ -24,7 +24,8 @@
   },
   "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'",
+    "test:debug": "npm run test -- --debug-brk",
     "start": "node server.js",
     "build:client": "NODE_ENV=production webpack --config webpack.client.rails.config.js",
     "build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
@@ -63,6 +64,8 @@
     "babel-plugin-react-transform": "^1.1.1",
     "bootstrap-sass": "^3.3.5",
     "bootstrap-sass-loader": "^1.0.9",
+    "chai": "^3.4.0",
+    "chai-immutable": "^1.4.0",
     "css-loader": "^0.19.0",
     "eslint": "^1.6.0",
     "eslint-config-airbnb": "0.1.0",
@@ -72,7 +75,9 @@
     "file-loader": "^0.8.4",
     "jade": "^1.11.0",
     "jscs": "^2.3.0",
+    "mocha": "^2.3.3",
     "node-sass": "^3.3.3",
+    "react-addons-test-utils": "^0.14.1",
     "react-transform-hmr": "^1.0.1",
     "sass-loader": "^3.0.0",
     "style-loader": "^0.12.4",

client/test/components/CommentList_spec.jsx

@@ -0,0 +1,42 @@
+import { React, expect, TestUtils } from '../test_helper';
+import { List, Map } from 'immutable';
+import CommentList from '../../app/components/CommentList';
+import Comment from '../../app/components/Comment';
+
+const {
+  renderIntoDocument,
+  findRenderedDOMComponentWithTag,
+  scryRenderedComponentsWithType,
+} = TestUtils;
+
+describe('CommentList', () => {
+  const comments = List.of(
+    new Map({
+      author: 'Frank',
+      text: 'hi',
+    }),
+    new Map({
+      author: 'Furter',
+      text: 'ho',
+    }),
+  );
+
+  it('renders a list of Comments in reverse order', () => {
+    const component = renderIntoDocument(
+      <CommentList $$comments={comments}/>
+    );
+    const list = scryRenderedComponentsWithType(component, Comment);
+    expect(list.length).to.equal(2);
+    expect(list[0].props.author).to.equal('Furter');
+    expect(list[1].props.author).to.equal('Frank');
+  });
+
+  it('renders an alert if errors', () => {
+    const component = renderIntoDocument(
+      <CommentList $$comments={comments} error="zomg" />
+    );
+
+    const alert = findRenderedDOMComponentWithTag(component, 'strong');
+    expect(alert.textContent).to.equal('Comments could not be retrieved. ');
+  });
+});

client/test/components/Comment_spec.jsx

@@ -0,0 +1,41 @@
+import { React, expect, TestUtils } from '../test_helper';
+import Comment from '../../app/components/Comment';
+
+const {
+  renderIntoDocument,
+  findRenderedDOMComponentWithClass,
+  findRenderedDOMComponentWithTag,
+} = TestUtils;
+
+describe('Comment', () => {
+  it('renders an author and comment with proper css classes', () => {
+    const component = renderIntoDocument(
+      <Comment author="Frank" text="Hi!"/>
+    );
+
+    const comment = findRenderedDOMComponentWithTag(component, 'div');
+    expect(comment.className).to.equal('comment');
+    const author = findRenderedDOMComponentWithTag(component, 'h2');
+    expect(author.className).to.equal('comment-author');
+    const text = findRenderedDOMComponentWithTag(component, 'span');
+    expect(text.className).to.equal('comment-text');
+  });
+
+  it('shows the author', () => {
+    const component = renderIntoDocument(
+      <Comment author="Frank" text="Hi!"/>
+    );
+
+    const author = findRenderedDOMComponentWithClass(component, 'comment-author');
+    expect(author.textContent).to.equal('Frank');
+  });
+
+  it('shows the comment text in markdown', () => {
+    const component = renderIntoDocument(
+      <Comment author="Frank" text="Hi!"/>
+    );
+
+    const comment = findRenderedDOMComponentWithClass(component, 'comment-text');
+    expect(comment.textContent).to.equal('Hi!\n');
+  });
+});

client/test/test_helper.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import jsdom from 'jsdom';
+import chai from 'chai';
+import chaiImmutable from 'chai-immutable';
+
+const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
+const win = doc.defaultView;
+
+global.document = doc;
+global.window = win;
+
+// from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80
+function propagateToGlobal(window) {
+  for (const key in window) {
+    if (!window.hasOwnProperty(key)) continue;
+    if (key in global) continue;
+
+    global[key] = window[key];
+  }
+}
+// take all properties of the window object and also attach it to the
+// mocha global object
+propagateToGlobal(win);
+
+// everything we need for our tests
+const {
+  assert, expect,
+} = chai;
+
+chai.use(chaiImmutable);
+
+export {
+  React,
+  chai,
+  assert,
+  expect,
+  TestUtils,
+};

package.json

@@ -9,7 +9,8 @@
   },
   "scripts": {
     "postinstall": "cd client && npm install",
-    "test": "rspec && (cd client && npm run lint)"
+    "test": "rspec && npm run test:client",
+    "test:client": "(cd client && npm run test --silent && npm run eslint --silent)"
   },
   "repository": {
     "type": "git",
@@ -27,5 +28,11 @@
     "url": "https://github.com/shakacode/react-webpack-rails-tutorial/issues"
   },
   "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial",
-  "dependencies": {}
+  "dependencies": {},
+  "devDependencies": {
+    "chai": "^3.4.0",
+    "chai-immutable": "^1.4.0",
+    "jsdom": "^7.0.2",
+    "mocha": "^2.3.3"
+  }
 }