Tests Failing due to socket io does not exist

Question

io with my own angular service. I'm using yeoman and angular workflow: http://yeoman.io/ I need to make io recognised by karma so the test does not fail?

'use strict';

angular.module('publicApp')
    .factory('socket', function ($rootScope) {
    var socket = io.connect();

    return {
        on: function on(eventName, callback) {
            socket.on(eventName, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function emit(eventName, data, callback) {
            socket.emit(eventName, data, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            });
        }
    };
});

angular.module('publicApp')
    .controller('MainCtrl', function ($scope, socket) {
    $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'];
    socket.on('person:added', function (data) {
        $scope.person = data;
    });
});
angular.module('publicApp', [])
    .config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    })
        .otherwise({
        redirectTo: '/'
    });
});
'use strict';

describe('Controller: MainCtrl', function () {

    // load the controller's module
    beforeEach(module('publicApp'));

    var MainCtrl,
    scope;

    // Initialize the controller and a mock scope
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        MainCtrl = $controller('MainCtrl', {
            $scope: scope
        });
    }));

    it('should attach a list of awesomeThings to the scope', function () {
        expect(scope.awesomeThings.length).toBe(3);
    });
});

io is part of window, I've tried using angulars $window object but had no luck. The error I'm getting from karma is:

Running "karma:unit" (karma) task
WARN [karma]: Port 8080 in use
INFO [karma]: Karma v0.10.2 server started at http://localhost:8081/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/michaeljames/Documents/Projects/StackOverflow/public/test/mock/**/*.js" does not match any file.
INFO [Chrome 29.0.1547 (Mac OS X 10.8.2)]: Connected on socket LmbsWIC-97zMEi76FmiE
Chrome 29.0.1547 (Mac OS X 10.8.2) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED
    ReferenceError: io is not defined
        at Object.$get (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/scripts/services/socket.js:5:16)
        at Object.invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3000:28)
        at /Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2838:37
        at getService (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2960:39)
        at invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2978:13)
        at Object.instantiate (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3012:23)
        at /Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:4981:24
        at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:14:16)
        at Object.invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3000:28)
        at workFn (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular-mocks/angular-mocks.js:1795:20)
    Error: Declaration Location
        at window.jasmine.window.inject.angular.mock.inject (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular-mocks/angular-mocks.js:1781:25)
        at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:12:14)
        at /Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:3:1
    TypeError: Cannot read property 'length' of undefined
        at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:20:31)
Chrome 29.0.1547 (Mac OS X 10.8.2): Executed 1 of 1 (1 FAILED) ERROR (0.306 secs / 0.067 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

Answer 1

I'd mock the entire socket service, since this is a means of going to some sort of server and these unit tests should be about testing your UI code only (the reason for $httpBackend in ngMock).

Here are some clever guys that figured it out: https://github.com/btford/angular-socket-io-seed/issues/4#issuecomment-14505212.

Answer 2

In your karma.config.js files section inject the server side socket.io.js

files: [
  'test/unit/**/*.js',
  'any/other/included/files/*.js',
  'http://localhost:8080/socket.io/socket.io.js'   //just only inject it
],