如何使用茉莉花测试 .then（单元测试 AngularJS 中的功能答案

【问题标题】：How to test .then(function in Unit Testing AgularJS with jasmine如何使用茉莉花测试 .then（单元测试 AngularJS 中的功能
【发布时间】：2015-12-10 22:08:51
【问题描述】：

我不清楚如何在单元测试中使用 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().then(function ...

我尝试使用下面的代码对其进行测试

'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.

怎么了？

【问题讨论】：

标签： angularjs unit-testing controller jasmine karma-jasmine

【解决方案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();
});

【讨论】：