Angular / Mocha / Chai-初始化用於單元測試的控制器嗎？

Question

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

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

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

要測試控制器，您可以在初始化控制器時簡單地提供模擬值而不是實際服務

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函數進行監視，並讓監視返回已解決的Promise。