Testing a controller that execute a service with $

问题:

I have a controller that use a service, resolve a promise and then set a variable. I want to test if the variable has been set, How I do this?

Service.js

angular
.module('myModule')
.service('MyService',['$resource',function($resource){
  var r =  $resource('/users/:id',{id:'@id'});
  this.post = function(_user){
      return (new r(_user)).$save()
   }
}])

Controller

angular
.module('myModule')
.controller('myCtrl', ['MyService',function(MyService){
  var vm = this;
  vm.value = 0;
  vm.post = function(_user){

      MyService.post(_user).then(function(){
        vm.value = 1;
      });
  };


}])

controller_spec

describe('Test Controller',function(){
  beforeEach(module('myModule'));
  beforeEach(inject(function($controller, MyService){
    this.ctrl = $controller('myCtrl');
  }))

  it('after save value is 1',function(){
    this.ctrl.post({name: 'chuck'});

    //Always this.ctrl.value it's equal to 0
    expect(this.ctrl.value).toBeEqual(1);
  });

});

回答1:

mock the service method and return a promise, then resolve it when you need it.

describe('Test Controller',function(){
  var postDefer;
  beforeEach(module('myModule'));
  beforeEach(inject(function($controller, MyService, $q){
    postDefer = $.defer();
    spyOn(MyService, 'post').and.returnValue(postDefer.promise);
    this.ctrl = $controller('myCtrl', {MyService : MyService});
  }))

  it('after save value is 1',function(){
    this.ctrl.post({name: 'chuck'});

    postDefer.resolve();

    scope.$apply();
    expect(this.ctrl.value).toBeEqual(1);
  });

});