在控制器中模拟 angular js 服务调用

Question

我有控制器：

(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 在控制器中测试服务调用：

TestMyCtrl:

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。

其中一个是 factory return reference Object and service return an 实例

因此，当您尝试在工厂中 define/mock 函数或属性时，您会 return 具有属性名称和值的 Object，但是 在服务中，应该设置为this。

除此之外，您应该 return 一个定义函数 getData 的对象，以便它可以在您的最后一个测试用例中调用。（否则它会抛出 undefine 不是函数 错误)

因此请将您的 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
        });
    });
});

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

在控制器中模拟 angular js 服务调用

Mocking angular js service call in controller

javascript

angularjs

karma-jasmine