單元測試數據從服務抵達控制器（茉莉花）

Question

這裏是我的代碼部分：

angular.module('mine',[]).factory('MyFactory', ['$http','$q', function 
    MyFactory($http,$q) { 
      return { 
       getData: function() {  
        var deferred = $q.defer(), 
        url = "http://...";   

       $http.jsonp(url) 
       .then(    
        function (response) { 
         deferred.resolve(response.data); 
        }, 
        function (error) { 
         return $q.reject('Error retrieving data'); 
        } 
       ); 

       return deferred.promise; 
      } 
     }; 
}]); 


function MyController(MyFactory) { 

    var self = this; 

    self.getData= function() { 
     MyFactory.getData().then(
      function(result) { 
       self.contacts = result; 
      }, 
      function(error) { 
       console.log('Error retrieving data: ', error); 
      } 
     ); 
    }; 

    self.getData(); 
} 

angular.module('mine').component('myComponent', {  
    templateUrl: '..', 
    controller: MyController 
    }); 

我試圖單元測試，如果從工廠的數據正確地去控制器。以下是我使用Jasmine的單元測試代碼：

describe('component',() => { 
    let $componentController,contactsList,ctrl,$q,$rootScope;  

    beforeEach(angular.mock.module('mine'));  


    beforeEach(inject((_$componentController_,_MyFactory_, _$q_, _$rootScope_) => { 
    $componentController = _$componentController_; 

    ctrl = $componentController('myComponent',null); 
    $q = _$q_; 
    contactsList = _MyFactory_; 
    $rootScope = _$rootScope_;  
    })); 


it('should ... ', function() {  
     spyOn(contactsList, "getData").and.returnValue(
      $q.when({ 
      message: 'awesome message' 
      })); 

    ctrl.getData(); 
    $rootScope.$apply(); 
    expect(ctrl.contacts.message).toBe('awesome message'); 
    }); 
}); 

由於某些原因，上述測試未運行;我收到以下錯誤：Possibly unhandled rejection: Error retrieving data thrown。你有什麼想法，爲什麼？哪裏不對？

Answer 1

作爲測試中的第二個參數，您應該注入MyFactory到$componentController。因此，而不是這樣的：

ctrl = $componentController('myComponent',null); 

使用本：

ctrl = $componentController('myComponent', { 
      MyFactory: _MyFactory_ 
     }); 

Answer 2

angular.module('mine', []).factory('MyFactory', ['$http', '$q', function 
 
    MyFactory($http, $q) { 
 
    return { 
 
     getData: function() { 
 
     var deferred = $q.defer(), 
 
      url = "http://google.com"; 
 

 
     $http.jsonp(url) 
 
      .then(
 
      function(response) { 
 
       deferred.resolve(response.data); 
 
      }, 
 
      function(error) { 
 
       return $q.reject('Error retrieving data'); 
 
      } 
 
     ); 
 

 
     return deferred.promise; 
 
     } 
 
    }; 
 
    } 
 
]); 
 

 
function MyController(MyFactory) { 
 
    this.getData = function() { 
 
    MyFactory.getData().then(
 
     function(result) { 
 
     this.contacts = result; 
 
     }.bind(this), 
 
     function(error) { 
 
     console.log('Error retrieving data: ', error); 
 
     } 
 
    ); 
 
    }; 
 

 
    this.getData(); 
 
} 
 

 
angular.module('mine').component('myComponent', { 
 
    controller: MyController 
 
}); 
 

 
describe('component',() => { 
 
    let $componentController, contactsList, $q, $rootScope, ctrlFactory; 
 

 
    beforeEach(angular.mock.module('mine')); 
 

 

 
    beforeEach(inject((_$componentController_, _MyFactory_, _$q_, _$rootScope_) => { 
 
    $componentController = _$componentController_; 
 
    ctrlFactory =() => { 
 
     return $componentController('myComponent', null, { 
 
     MyFactory: _MyFactory_ 
 
     }); 
 
    } 
 
    $q = _$q_; 
 
    contactsList = _MyFactory_; 
 
    $rootScope = _$rootScope_; 
 
    })); 
 

 
    it('should ... ', function() { 
 
    const message = 'awesome message' 
 
    spyOn(contactsList, "getData").and.returnValue(
 
     $q.when({ 
 
     message 
 
     })); 
 
    const ctrl = ctrlFactory() 
 
    ctrl.getData(); 
 
    $rootScope.$apply(); 
 
    expect(ctrl.contacts.message).toBe(message); 
 
    }); 
 
});

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" /> 
 
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-mocks.js"></script>