Merged in fontend-unit-testing (pull request #10)

Frontend unit testing

README.md

@@ -22,6 +22,11 @@ OpenSupports v4.0
 
 Now that `gulp dev` is running, the server is up as well and serving files from the `/build` directory. Any changes in the `/src` directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address.
 
+#### Frontend Unit Testing
+1. Do the steps described before
+2. Install mocha "sudo npm install -g mocha"
+3. Run `npm test` to run the tests
+
 ### Getting up and running BACK-END (server folder)
 
 1. Clone this repo

client/package.json

@@ -13,13 +13,15 @@
     "npm": "^2.1.x"
   },
   "scripts": {
-    "test": "export NODE_PATH=src && jest"
+    "test": "export NODE_PATH=src && mocha src/lib-test/preprocessor.js --compilers js:babel-core/register --recursive src/**/__tests__/*-test.js"
   },
   "devDependencies": {
     "babel-core": "^5.8.22",
+    "babel-register": "^6.7.2",
     "babelify": "^6.1.x",
     "browser-sync": "^2.7.13",
     "browserify": "^10.2.6",
+    "chai": "^3.5.0",
     "debowerify": "^1.3.1",
     "del": "^1.2.0",
     "express": "^4.13.1",
@@ -38,10 +40,15 @@
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.6",
     "humps": "^0.6.0",
-    "jest-cli": "^0.5.10",
     "jquery-mockjax": "^2.1.0",
+    "jsdom": "^8.4.1",
     "morgan": "^1.6.1",
+    "proxyquire": "^1.7.4",
+    "react-addons-test-utils": "^15.0.1",
+    "react-tools": "^0.13.3",
     "run-sequence": "^1.1.1",
+    "sinon": "^1.17.3",
+    "sinon-chai": "^2.8.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.2.x"
   },
@@ -51,28 +58,13 @@
     "jquery": "^2.1.4",
     "lodash": "^3.10.0",
     "messageformat": "^0.2.2",
-    "react": "^0.14.6",
+    "react": "^15.0.1",
     "react-document-title": "^1.0.2",
-    "react-dom": "^0.14.6",
+    "react-dom": "^15.0.1",
     "react-google-recaptcha": "^0.5.2",
     "react-motion": "^0.3.0",
-    "react-router": "^2.0.0-rc5",
-    "reflux": "^0.2.9",
+    "react-router": "^2.4.0",
+    "reflux": "^0.4.1",
     "sessionstorage": "0.0.1"
-  },
-  "jest": {
-    "scriptPreprocessor": "./preprocessor.js",
-    "testFileExtensions": [
-      "es6",
-      "js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "es6"
-    ],
-    "unmockedModulePathPatterns": [
-      "react"
-    ]
   }
 }

client/src/core-components/__tests__/button-test.js

@@ -1,19 +1,14 @@
-jest.dontMock('../button.js');
+let Button = require('core-components/button');
 
-import React from 'react';
-import Button from '../button.js';
+describe('Button component', function () {
 
-let TestUtils = React.addons.TestUtils;
+    it('should render children correctly', function () {
 
-describe('Button', function () {
-    it('should render children', function () {
         let button = TestUtils.renderIntoDocument(
-            <Button>
-                testcontent
-            </Button>
+            <Button>test content</Button>
         );
 
-        expect(button.getDOMNode().textContent).toEqual('testcontent');
+        expect(ReactDOM.findDOMNode(button).textContent).to.eql('test content');
     });
 
     it('should add passed types to class', function () {
@@ -26,11 +21,11 @@ describe('Button', function () {
         types.forEach(function (type) {
             let button = TestUtils.renderIntoDocument(
                 <Button type={type}>
-                    testcontent
+                    test content
                 </Button>
             );
 
-            expect(button.getDOMNode().getAttribute('class')).toContain('button-' + type);
+            expect(ReactDOM.findDOMNode(button).getAttribute('class')).to.include('button-' + type);
         });
     });
 });

client/src/core-components/__tests__/form-test.js

@@ -1,26 +1,24 @@
-jest.dontMock('core-components/form.js');
-jest.dontMock('core-components/form.js');
+const Form = require('core-components/form');
+const Input = require('core-components/input');
 
-import React from 'react';
-import Form from 'core-components/form.js';
-import Input from 'core-components/input.js';
+describe('Form component', function () {
+    let form, inputs, onSubmit = stub();
 
-let TestUtils = React.addons.TestUtils;
-
-describe('Form', function () {
-    let results = TestUtils.renderIntoDocument(
-        <Form onSubmit={jest.genMockFunction()}>
-            <div>
-                <Input name="first" value="value1"/>
-                <Input name="second" value="value2" />
-            </div>
-            <Input name="third" value="value3" />
-        </Form>
-    );
-    let inputs = TestUtils.scryRenderedComponentsWithType(results, Input);
+    beforeEach(function () {
+        form = TestUtils.renderIntoDocument(
+            <Form onSubmit={onSubmit}>
+                <div>
+                    <Input name="first" value="value1"/>
+                    <Input name="second" value="value2" />
+                </div>
+                <Input name="third" value="value3" />
+            </Form>
+        );
+        inputs = TestUtils.scryRenderedComponentsWithType(form, Input);
+    });
 
     it('should store input value in form state', function () {
-        expect(results.state.form).toEqual({
+        expect(form.state.form).to.deep.equal({
             first: 'value1',
             second: 'value2',
             third: 'value3'
@@ -30,7 +28,7 @@ describe('Form', function () {
     it('should update form state if an input value changes', function () {
         inputs[0].props.onChange({ target: {value: 'value4'}});
 
-        expect(results.state.form).toEqual({
+        expect(form.state.form).to.deep.equal({
             first: 'value4',
             second: 'value2',
             third: 'value3'
@@ -38,7 +36,7 @@ describe('Form', function () {
     });
 
     it('should update input value if state value changes', function () {
-        results.setState({
+        form.setState({
             form: {
                 first: 'value6',
                 second: 'value7',
@@ -46,14 +44,14 @@ describe('Form', function () {
             }
         });
 
-        expect(inputs[0].props.value).toEqual('value6');
-        expect(inputs[1].props.value).toEqual('value7');
-        expect(inputs[2].props.value).toEqual('value8');
+        expect(inputs[0].props.value).to.equal('value6');
+        expect(inputs[1].props.value).to.equal('value7');
+        expect(inputs[2].props.value).to.equal('value8');
     });
 
     it('should call onSubmit callback when form is submitted', function () {
-        TestUtils.Simulate.submit(results.getDOMNode());
+        TestUtils.Simulate.submit(ReactDOM.findDOMNode(form));
 
-        expect(results.props.onSubmit).toBeCalledWith(results.state.form);
+        expect(form.props.onSubmit).to.have.been.calledWith(form.state.form);
     });
-});
+});

client/src/core-components/button.js

@@ -1,7 +1,6 @@
-import React              from 'react';
-import classNames         from 'classnames';
-import Router             from 'react-router';
-import callback           from 'lib-core/callback';
+var React       = require('react');
+var classNames  = require('classnames');
+var callback    = require('lib-core/callback');
 
 let Button = React.createClass({
 

client/src/lib-test/preprocessor.js

@@ -0,0 +1,20 @@
+var jsdom = require('jsdom').jsdom;
+
+global.document = jsdom('<html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = {
+    userAgent: 'node.js'
+};
+global.React = require('react');
+global.ReactDOM = require('react-dom');
+global.chai = require('chai');
+global.expect = chai.expect;
+global.sinon = require('sinon');
+global.stub = sinon.stub;
+global.proxyquire = require('proxyquire');
+global.ReactMock  = require('lib-test/react-mock');
+chai.use(require('sinon-chai'));
+global.TestUtils = require('react-addons-test-utils');
+global.requireUnit = function (path, mocks) {
+    return proxyquire(process.cwd() + '/src/' + path + '.js', mocks)
+};

client/src/lib-test/react-mock.js

@@ -0,0 +1,9 @@
+const React = require('react');
+
+module.exports = function () {
+    return React.createClass({
+        render() {
+            return <div {...this.props} />;
+        }
+    });
+};