Merge pull request #89 from kschaper/react-testing

React testing

.nvmrc

+6.7.0

package.json

 {
   "name": "mastodon",
+  "scripts": {
+    "test": "mocha --require ./spec/javascript/setup.js --compilers js:babel-register ./spec/javascript/components/*.test.jsx"
+  },
   "devDependencies": {
+    "axios": "^0.14.0",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-preset-es2015": "^6.13.2",
@@ -8,17 +12,21 @@
     "babelify": "^7.3.0",
     "browserify": "^13.1.0",
     "browserify-incremental": "^3.1.1",
-    "react": "^15.3.0",
-    "react-dom": "^15.3.0",
-    "react-proxy": "^1.1.8",
-    "axios": "^0.14.0",
+    "chai": "^3.5.0",
+    "enzyme": "^2.4.1",
     "es6-promise": "^3.2.1",
     "immutable": "^3.8.1",
+    "jsdom": "^9.6.0",
+    "mocha": "^3.1.1",
     "moment": "^2.14.1",
+    "react": "^15.3.2",
     "react-addons-perf": "^15.3.2",
     "react-addons-pure-render-mixin": "^15.3.1",
+    "react-addons-test-utils": "^15.3.2",
+    "react-dom": "^15.3.0",
     "react-immutable-proptypes": "^2.1.0",
     "react-notification": "^6.1.1",
+    "react-proxy": "^1.1.8",
     "react-redux": "^5.0.0-beta.3",
     "react-redux-loading-bar": "^2.3.3",
     "react-router": "^2.8.0",
@@ -26,6 +34,7 @@
     "redux": "^3.5.2",
     "redux-immutable": "^3.0.8",
     "redux-thunk": "^2.1.0",
-    "reselect": "^2.5.4"
+    "reselect": "^2.5.4",
+    "sinon": "^1.17.6"
   }
 }

spec/javascript/components/avatar.test.jsx

+import { expect } from 'chai';
+import { render } from 'enzyme';
+
+import Avatar from '../../../app/assets/javascripts/components/components/avatar'
+
+describe('<Avatar />', () => {
+  it('renders an img with the given src', () => {
+    const src = '/path/to/image.jpg';
+    const wrapper = render(<Avatar src={src} size={100} />);
+    expect(wrapper.find(`img[src="${src}"]`)).to.have.length(1);
+  });
+});

spec/javascript/components/button.test.jsx

+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import Button from '../../../app/assets/javascripts/components/components/button'
+
+describe('<Button />', () => {
+  it('simulates click events', () => {
+    const onClick = sinon.spy();
+    const wrapper = shallow(<Button onClick={onClick} />);
+    wrapper.find('button').simulate('click');
+    expect(onClick.calledOnce).to.equal(true);
+  });
+});

spec/javascript/components/loading_indicator.test.jsx

+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+import LoadingIndicator from '../../../app/assets/javascripts/components/components/loading_indicator'
+
+describe('<LoadingIndicator />', () => {
+  it('renders text that indicates loading', () => {
+    const wrapper = shallow(<LoadingIndicator />);
+    expect(wrapper.text()).to.match(/loading/i);
+  });
+});

spec/javascript/setup.js

+/**
+ * http://airbnb.io/enzyme/docs/guides/jsdom.html
+ */
+var jsdom = require('jsdom').jsdom;
+
+var exposedProperties = ['window', 'navigator', 'document'];
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+var React    = window.React    = global.React    = require('react');
+var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');