Simplified spec; Added optional interval prop to Counter to minify te…

…st time

.eslintrc

@@ -3,7 +3,8 @@
  "env": {
  "browser": true,
  "node": true,
- "commonjs": true
+ "commonjs": true,
+ "mocha": true
  },
  "plugins": [
  "react"

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

@@ -1,45 +1,45 @@
 'use strict';
 
 // In order for React to use our test DOM we need to require it before requiring React
-require('./test-dom')();
+require('../utils/test-dom')();
+
 var React = require('react');
 var ReactDOM = require('react-dom');
 var expect = require('chai').expect;
-var then = require('./then');
 
-var Counter = require('../src/components/counter');
+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 = 100;
+ var interval = 20;
 
 
  before(() => {
- component = TestUtils.renderIntoDocument(<Counter interval={ interval } />);
+ component = TestUtils.renderIntoDocument(<Counter interval={interval} />);
  renderedDOMElement = ReactDOM.findDOMNode(component);
  });
 
 
- // Done callback indicates that this test block finished, required for asynchronous testing
+ // `done` callback allows the test to wait for asynchronous code to complete
  it('renders counter value', (done) => {
- let counterValue = component.state.counter;
- let renderedDOMNumber = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+ var counterValue = component.state.counter;
+ var renderedDOMNumber = parseInt(renderedDOMElement.querySelector('.-number').textContent);
 
  expect(renderedDOMNumber).to.equal(counterValue);
 
- // Function parsed as first parameter will be called in 1 second (the second parameter)
- then(
+ setTimeout(
  () => {
- counterValue = component.state.counter.toString();
- renderedDOMNumber = renderedDOMElement.querySelector('.-number').textContent;
+ var nextCounterValue = component.state.counter;
+ renderedDOMNumber = parseInt(renderedDOMElement.querySelector('.-number').textContent);
 
- expect(renderedDOMNumber).to.equal(counterValue);
+ expect(nextCounterValue).to.equal(counterValue + 1);
+ expect(renderedDOMNumber).to.equal(nextCounterValue);
 
  done();
  },
@@ -48,30 +48,26 @@ describe('Counter component.', () => {
  });
 
 
- it('increments/decrements counter when +/- button clicked', (done) => {
- let currentCounterValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
- let incrementButton = renderedDOMElement.querySelectorAll('.-button')[0];
+ it('increments counter when `+` button clicked', () => {
+ var currentCounterValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+ var incrementButton = renderedDOMElement.querySelectorAll('.-button')[0];
 
  Simulate.click(incrementButton);
 
- // The DOM counter value will be changed on next React setState tick
- // so we use then function to check our expectation after it happens
- then(() => {
-  let incrementedValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+ var incrementedValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+
+ expect(incrementedValue).to.equal(currentCounterValue + 1);
+ });
 
- expect(incrementedValue).to.equal(currentCounterValue + 1);
 
- currentCounterValue = incrementedValue;
- let decrementButton = renderedDOMElement.querySelectorAll('.-button')[1];
+ it('decrements counter when `-` button clicked', () => {
+ var currentCounterValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+ var decrementButton = renderedDOMElement.querySelectorAll('.-button')[1];
 
- Simulate.click(decrementButton);
- })
- .then(() => {
- let decrementedValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
+ Simulate.click(decrementButton);
 
-  expect(decrementedValue).to.equal(currentCounterValue - 1);
+ var decrementedValue = parseInt(renderedDOMElement.querySelector('.-number').textContent);
 
- done();
- });
+ expect(decrementedValue).to.equal(currentCounterValue - 1);
  });
 });

tests/utils/test-dom.js

@@ -5,7 +5,7 @@ var jsdom = require('jsdom').jsdom;
 /**
  * @param {string} [markup] - custom HTML layout into which you'll be rendering your test components
  */
-module.exports = markup => {
+module.exports = (markup) => {
  // Idempotence: multiple calls to this function should not reset global objects
  if (typeof document !== 'undefined') {
  return;