AngularJS inject service mock inside service tests

Question

I have been trying to test a service to no avail for some time now and was hoping for some help. Here is my situation:

I have a service looking a little like this

myModule.factory('myService', ['$rootScope', '$routeParams', '$location', function($rootScope, $routeParams, $location) {

  var mySvc = {
    params: {}
  }

  // Listen to route changes.
  $rootScope.$on('$routeUpdate', mySvc.updateHandler);

  // Update @params when route changes
  mySvc.updateHandler = function(){ ... };

  ...
  ...

  return mySvc;

}]);

And I want to mock the services injected into 'myService' before the service gets injected into my tests so I can test the initialization code below

  var mySvc = {
    params: {}
  }

  // Listen to route changes.
  $rootScope.$on('$routeUpdate', mySvc.updateHandler);

I am using Jasmine for tests and mocks. This is what I came up with for now

describe('myService', function(){
  var rootScope, target;
  beforeEach(function(){
    rootScope = jasmine.createSpyObj('rootScope', ['$on']);

    module('myModule');
    angular.module('Mocks', []).service('$rootScope', rootScope );
    inject(function(myService){
      target = myService;
    });        
  });

  it('should be defined', function(){
    expect(target).toBeDefined();
  });

  it('should have an empty list of params', function(){
    expect(target.params).toEqual({});
  });

  it('should have called rootScope.$on', function(){
    expect(rootScope.$on).toHaveBeenCalled();
  });
});

This doesn't work though. My rootscope mock is not replacing the original and the Dependency Injection doc is confusing me more than anything.

Please help

Guillaume Babin · Accepted Answer · 2013-04-16 13:52:32Z

7

I would spy on the actual $rootScope instead of trying to inject your own custom object.

var target, rootScope;
beforeEach(inject(function($rootScope) {
  rootScope = $rootScope;

  // Mock everything here
  spyOn(rootScope, "$on")
}));

beforeEach(inject(function(myService) {
  target = myService;
}));

it('should have called rootScope.$on', function(){
  expect(rootScope.$on).toHaveBeenCalled();
});

I've tested this in CoffeScript, but the code above should still work.

answered Apr 16, 2013 at 13:52

Guillaume Babin

1162 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abe Dadoun Over a year ago

Thanks a lot! Worked like a charm. I can't believe I didn't try that before.

blackmind Over a year ago

I had to add change spyOn(rootScope, "$on") to spyOn(rootScope, "$on").andCallThrough(); but worked great and got me going in the right direction.

felipekm · Accepted Answer · 2013-10-31 17:30:16Z

0

You could create a RootController and then inject it:

inject(function(myService, $controller){
  target = myService;
  $controller('rootController', {
        $scope : $rootScope.$new(),
        $rootScope : myService
  });
});

With this approach you can access $rootScope functions from your 'myService'; Such 'myService.$on()'

I just made it, let me know if help is needed.

answered Oct 31, 2013 at 17:30

felipekm

2,9305 gold badges34 silver badges45 bronze badges

Collectives™ on Stack Overflow

AngularJS inject service mock inside service tests

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related