javascript - 在 Controller 中模拟 Angular JS 服务调用

Question

我有 Controller :

(function () {
    'use strict';
    angular.module('myApp').controller('myCtrl', function ($scope, myService) {

        // Start -----> Service call: Get Initial Data
        myService.getInitialData().getData(function (featureManagerdata) {
            var serviceData = featureManagerdata;
        }, function (error) {
            showErrorMessage(error, 'getinitialdata');                
        });
    });
}());

这是我的服务:使用 $resource 调用 getInitialData，并将 getData 作为自定义函数。

(function () {
    'use strict';
    angular.module('myApp').factory('myService', ['$resource', myService]);

    function myService($resource) {
        var hostUrl = 'http://x.x.x.x/WebAPIDev';

        function getInitialData() {
            var url = hostUrl + '/featuremanager/allfeatures';
            var options = {
                getData: {
                    method: 'GET',
                    isArray: true
                }
            };
            return $resource(url, {}, options);
        );

        return {
            getInitialData: getInitialData
        };
    }
}());

想要使用 karma-jasmine 测试 Controller 中的服务调用:

测试我的Ctrl:

describe('Test my controller', function() {
    beforeEach(module('myApp'));

    var scope, Ctrl, service;

    angular.module('myApp').service('mockService', function($resource) {
        getInitialData = function() {
            return {
                'featureId': 1
            };
        }
    });

    beforeEach(inject(function(_$controller_, $rootScope, mockService) {
        scope = $rootScope.$new();
        Ctrl = _$controller_('myCtrl', {
            $scope: scope,
            service: mockService
        });
    }));

    it('should test get initial data', function() {
        var response, mockUserResource, $httpBackend, result;

        service.getInitialData().getData(function(data) {
            response = data;
            // verify data
        });
    });
});

这会引发错误，service.getInitialData 不是函数。知道为什么它会抛出错误或任何其他更好的方法来测试服务调用

Answer 1

在 Angular 中，factory 和 service 之间存在一些差异，请查看 Service vs Factory vs Provider in Angular如果您想了解更多信息。

其中之一是工厂返回引用对象，服务返回实例

因此，当您尝试在工厂中定义/模拟函数或属性时，您将返回一个带有属性名称和值的对象，但是在服务中，您应该将其设置为这个。

除此之外，您应该返回一个定义函数 getData 的对象，以便可以在最后一个测试用例中调用它。(否则它将抛出 undefine is not a function 错误)

因此将您的 TestMyCtrl 更新为此，

describe('Test my controller', function() {
    beforeEach(module('myApp'));

    var scope, Ctrl, service;

    angular.module('myApp').service('mockService', function($resource) {
        //set the function to this.
        this.getInitialData = function() {
            //return {
            //    'featureId': 1
            //};
            //return an object which defined getData function.

            return {
                getData: function(func) {
                    var data = {
                        featureId: 1
                    };
                    //do something here if you want.
                    func(data);
                }
            };
        }
    });

    beforeEach(inject(function(_$controller_, $rootScope, mockService) {
        scope = $rootScope.$new();
        Ctrl = _$controller_('myCtrl', {
            $scope: scope,
            service: mockService
        });
    }));

    it('should test get initial data', function() {
        var response, mockUserResource, $httpBackend, result;

        service.getInitialData().getData(function(data) {
            response = data;
            // verify data
        });
    });
});

希望这能回答您的问题。 :)