使用Angular Service的Angular控制器的單元測試

Question

我正在嘗試為角度控制器編寫單元測試，其中從服務調用中為變量分配值。

我可以弄清楚直到它調用json的方式，但是當我嘗試調用api時，我遇到了錯誤。我不確定如何將我的服務調用映射到測試中。

控制者

var vm = this; 
vm.creationDate = 8; // test passed
vm.mainServiceNumber = MainService.getNumber();// test passed
vm.addNumberFunction = function(a, b){// test passed
  vm.sumOfTwoNumbers = MainService.addNumbers(a, b);
}
MainService.getNumberFromJson().then(function(response){// test failed
  vm.numberFromJson = response;
})

var id =10;
vm.getNumberFunction = function(id){// test failed
  MainService.getNumberJsonFunction(id).then(function(response){
    vm.numberFromJsonFunction = response;
  })

}

服務

var service = this; 
service.getNumber = function(){
  return 8;
}
service.addNumbers = function(a, b){
  return a+b;
}
service.getNumberFromJson = function(){
  var num = {};
  num = $q.defer();
  num.resolve(7);
  return num.promise;
}

service.getNumberJsonFunction = function(id){
  var deferred = {};
  deferred = $q.defer();
  deferred.resolve(10);
  return deferred.promise;
}

測試用例

var vm;
var MainService;

beforeEach(module('myApp'));
beforeEach(inject(function(_$controller_, _MainService_) {

  vm = _$controller_('MainController');
  MainService = _MainService_;


}));

/*it('should have a timestamp creation date', function() {
  expect(vm.creationDate).toEqual(jasmine.any(Number));
});*/

it('should have a value', function() {
  expect(vm.creationDate).toEqual(8);
});

it('should get a value from service', function() {
  expect(vm.mainServiceNumber).toEqual(8);
});

it('should get a value from service after addition', function() {
  vm.addNumberFunction(3, 3);
  expect(vm.sumOfTwoNumbers).toEqual(6);
});

it('should get a value from service after a service call without passing  params', function() { //Test Failed
  expect(vm.numberFromJson).toEqual(7); //Expected undefined to equal 7.
});

it('should get a value from service after a service call passing params', function() {// Test Failed
  vm.getNumberFunction(10)
  expect(vm.numberFromJsonFunction).toEqual(10);//Expected undefined to equal 10.
});

我刪除了所有測試代碼，例如spyon，$ http，以保持代碼的簡潔明了。

我正在使用https://github.com/Swiip/generator-gulp-angular進行angular項目的基本設置

Answer 1

以下是成功測試案例的日子。

describe('controllers', function(){
var vm;
var MainService;
var $timeout;

beforeEach(module('myApp'));
beforeEach(inject(function(_$controller_,_$timeout_, _MainService_) {

  vm = _$controller_('MainController');
  spyOn(_MainService_, 'getNumberFromJson').and.returnValue(7);
  spyOn(_MainService_, 'getNumberJsonFunction').and.callThrough();
  $timeout = _$timeout_;

}));

/*it('should have a timestamp creation date', function() {
  expect(vm.creationDate).toEqual(jasmine.any(Number));
});*/

it('should have a value', function() {
  expect(vm.creationDate).toEqual(8);
});

it('should get a value from service', function() {
  expect(vm.mainServiceNumber).toEqual(8);
});

it('should get a value from service after addition', function() {
  vm.addNumberFunction(3, 3);
  expect(vm.sumOfTwoNumbers).toEqual(6);
});

it('should get a value from service after a service call without passing params', function() {
  $timeout.flush();
  expect(vm.numberFromJson).toEqual(7);
});

it('should get a value from service after a service call passing params', function() {
  vm.getNumberFunction(7)
  $timeout.flush();
  expect(vm.numberFromJsonFunction).toEqual(7);
});

});