Angular/Mocha/Chai - 單元測試初始化​​控制器？

Question

我們剛剛開始在我們的Angular應用程序中進行單元測試，我們正在使用業力/摩卡/ chai框架進行單元測試。我對我們定義的各種服務和工廠進行了一些基本的單元測試，單元測試的效果很好。但是現在我們要測試一些控制器並評估控制器正在修改的範圍變量。

這裏是一個這樣的控制器的一個示例：

angular.module('App').controller('myCtrl', ['$scope', 'APIProxy', 
    function ($scope, APIProxy) { 
     $scope.caseCounts = {caseCount1: 0, caseCount2: 0}; 

     $scope.applyCounts = function() { 
      $scope.caseCounts.caseCount1 = {...some case count logic...} 
      $scope.caseCounts.caseCount2 = {...some case count logic...} 
     }; 

     APIProxy.getAll().then(function (data) { 
      {...do a bunch of stuff...} 
      $scope.data = data; 
      $scope.applyCounts(); 
     }); 
    }] 
); 

現在，當我單元測試我想只是一個簡單的開始「做的$ scope.caseCounts具有值> 0，則我將從那裏建造。但是，如何使控制器導致APIProxy服務運行以及如何處理數據的最終返回並不明顯。我們已經嘗試了$ scope.getStatus（）和$ scope.apply（）以及其他一些東西，但是我覺得我們離開了這個標記，並且我們從根本上失去了一些關於如何去做這件事的東西。

目前我們的控制器測試儀的樣子：

describe("myCtrl unit tests",function(){ 
    beforeEach(module('App')); 

    var ctrl, APIProxy; 

    beforeEach(inject(function ($rootScope, $controller, _APIProxy_) 
     { 
      $scope = $rootScope.$new(); 
      APIProxy = _APIProxy_; 
      ctrl = $controller('myCtrl', {$scope: $scope, APIProxy: APIProxy}); 
    })); 

    it('Loads data correctly', function() { 
     expect(ctrl).to.not.be.undefined; 
     //??? what else do we do here to fire the getAll function in controller? 
    }); 
}); 

Answer 1

它通常最好單獨測試服務和控制器。

要測試該服務，您可以用$ httpBackend嘲笑XHR請求：

https://docs.angularjs.org/api/ngMock/service/$httpBackend

檢測控制器，你可以簡單地提供的，而不是實際的服務嘲笑值時，你initalize控制器

APIProxy = {'mocked':'data'}; 
ctrl = $controller('myCtrl', {$scope: $scope, APIProxy: APIProxy}); 

或者更一般地，嘲笑你的模塊中的任何供應商：

module(function($provide) { 
    $provide.constant('ab','cd'); 
    $provide.value('ef', 'gh'); 
    $provide.service('myService', function() { }); 
}); 

這將覆蓋引用爲控制器中的依賴關係的'myService'（如果有的話）。如果你直接需要它，你就可以把它注射過：

var myService; 
beforeEach(inject(function (_myService_) { 
    myService = _myService_; 
})); 

如果需要APIProxy返回一個承諾，你也能與 https://docs.angularjs.org/api/ng/service/$q 嘲笑它和解決，如：

var deferred = $q.defer(); 
deferred.resolve({'mocked':'data'}); 
return deferred.promise; 

如果你想一起測試它們，你可以對你調用的API函數進行間諜，並讓間諜返回一個已解決的承諾。