Javascript Jasmine 控制器测试，预期已调用间谍

Jasmine controller testing, expected spy to have been called

提问by Thomas Weglinski

I have a method defined in AngularJS controller which is called on initialization. I want to test it using Jasmine ("jasmine-core": "^2.3.4", "karma": "^0.12.37"). I follow some tutorials on the Internet and StackOverflow questions, but I cannot find the right answer. Please take a look at this code:

我有一个在 AngularJS 控制器中定义的方法，它在初始化时被调用。我想用 Jasmine ( "jasmine-core": "^2.3.4", "karma": "^0.12.37")测试它。我关注了互联网上的一些教程和 StackOverflow 问题，但我找不到正确的答案。请看一下这段代码：

Controller usersAddUserController:

控制器usersAddUserController：

(function () {
    'use strict';

    angular.module('app.users.addUser')
        .controller('usersAddUserController', ['$scope', 'usersAddUserService', function ($scope, usersAddUserService) {

            usersAddUserService.getCountryPhoneCodes().then(function (phoneCodes) {
                $scope.phoneCodes = phoneCodes;
            });

        }]);
}());

Jasmine test:

茉莉花测试：

(function () {

    'use strict';

    describe('usersAddUserControllerUnitTest', function () {
        var scope, deferred, objectUnderTest, mockedAddUserService;

        beforeEach(module('app'));

        beforeEach(inject(function ($rootScope, $q, $controller) {
            scope = $rootScope.$new();

            function emptyPromise() {
                deferred = $q.defer();
                return deferred.promise;
            }

            mockedAddUserService = {
                getCountryPhoneCodes: emptyPromise
            };

            objectUnderTest = $controller('usersAddUserController', {
                $scope: scope,
                usersAddUserService: mockedAddUserService
            });
        }));

        it('should call getCountryPhoneCodes method on init', function () {
            //when            
            spyOn(mockedAddUserService, 'getCountryPhoneCodes').and.callThrough();

            deferred.resolve();

            scope.$root.$digest();

            //then
            expect(mockedAddUserService.getCountryPhoneCodes).toHaveBeenCalled();
        });

    });
}());

After running the tests, the error message is:

运行测试后，错误消息是：

PhantomJS 1.9.8 (Windows 7 0.0.0) usersAddUserControllerUnitTest should call getCountryPhoneCodes method on init FAILED

    Expected spy getCountryPhoneCodes to have been called.

PhantomJS 1.9.8 (Windows 7 0.0.0) usersAddUserControllerUnitTest 应该在初始化失败时调用 getCountryPhoneCodes 方法

    Expected spy getCountryPhoneCodes to have been called.

I obviously missing something, but I cannot figure out what it is. Any help will be appreciated.

我显然错过了一些东西，但我无法弄清楚它是什么。任何帮助将不胜感激。

采纳答案by Martin

You are spying on the mock after it has been passed into the instantiated controller.

在将模拟传递到实例化控制器后，您正在监视它。

Try this:

尝试这个：

describe('usersAddUserControllerUnitTest', function () {
    var scope, deferred, objectUnderTest, mockedAddUserService, $controller;

    beforeEach(module('app'));

    beforeEach(inject(function ($rootScope, $q, _$controller_) {
        scope = $rootScope.$new();

        function emptyPromise() {
            deferred = $q.defer();
            return deferred.promise;
        }

        mockedAddUserService = {
            getCountryPhoneCodes: emptyPromise
        };

        $controller = _$controller_;
    }));

    function makeController() {    
        objectUnderTest = $controller('usersAddUserController', {
            $scope: scope,
            usersAddUserService: mockedAddUserService
        });
    }

    it('should call getCountryPhoneCodes method on init', function () {
        //when

        spyOn(mockedAddUserService, 'getCountryPhoneCodes').and.callThrough();
        makeController();

        deferred.resolve();

        scope.$root.$digest();

        //then
        expect(mockedAddUserService.getCountryPhoneCodes).toHaveBeenCalled();
    });

});

EDITThanks @juunas for noticing the bug in my solution

编辑感谢@juunas 注意到我的解决方案中的错误

回答by timtos

You can provide the mock like this:

您可以像这样提供模拟：

mockedAddUserService = {
    getCountryPhoneCodes: emptyPromise
};


beforeEach(function () {
    module(function ($provide) {
        $provide.value('usersAddUserService', mockedAddUserService);
    });
});

EDIT:

编辑：

The code should look (as i cannot test it) like this:

代码应该如下所示（因为我无法测试它）：

(function () {
    'use strict';

    describe('usersAddUserControllerUnitTest', function () {        
        beforeEach(module('app'));

        var emptyPromise = function() {
            var deferred = $q.defer();
            return deferred.promise;
        }

        var mockedAddUserService = {
            getCountryPhoneCodes: emptyPromise
        };

        beforeEach(function () {
            module(function ($provide) {
                $provide.value('usersAddUserService', mockedAddUserService);
            });
        });

        var scope;
        beforeEach(inject(function ($rootScope, $q, $controller) {
            scope = $rootScope.$new();
            $controller('usersAddUserController', {
                $scope: scope
            });
        }));

        it('should call getCountryPhoneCodes method on init', function () {
            spyOn(mockedAddUserService, 'getCountryPhoneCodes').and.callThrough();

            scope.$root.$digest();

            expect(mockedAddUserService.getCountryPhoneCodes).toHaveBeenCalled();
        });

    });
}());