Setup environment to run client tests in phantomjs

.gitignore

@@ -18,3 +18,4 @@ lib-cov
 complexity.md
 .sass-cache
 public/
+test/bundle.js

Makefile

@@ -4,5 +4,7 @@ test-cov:
 	@node node_modules/lab/bin/lab -a code -t 100 -L
 test-cov-html:
 	@node node_modules/lab/bin/lab -a code -r html -o coverage.html
+test-client:
+	@node node_modules/mocha-phantomjs/bin/mocha-phantomjs test/client/index.html
 
-.PHONY: test test-cov test-cov-html
+.PHONY: test test-cov test-cov-html test-client

package.json

@@ -33,27 +33,38 @@
   },
   "devDependencies": {
     "browserify": "^6.3.2",
+    "chai": "^1.10.0",
     "code": "^1.2.1",
+    "es5-shim": "^4.0.5",
     "hapi": "8.0.0-rc8",
+    "jquery": "^2.1.1",
     "lab": "5.x.x",
+    "mocha": "^2.0.1",
+    "mocha-phantomjs": "^3.5.2",
     "node-sass": "1.2.2",
+    "onchange": "0.0.2",
+    "phantomjs": "^1.9.12",
     "rewire": "^2.1.3",
     "sinon": "^1.12.1",
     "watchify": "^2.1.1"
   },
   "scripts": {
     "test": "make test-cov",
+    "test-client": "make test-client",
     "watch-js": "watchify -t hbsfy -e source/js/start.js source/js/**/*.js -o public/js/main.js -d -v",
+    "watch-test": "watchify -t hbsfy -e test/client/main.js test/client/**/*.js -o test/bundle.js -d -v",
     "watch-styles": "node-sass source/styles/style.scss public/css/style.css -w source/styles -r",
-    "watch": "npm run build && npm run watch-js & npm run watch-styles",
+    "watch": "npm run build && npm run watch-js & npm run watch-test & npm run watch-styles & npm run post-js",
     "copy-fonts": "cp -R source/fonts/vendor/bootstrap public/fonts",
     "copy-assets": "cp -R vendor/ZeroClipboard.swf public/js",
     "build-js": "browserify -t hbsfy -e source/js/start.js source/js/**/*.js > public/js/main.js -d",
+    "build-test": "browserify -t hbsfy test/client/main.js -o test/bundle.js",
     "build-styles": "node-sass source/styles/style.scss public/css/style.css",
-    "build": "npm run build-js && npm run build-styles && npm run copy-fonts && npm run copy-assets",
+    "build": "npm run build-js && npm run build-styles && npm run build-test && npm run copy-fonts && npm run copy-assets",
     "boot": "node examples/simple.js",
     "start": "npm run build && npm run boot",
-    "start-dev": "npm run watch & npm run boot"
+    "start-dev": "npm run watch & npm run boot",
+    "post-js": "onchange test/bundle.js -- npm run test-client"
   },
   "licenses": [
     {

source/js/app.js

@@ -1,6 +1,7 @@
 var SettingsStore = require('./settingsStore');
 var AppView = require('./views/app');
 var ClientIdGenerator = require('./clientIdGenerator');
+var _ = require('lodash');
 
 require('bootstrap/js/modal');
 
@@ -14,7 +15,7 @@ var app = {
             collection: messageParser.requests,
             webSocketManager: webSocketManager
         }).render();
-        
+
         if(!this._store.exists('clientId')) {
             appView.model.set('clientId', ClientIdGenerator.generate());
             appView.settingsView.render();
@@ -25,14 +26,14 @@ var app = {
             appView.settingsView.show();
         }
 
-        webSocketManager.onSocketOpen = function() {
+        webSocketManager.onSocketOpen = _.bind(function() {
             webSocketManager.applyFilter(this._store.get('channel'));
-        }.bind(this);
+        }, this);
 
         webSocketManager.onMessage(function(message) {
             messageParser.addMessage(message);
         });
     }
 }
 
-module.exports = app;
+module.exports = app;

source/js/messageParser.js

@@ -1,6 +1,7 @@
 var _ = require('lodash');
 var Backbone = require('backbone');
 var Request = require('./models/request');
+var _ = require('lodash');
 
 var MessageParser = function(opts) {
     opts = opts || {};
@@ -132,13 +133,13 @@ MessageParser.prototype._refreshResponseTimeout = function(message) {
     }
 
     if(!this._isResponse(message)) {
-        request.timer = setTimeout(function(){
+        request.timer = setTimeout(_.bind(function(){
             request.set('statusCode', "timeout");
             request.set('responseTimeout', true);
             request.set('isComplete', true);
 
             this.onResponseTimeout && this.onResponseTimeout();
-        }.bind(this), this.responseTimeout);
+        }, this), this.responseTimeout);
     }
 };
 

source/js/models/settings.js

@@ -1,7 +1,7 @@
 var _ = require('lodash');
 var Backbone = require('backbone');
 var SettingsStore = require('../settingsStore');
-
+var _ = require('lodash');
 
 var Settings = Backbone.Model.extend({
 
@@ -22,11 +22,11 @@ var Settings = Backbone.Model.extend({
     },
 
     _updateSettingsStore: function(model) {
-        _.each(model.changed, function(value, key) {
+        _.each(model.changed, _.bind(function(value, key) {
             this._store.set(key, value);
-        }.bind(this));
+        }, this));
     }
 
 });
 
-module.exports = Settings;
+module.exports = Settings;

source/js/utils/searchCriteria.js

@@ -78,17 +78,17 @@ SearchCriterion.prototype.matches = function(request) {
     }
 }
 
-SearchCriterion.prototype._matchesScopedProperty = function(request) {
+SearchCriterion.prototype._matchesScopedProperty = _.bind(function(request) {
     return _.any(this.scopedPropertyValues, function(value) {
         return this._matchesValue(request, this.scopedProperty, value);
-    }.bind(this));
-}
+    });
+}, this);
 
-SearchCriterion.prototype._matchesAny = function(request) {
+SearchCriterion.prototype._matchesAny = _.bind(function(request) {
     return _.any(SearchCriterion.VALID_SCOPED_PROPERTIES, function(property) {
         return this._matchesValue(request, property, this.fragment);
-    }.bind(this));
-}
+    });
+}, this);
 
 SearchCriterion.prototype._matchesValue = function(request, property, expectedValue) {
     var actualValue = null;

source/js/views/app.js

@@ -45,7 +45,7 @@ var AppView = Backbone.View.extend({
     },
 
     _addRequest: function(request) {
-        this._checkToScrollToBottom( function() {
+        this._checkToScrollToBottom( _.bind(function() {
             var requestView = new RequestView({ model: request }).render();
             this.requestViews.push(requestView);
 
@@ -61,7 +61,7 @@ var AppView = Backbone.View.extend({
             });
 
             this.$('.feed .body').append(requestView.el);
-        }.bind(this) );
+        }, this) );
     },
 
     _enableCollapseAllAction: function() {
@@ -147,7 +147,7 @@ var AppView = Backbone.View.extend({
 
         this.nextVisibleRequestIndex = 0;
         this._setSearchFilter(SearchCriteria.create(queryString));
-        _.each(this.requestViews, this._updateRequestVisibility.bind(this));
+        _.each(this.requestViews, _.bind(this._updateRequestVisibility, this));
     }, 200),
 
     _updateRequestVisibility: function(requestView, isUpdate) {

source/js/views/serverLogs.js

@@ -54,12 +54,12 @@ var ServerLogsView = Backbone.View.extend({
     _initializeClipboard: function() {
         this.clipboard = this._clipboard();
 
-        this.clipboard.on( "ready", function( readyEvent ) {
+        this.clipboard.on( "ready", _.bind(function( readyEvent ) {
 
           this.clipboard.on( "aftercopy", function( event ) {
             alert('copied');
           });
-        }.bind(this));
+        }, this));
     },
 
     _toggleServerLogData: function(e) {

source/js/views/settings.js

@@ -68,4 +68,4 @@ var SettingsView = Backbone.View.extend({
 
 });
 
-module.exports = SettingsView;
+module.exports = SettingsView;

source/js/webSocketManager.js

@@ -1,10 +1,14 @@
+var _ = require('lodash');
+
 var WebSocketManager = function(webSocket, clientId) {
     this.webSocket = webSocket;
 
-    this.webSocket.onopen = function() {
+    this.webSocket.onopen = _.bind( function() {
         this.isOpen = true;
-        if (this.onSocketOpen) this.onSocketOpen();
-    }.bind(this);
+        if (this.onSocketOpen) {
+            this.onSocketOpen();
+        }
+    }, this);
 };
 
 WebSocketManager.create = function(webSocket, clientId) {

test/client/app.js

@@ -1,7 +1,6 @@
 // Load modules
 
-var React = require('react');
-var Lab = require('lab');
+//var Lab = require('lab');
 var sinon = require('sinon');
 var app = require('../../source/js/app');
 var WebSocketManager = require('../../source/js/webSocketManager');
@@ -15,13 +14,13 @@ var internals = {};
 
 // Test shortcuts
 
-var lab = exports.lab = Lab.script();
-var describe = lab.describe;
-var beforeEach = lab.beforeEach;
-var afterEach = lab.afterEach;
-var context = lab.describe;
-var it = lab.it;
-var expect = Lab.expect;
+//var lab = exports.lab = Lab.script();
+//var describe = lab.describe;
+//var beforeEach = lab.beforeEach;
+//var afterEach = lab.afterEach;
+//var context = lab.describe;
+//var it = lab.it;
+//var expect = Lab.expect;
 var spy = sinon.spy;
 var stub = sinon.stub;
 
@@ -41,17 +40,13 @@ describe('app', function() {
             this.appComponent = { render: spy(), setState: spy() };
 
             this.updateStateSpy = spy();
-            this.reactRenderSpy = sinon.stub(React, 'render', function() {
-                return { updateState: this.updateStateSpy }
-            }.bind(this));
 
             app.start(mockWebSocketManager, this.messageParser, this.appComponent);
 
             done();
         });
 
         afterEach(function(done){
-            React.render.restore();
             this.messageParser.addMessage.restore();
 
             delete this.messageParser;

test/client/clientId.js → test/client/clientIdGenerator.js

@@ -2,10 +2,9 @@
 
 var sinon = require('sinon');
 var _ = require('lodash');
-var Lab = require('lab');
+//var Lab = require('lab');
 
-var rewire = require('rewire');
-var ClientId = rewire('../../source/js/clientId');
+var ClientIdGenerator = require('../../source/js/clientIdGenerator');
 
 var settingsStoreGetSpy = sinon.spy();
 var settingsStoreSetSpy = sinon.spy();
@@ -19,19 +18,19 @@ internals.numbers = '0123456789';
 
 // Test shortcuts
 
-var lab = exports.lab = Lab.script();
-var describe = lab.describe;
-var beforeEach = lab.beforeEach;
-var afterEach = lab.afterEach;
-var after = lab.after;
-var context = lab.describe;
-var it = lab.it;
-var expect = Lab.expect;
+//var lab = exports.lab = Lab.script();
+//var describe = lab.describe;
+//var beforeEach = lab.beforeEach;
+//var afterEach = lab.afterEach;
+//var after = lab.after;
+//var context = lab.describe;
+//var it = lab.it;
+//var expect = Lab.expect;
 
 
 
 
-describe('ClientId', function() {
+describe('ClientIdGenerator', function() {
 
     beforeEach(function(done) {
         this.storeMock = {
@@ -42,23 +41,23 @@ describe('ClientId', function() {
                 return arguments[1];
             })
         }
-        ClientId._store = this.storeMock;
+        ClientIdGenerator._store = this.storeMock;
 
         done();
     });
 
     describe('#generate', function() {
 
         it('returns a code', function(done) {
-            var obj = ClientId._generateClientId();
-            expect(ClientId._generateClientId()).to.have.length(ClientId.defaults.length);
+            var obj = ClientIdGenerator._generateClientId();
+            expect(ClientIdGenerator._generateClientId()).to.have.length(ClientIdGenerator.defaults.length);
 
             done();
         });
 
         it('"always" returns a unique code', function(done) {
             var clientIds = _.times(30, function() {
-                return ClientId._generateClientId();
+                return ClientIdGenerator._generateClientId();
             });
 
             expect(_.unique(clientIds)).to.have.length(clientIds.length);
@@ -69,7 +68,7 @@ describe('ClientId', function() {
         context('with length specified', function() {
 
             it('returns a code of the specified length', function(done) {
-                expect(ClientId._generateClientId({length: 10})).to.have.length(10);
+                expect(ClientIdGenerator._generateClientId({length: 10})).to.have.length(10);
 
                 done();
             });
@@ -79,7 +78,7 @@ describe('ClientId', function() {
         context('with only letters specified', function() {
 
             it('returns a code with only letters', function(done) {
-                var clientId = ClientId._generateClientId({numbers: false});
+                var clientId = ClientIdGenerator._generateClientId({numbers: false});
 
                 var intersection = _.intersection(clientId.split(''), internals.numbers.split(''))
                 expect(intersection).to.have.length(0);
@@ -92,7 +91,7 @@ describe('ClientId', function() {
         context('with only numbers specified', function() {
 
             it('returns a code with only numbers', function(done) {
-                var clientId = ClientId._generateClientId({letters: false});
+                var clientId = ClientIdGenerator._generateClientId({letters: false});
 
                 var intersection = _.intersection(clientId.split(''), internals.letters.split(''))
                 expect(intersection).to.have.length(0);
@@ -110,4 +109,4 @@ describe('ClientId', function() {
         done();
     });
 
-});
+});