Added mocha/enzyme unit testing

First example of unit tests is Button

.eslintrc

@@ -8,6 +8,7 @@
   "env": {
     "browser": true,
     "node": true,
+    "mocha": true,
     "es6": true,
   },
   "parser": "babel-eslint",

package.json

@@ -8,7 +8,8 @@
     "start": "start-storybook -p 9001",
     "publish-pages": "git subtree push --prefix gh-pages origin gh-pages",
     "storybook": "start-storybook -p 9001",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "NODE_PATH=$NODE_PATH:$PWD/src mocha \"./src/**/tests/index.js\" --compilers js:babel-core/register,css:tests/null-compiler.js --recursive --require ./tests/setup.js",
+    "test:watch": "npm test -- --watch"
   },
   "keywords": [
     "react",
@@ -28,11 +29,17 @@
     "babel-preset-stage-2": "^6.11.0",
     "base64-loader": "^1.0.0",
     "css-loader": "^0.23.1",
+    "enzyme": "^2.4.1",
     "eslint": "^2.13.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.11.0",
     "eslint-plugin-jsx-a11y": "^1.5.5",
     "eslint-plugin-react": "^5.2.2",
+    "expect": "^1.20.2",
+    "jsdom": "^9.4.1",
+    "mocha": "^3.0.1",
+    "react-addons-test-utils": "^15.2.1",
+    "sinon": "^1.17.5",
     "style-loader": "^0.13.1",
     "svg-react-loader": "^0.3.6",
     "webpack": "^1.13.1"

src/components/Button/Button.js

@@ -7,7 +7,7 @@ const Button = (props) => {
     cta = false, large = false, quiet = false, ...rest } = props;
   const cx = classNames({
     full: props.full || false,
-    'topcoat-button': !cta && !large,
+    'topcoat-button': !quiet && !cta && !large,
     'topcoat-button--quiet': !cta && !large && quiet,
     'topcoat-button--cta': cta && !large && !quiet,
     'topcoat-button--large': large && !cta && !quiet,

src/components/Button/stories/index.js

@@ -13,6 +13,9 @@ storiesOf('Button', module)
   .addWithInfo('a clickHandler', () => (
     <Button clickHandler={ action('tapped') }>Click Me</Button>
   ))
+  .addWithInfo('a disabled clickHandler', () => (
+    <Button disabled clickHandler={ action('tapped') }>Click Me</Button>
+  ))
   .addWithInfo('no text (all defaults)', () => (
     <Button />
   ))

src/components/Button/tests/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import expect from 'expect';
+import { mount, shallow } from 'enzyme';
+import { spy } from 'sinon';
+
+import Button from '..';
+
+describe('<Button />', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(<Button>A Button</Button>);
+    expect(wrapper.is('.topcoat-button')).toBe(true);
+  });
+  it('should render its children correctly', () => {
+    expect(
+      shallow(<Button>A Button</Button>)
+      .contains('A Button')
+    ).toBe(true);
+    expect(
+      shallow(<Button><span>A Button</span></Button>)
+      .contains(<span>A Button</span>)
+    ).toBe(true);
+  });
+  it('should fire its clickHandler on tap', () => {
+    const clickHandler = spy();
+    const wrapper = shallow(<Button clickHandler={ clickHandler }>Click me</Button>);
+    wrapper.simulate('tap');
+    expect((clickHandler).callCount).toBe(1);
+  });
+  it('should show a quiet button', () => {
+    const wrapper = shallow(<Button quiet>Quiet button</Button>);
+    expect(wrapper.is('.topcoat-button--quiet')).toBe(true);
+  });
+  it('should show a large button', () => {
+    const wrapper = shallow(<Button large>Quiet button</Button>);
+    expect(wrapper.is('.topcoat-button--large')).toBe(true);
+  });
+  it('should show a cta button', () => {
+    const wrapper = shallow(<Button cta>Quiet button</Button>);
+    expect(wrapper.is('.topcoat-button--cta')).toBe(true);
+  });
+  it('should show a large quiet button', () => {
+    const wrapper = shallow(<Button large quiet>Quiet button</Button>);
+    expect(wrapper.is('.topcoat-button--large--quiet')).toBe(true);
+  });
+  it('should show a large cta button', () => {
+    const wrapper = shallow(<Button large cta>Quiet button</Button>);
+    expect(wrapper.is('.topcoat-button--large--cta')).toBe(true);
+  });
+  it('should show a disabled button', () => {
+    const wrapper = mount(<Button disabled>Quiet button</Button>);
+    expect(wrapper.props().disabled).toBe(true);
+  });
+  it('should pass on other props to the button', () => {
+    const wrapper = mount(<Button style={ { background: 'red' } }>Props</Button>);
+    expect(wrapper.props().style).toEqual({ background: 'red' });
+  });
+});

tests/null-compiler.js

@@ -0,0 +1,7 @@
+function noop() {
+  return null;
+}
+
+require.extensions['.less'] = noop;
+require.extensions['.png'] = noop;
+// ..etc

tests/setup.js

@@ -0,0 +1,5 @@
+import { jsdom } from 'jsdom';
+
+global.document = jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = global.window.navigator;