Added basic testing setup with Mocha, Chai and jsdom

.eslintrc

@@ -3,7 +3,8 @@
  "env": {
  "browser": true,
  "node": true,
- "commonjs": true
+ "commonjs": true,
+ "mocha": true
  },
  "plugins": [
  "react"
@@ -220,4 +221,4 @@
  }],
  "react/wrap-multilines": 1
  }
-}
+}

README.md

@@ -23,6 +23,7 @@ The primary purpose of this repo however is to demonstrate how to wire together
 * Webpack assets are generated with content hashes in filenames for easy cache busting
 * Webpack assets are optimized with Uglify.js on production, removing dead code (TODO: add server-only code)
 * Webpack asset URLs are recorded in a file, and a helper method is provided to extract them for usage in HTML / JSX.
+* Basic testing setup with Mocha, Chai and jsdom
 
 ## Configuration
 

package.json

@@ -27,7 +27,8 @@
  "dev": "NODE_ENV=development node --harmony src/scripts/make.js && NODE_ENV=development ./node_modules/nodemon/bin/nodemon.js --harmony src/server.js",
  "make": "NODE_ENV=development node --harmony src/scripts/make.js",
  "lint": "eslint . --ext .js --ext .jsx",
- "postinstall": "npm run build"
+ "postinstall": "npm run build",
+ "test": "./node_modules/.bin/mocha --compilers jsx:babel-register --require ignore-styles ./tests/specs --recursive"
  },
  "dependencies": {
  "assets-webpack-plugin": "^3.2.0",
@@ -39,12 +40,17 @@
  "babel-preset-react": "^6.3.13",
  "babel-preset-stage-1": "^6.3.13",
  "babel-register": "^6.3.13",
+ "chai": "^3.5.0",
  "chalk": "^1.1.1",
  "css-loader": "^0.23.0",
  "hapi": "^11.1.2",
  "hapi-react-views": "^5.0.1",
+ "ignore-styles": "^1.2.0",
  "inert": "^3.2.0",
+ "jsdom": "^8.1.0",
+ "mocha": "^2.4.5",
  "react": "^0.14.3",
+ "react-addons-test-utils": "^0.14.7",
  "react-dom": "^0.14.3",
  "rimraf": "^2.4.4",
  "style-loader": "^0.13.0",

src/components/counter.jsx

@@ -19,7 +19,7 @@ class Counter extends React.Component {
  this.increment = this.increment.bind(this);
  this.remove = this.remove.bind(this);
 
- setInterval(this.increment.bind(this), 1000);
+ setInterval(this.increment.bind(this), this.props.interval);
  }
 
  render () {
@@ -50,4 +50,13 @@ class Counter extends React.Component {
 }
 
 
+Counter.defaultProps = {
+ interval: 1000
+};
+
+Counter.propTypes = {
+ interval: React.PropTypes.number.isRequired
+};
+
+
 module.exports = Counter;

tests/specs/counter-spec.jsx

@@ -0,0 +1,73 @@
+'use strict';
+
+// In order for React to use our test DOM we need to require it before requiring React
+require('../utils/test-dom')();
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var expect = require('chai').expect;
+
+var Counter = require('../../src/components/counter');
+
+
+describe('Counter component.', () => {
+
+ var TestUtils = require('react-addons-test-utils');
+ var Simulate = TestUtils.Simulate;
+
+ var component;
+ var renderedDOMElement;
+ var interval = 20;
+
+
+ before(() => {
+ component = TestUtils.renderIntoDocument(<Counter interval={interval} />);
+ renderedDOMElement = ReactDOM.findDOMNode(component);
+ });
+
+
+ // `done` callback allows the test to wait for asynchronous code to complete
+ it('renders counter value', (done) => {
+ var counterValue = component.state.counter;
+ var renderedDOMNumber = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+
+ expect(renderedDOMNumber).to.equal(counterValue);
+
+ setTimeout(
+ () => {
+ var nextCounterValue = component.state.counter;
+ renderedDOMNumber = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+
+ expect(nextCounterValue).to.equal(counterValue + 1);
+ expect(renderedDOMNumber).to.equal(nextCounterValue);
+
+ done();
+ },
+ interval
+ );
+ });
+
+
+ it('increments counter when `+` button clicked', () => {
+ var currentCounterValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+ var incrementButton = renderedDOMElement.querySelectorAll('.-button')[0];
+
+ Simulate.click(incrementButton);
+
+ var incrementedValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+
+ expect(incrementedValue).to.equal(currentCounterValue + 1);
+ });
+
+
+ it('decrements counter when `-` button clicked', () => {
+ var currentCounterValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+ var decrementButton = renderedDOMElement.querySelectorAll('.-button')[1];
+
+ Simulate.click(decrementButton);
+
+ var decrementedValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+
+ expect(decrementedValue).to.equal(currentCounterValue - 1);
+ });
+});

tests/utils/test-dom.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsdom = require('jsdom').jsdom;
+
+/**
+ * @param {string} [markup] - custom HTML layout into which you'll be rendering your test components
+ */
+module.exports = (markup) => {
+ // Idempotence: multiple calls to this function should not reset global objects
+ if (typeof document !== 'undefined') {
+ return;
+ }
+
+ // `global` is node.js global object, like `window` in a browser environment
+ global.document = jsdom(markup || '<html><body></body></html>');
+ global.window = document.defaultView;
+ global.navigator = window.navigator;
+
+ // Note: here we can add whatever browser globals the tests might need
+ // e.g. global.HTMLElement = window.HTMLElement;
+};