37

我正在尝试开始为我的 Angular 应用程序编写单元测试并很快遇到了一个停止块，因为我不确定如何以可测试的方式准确地模拟我的服务。
有没有办法模拟 REST 调用，否则我似乎需要在我的测试中镜像我的服务中的所有内容，这对我来说似乎不正确，但我对测试写作相当陌生，所以也许这就是它应该的方式来完成。任何帮助将不胜感激。

我的服务如下：

angular.module('resources.users', ['ngResource'])
.factory('User', function($resource) {
   var resource = $resource('/api/index.php/users/:username', {}, {
      'update': {method: 'PUT'}
   });

   resource.getUser = function(username, successCb) {
      return resource.query({username: username}, successCb);
   };

   return resource;
});

到目前为止，我的测试包括：

describe('User', function() {
    var mockUserResource;
    beforeEach(module('resources.users'));
    beforeEach(function() {
        mockUserResource = sinon.stub({
            getUser: function(username) {
                mockUserResource.query({username: username});
            },
            query: function() {}
        });
        module(function($provide) {
            $provide.value('User', mockUserResource);
        })
   });
   describe('getUser', function() {
      it('should call getUser with username', inject(function(User) {
          User.getUser('test');
          expect(mockUserResource.query.args[0][0]).toEqual({username: 'test'});
      }));
   })
});
4

2 回答 2

54

您可以像这样模拟 ngResource 发出的请求：

describe('User', function () {
    var mockUserResource, $httpBackend;
    beforeEach(angular.mock.module('myApp'));

    beforeEach(function () {
        angular.mock.inject(function ($injector) {
            $httpBackend = $injector.get('$httpBackend');
            mockUserResource = $injector.get('User');
        })
    });

    describe('getUser', function () {
        it('should call getUser with username', inject(function (User) {
            $httpBackend.expectGET('/api/index.php/users/test')
                .respond([{
                username: 'test'
            }]);

            var result = mockUserResource.getUser('test');

            $httpBackend.flush();

            expect(result[0].username).toEqual('test');
        }));

    });
});

Demo

于 2013-08-15T19:17:52.223 回答
31

zsong 的回答极大地帮助了我理解这一点，但我想扩展它的工作原理。如果它被编辑，我在这里再次列出代码：

describe('User', function () {
    var mockUserResource, $httpBackend;
    beforeEach(angular.mock.module('myApp'));

    beforeEach(function () {
        angular.mock.inject(function ($injector) {
            $httpBackend = $injector.get('$httpBackend');
            mockUserResource = $injector.get('User');
        })
    });

    describe('getUser', function () {
        it('should call getUser with username', inject(function (User) {
            $httpBackend.expectGET('/api/index.php/users/test')
                .respond([{
                username: 'test'
            }]);

            var result = mockUserResource.getUser('test');

            $httpBackend.flush();

            expect(result[0].username).toEqual('test');
        }));

    });
});

这里发生了什么？

1

beforeEach(angular.mock.module('myApp'));

我们告诉 Angular 注入器 ( $injectorand angular.mock.inject) 注入myApp模块中定义的东西。您可以将其视为在没有依赖模块的情况下定义模块依赖关系。与如何将myApp模块中定义的东西注入模块中的控制器进行比较angular.module('myOtherApp', ['myApp'])。

2

beforeEach(function () {
    angular.mock.inject(function ($injector) {
        $httpBackend = $injector.get('$httpBackend');
        mockUserResource = $injector.get('User');
    })
});

在每个规范之前，运行function ($injector)注入依赖项的函数。在这种情况下，依赖项 ( $injector) 从参数名称中隐式解析。此代码段的功能等效变体是

beforeEach(function () {
    angular.mock.inject(['$httpBackend', 'User', function ($httpB, User) {
        $httpBackend = $httpB;
        mockUserResource = User;
    }]);
});

在这里，我们明确地声明了依赖关系，并且可以自由使用我们希望的任何参数名称。

3

it('should call getUser with username', inject(function (User) {

同样，测试函数被注入隐式解析的User服务作为参数，尽管它实际上并没有被使用。

请注意，这次inject调用没有包装函数。inject如果规范当前正在运行，则立即调用传递的函数，否则它返回一个包装函数（请参阅注入文档和源代码），因此我们实际上不需要包装函数。因此，我们可以beforeEach像这样编写上面的代码片段：

beforeEach(angular.mock.inject(function ($injector) {
    $httpBackend = $injector.get('$httpBackend');
    mockUserResource = $injector.get('User');
}));
于 2014-08-05T15:43:54.393 回答