angular-socket.io-mock

Mock Socket.io bindings for AngularJS, useful for testing as a drop in replacement for https://github.com/btford/angular-socket-io which allows testing against a fake server.

Usage

Standard usage

• Make sure AngularJS is loaded prior to inclusion.

karma.conf.js

1module.exports = function(config) {
2  config.set({
3    files: [
4      {pattern: "bower_components/angular-socket.io-mock.js", included: false}
5    ]
6  })
7}

With RequireJS

In all our projects we utilize RequireJS to use this test library with RequireJS is very simple. Just replace the entry that points to the standard angular-socket-io with this library. Below is an example.

main.js

1require.config({
2  baseUrl: "/base/js",
3  shim: {
4    "socketio": {exports: "io"},
5    "angular": {exports: "angular"},
6    "ng-socket-io": ["angular","socketio"],
7    "ng-mocks": ["angular"]
8  },
9  paths: {
10    "angular": "/base/bower_components/angular/angular",
11    "socketio": "/base/bower_components/socket.io-client/dist/socket.io",
12    "ng-socket-io": "/base/bower_components/angular-socket.io-mock/angular-socket.io-mock",
13    "ng-mocks": "/base/bower_components/angular-mocks/angular-mocks"
14  },
15  callback: window.__karma__.start
16})

Your bower.json should look something like this.

bower.json

1{
2  "name": "my-app",
3  "version": "0.0.1",
4  "dependencies": {
5    "angular": "latest",
6    "angular-socket-io": "latest"
7  },
8  "devDependencies": {
9    "socket.io-client": "latest",
10    "angular-mocks": "latest",
11    "angular-socket.io-mock": "latest"
12  }
13}

Example Test

This example uses Mocha Test as the testing framework and ChaiJS for the assertion library. It also uses RequireJS to load the environment.

test.js

1define(["chai","angular","angular-mocks","angular-socket-io"],function(chai){
2  describe("Test Suite",function(){
3    beforeEach(module("app"))
4    it("should be using the mock ng-socket.io",inject(function($rootScope,$controller){
5      var expect = chai.expect
6        , scope = $rootScope.$new()
7        , ctrl = $controller("MyController",{$scope: scope})
8      expect(scope.save).to.be.a("function")
9      expect(scope.items).to.be.a("array")
10      expect(scope.items.length).to.equal(3)
11    }))
12  })
13})

MyController.js

1define(["angular","ng-socket-io"],function(ng){
2  var app = ng.module("app",["btford.socket-io"])
3  app.controller("MyController",["$scope","socket",function($scope,socket){
4    //load items now
5    $scope.items = []
6    socket.emit("loadItems",{},function(res){
7      $scope.items = res.res
8    })
9    //setup functions
10    $scope.save = function(){}
11  }])
12})

Example test using Jasmine

Test.js

1describe('Controller: socketController', function () {
2
3    // load the controller's module
4    beforeEach(module('app'));
5
6    var socketController,
7      notify,
8      scope;
9
10    // Initialize the controller and a mock scope
11    beforeEach(inject(function ($controller, $rootScope, _notify_) {
12      scope = $rootScope.$new();
13      notify = _notify_;
14      socketController = $controller('socketController', {
15        $scope: scope
16      });
17
18    }));
19
20    it('The scope.items should change somehow', function() {
21      expect(scope.items.length).toEqual(0);
22      notify.receive('loadItems',{res: ['1','2','3']} )
23      expect(scope.items.length).toEqual(3);
24    });
25
26  });

1'use strict';
2
3angular.module('app')
4  .controller('socketController', function ($scope, notify) {
5    // As first step to unit-test the socket, what we are
6    // going to do it is to try mocking an error, and changing
7    // a variable.
8    // This I hope it's easy enough to get started. It is not easy.
9
10
11    $scope.items = []
12    notify.on("loadItems", function(res){
13      $scope.items = res.res
14    });
15  });

Todo

• Usage with sinon.js for spies
• Mocking responses

Note Please see https://github.com/btford/angular-socket-io for library usage.

Changelog

1.2.0

• Merge pull reuqest #10 adding a prefix and forward option
• Update to latest dependencies
• Publish on NPM

1.1.1

• Add forward support

1.1.0

• .receive will acknowledge any .emit events with a callback as the last parameter

1.0.0

• Upgraded to work with latest angular.
• Use 0.1.0 with older versions of angularjs.
• Add once support

0.1.0

• Fixed issue interface with the latest angular package.

0.0.1

• Initial Release