如何在角度单元测试中模拟服务的依赖关系？

Question

I'm using karma, angular and mocha.

The MyServices module I want to inject. It's addThing method also calls a $localStorage provider and I want to test that the $localStorage.setItem method has been implicitly called when I call MyServices.addThing(data)

Here's my code:

describe('MyServices', function() {
  var $q;
  var $rootScope;
  var $scope;
  var MyServices;
  var $timeout;
  var $httpBackend;

  // inject modules
  beforeEach(function(){
    module('my.stuff');

    var _LocalStorage_ = {
      setItem: function(){
        return 'foo';
      }
    };

    // mock the dependencies of the module we are testing
    module(function ($provide) {
      $provide.value('$localStorage', _LocalStorage_); //here is where the error occurs
    });
  });

  beforeEach(inject(function (_$q_, _$rootScope_, _$timeout_, _MyServices_, _$httpBackend_) {
    $q = _$q_;
    $rootScope = _$rootScope_;
    $timeout = _$timeout_;
    MyServices = _MyServices_;
    $httpBackend = _$httpBackend_;
    $scope = $rootScope.$new();
  }));

  it.only('should call a method and access localStorage', function(){
    var spyAdd = sinon.spy(MyServices, 'addThing');
    var spySetItem = sinon.spy($localStorage, 'setItem');

    MyServices.addThing({ name: 'Thing' });

    expect(spyAdd.callCount).to.equal(1);
    expect(spySetItem.callCount).to.equal(1);
  })
});

When I run it I get an error that $localStorage is undefined.

Answer 1

you don't have register that fake $localStorage, just use the original one and create a spy on the setItem method.

so remove this

var _LocalStorage_ = {
  setItem: function(){
    return 'foo';
  }
};
module(function ($provide) {
  $provide.value('$localStorage', _LocalStorage_); //here is where the error occurs
});

but inject it here

var $localStorage;
beforeEach(inject(function (_$q_, _$rootScope_, _$timeout_, _MyServices_, _$httpBackend_, _$localStorage_) {
  $q = _$q_;
  $rootScope = _$rootScope_;
  $timeout = _$timeout_;
  MyServices = _MyServices_;
  $httpBackend = _$httpBackend_;
  $scope = $rootScope.$new();
  $localStorage = _$localStorage_; //here
}));

since you have already created a spy on the method, so nothing needs to be changed in the test.

Answer 2

Try to declare LocalStorage outside of your beforeEach. Btw, you don't need the _, you can just call it LocalStorage.

I also recommend downloading SinonJS because it has a bunch of useful methods when spying or mocking dependencies.