如何測試。然後（功能單元測試AgularJS茉莉花

Question

我不清楚如何在單元測試中使用SpyOn ...

我有以下控制器

(function() { 
    'use strict'; 
    angular.module('otpConfigureDatasets').controller('otpActivityCardController', otpActivityCardController); 

    otpActivityCardController.$inject = ['$location', '$state', 'otpWebMapApp', 'otpWMDeltaTracker', 'otpWMStateCache', '$scope', '$timeout', 'otpActivityCardService', 'otpControlCenterData']; 

    function otpActivityCardController($location, $state, otpWebMapApp, otpWMDeltaTracker, otpWMStateCache, $scope, $timeout, otpActivityCardService, otpControlCenterData) { 
     var vm = this; 

     vm.cards = []; 

     otpActivityCardService.getActivityCards().then(function (resolve) { 
      vm.cards = resolve; 
     }); 

     //.....Some code .... 

})(); 

我需要測試在GetActivityCards（）。然後（函數...

我試圖測試使用下面的代碼

'use strict'; 

describe('Test controller (activityCard) in Page MyDatasets', function() { 

var MainCtrl, $state, scope, otpWebMapApp, otpWMDeltaTracker, otpWMStateCache, otpActivityCardService, otpControlCenterData; 
var card; 

beforeEach(function() { 
    module('otpConfigureDatasets'); 
}); 

beforeEach(inject(function ($controller, $rootScope, _$state_, _otpWebMapApp_, _otpWMDeltaTracker_, _otpWMStateCache_, _otpActivityCardService_, _otpControlCenterData_) { 
    scope = $rootScope.$new(); 
    scope.$parent = { $parent: { menuParentGroupClick: function menuParentGroupClick() { } } }; 
    MainCtrl = $controller('otpActivityCardController', { 
     $scope: scope 
    }); 
    otpWebMapApp = _otpWebMapApp_; 
    otpWMDeltaTracker = _otpWMDeltaTracker_; 
    otpWMStateCache = _otpWMStateCache_; 
    otpActivityCardService = _otpActivityCardService_; 
    otpControlCenterData = otpControlCenterData; 
})); 

it('Test Function', function() { 

    spyOn(otpActivityCardService, 'getActivityCards'); 

    expect(otpActivityCardService.getActivityCards).toHaveBeenCalled(); 
}); 

}); 

但我把它我得到這個錯誤：

Expected spy getActivityCards to have been called. 
Error: Expected spy getActivityCards to have been called. 

什麼是錯？

Answer 1

你爲「getActivityCards」函數創建了一個間諜，但是你沒有在你的測試中調用它（除非你從這個例子中隱藏了這行代碼）。

當你創建一個Jasmine Spy函數時，你只是「看」這個函數，你可以檢查它是否被調用，你可以模擬它的返回值，你可以檢查它的調用參數也就是說，你可以檢查很多關於函數調用歷史的內容，但是你仍然需要明確地調用函數（或者調用控制器中調用函數的函數）。

那麼，你是間諜的服務，與您正在測試控制器，您的測試應該是這個樣子：

it('Test Function', function() { 

    spyOn(otpActivityCardService, 'getActivityCards'); 

    otpActivityCardService.getActivityCards(); 

    expect(otpActivityCardService.getActivityCards).toHaveBeenCalled(); 
}); 

在一個側面說明，更可檢驗的，您的控制器應該封裝您的服務呼叫在你的控制器的功能，如：

(function() { 
    'use strict'; 
    angular.module('otpConfigureDatasets').controller('otpActivityCardController', otpActivityCardController); 

    otpActivityCardController.$inject = ['$location', '$state', 'otpWebMapApp', 'otpWMDeltaTracker', 'otpWMStateCache', '$scope', '$timeout', 'otpActivityCardService', 'otpControlCenterData']; 

    function otpActivityCardController($location, $state, otpWebMapApp, otpWMDeltaTracker, otpWMStateCache, $scope, $timeout, otpActivityCardService, otpControlCenterData) { 
     var vm = this; 

     vm.cards = []; 

     vm.getCards = function() { 
      otpActivityCardService.getActivityCards().then(function (resolve) { 
       vm.cards = resolve; 
      }); 
     } 
     vm.getCards(); 

     //.....Some code .... 

})(); 

所以，你可以創建一個測試，真正在你的控制器測試功能（因爲你描述你的測試案例的方式，它真的應該是一個服務的測試只）

it('Better test case', function() { 

    spyOn(otpActivityCardService, 'getActivityCards'); 

    MainCtrl.getCards(); 

    expect(otpActivityCardService.getActivityCards).toHaveBeenCalled(); 
});