如何在单元测试AngularJS控制器时模拟网络延迟？

Question

我正在使用ngMock模块中的$httpBackend服务来模拟GET请求。从AngularJS文档中，这是一个示例控制器：

// The controller code
function MyController($scope, $http) {
  var authToken;

  $http.get('/auth.py').success(function(data, status, headers) {
    authToken = headers('A-Token');
    $scope.user = data;
  });

  $scope.saveMessage = function(message) {
    var headers = { 'Authorization': authToken };
    $scope.status = 'Saving...';

  $http.post('/add-msg.py', message, { headers: headers } ).success(function(response) {
    $scope.status = '';
  }).error(function() {
    $scope.status = 'ERROR!';
  });
  };
}

而且，这是相应的Jasmine测试规范：

// testing controller
describe('MyController', function() {
  var $httpBackend, $rootScope, createController;

  beforeEach(inject(function($injector) {
   // Set up the mock http service responses
   $httpBackend = $injector.get('$httpBackend');
   // backend definition common for all tests
   $httpBackend.when('GET', '/auth.py').respond({userId: 'userX'}, {'A-Token': 'xxx'});

   // Get hold of a scope (i.e. the root scope)
   $rootScope = $injector.get('$rootScope');
   // The $controller service is used to create instances of controllers
   var $controller = $injector.get('$controller');

   createController = function() {
     return $controller('MyController', {'$scope' : $rootScope });
   };
 }));


 afterEach(function() {
   $httpBackend.verifyNoOutstandingExpectation();
   $httpBackend.verifyNoOutstandingRequest();
 });


 it('should fetch authentication token', function() {
   $httpBackend.expectGET('/auth.py');
   var controller = createController();
   $httpBackend.flush();
 });


 it('should send msg to server', function() {
   var controller = createController();
   $httpBackend.flush();

   // now you don’t care about the authentication, but
   // the controller will still send the request and
   // $httpBackend will respond without you having to
   // specify the expectation and response for this request

   $httpBackend.expectPOST('/add-msg.py', 'message content').respond(201, '');
   $rootScope.saveMessage('message content');
   expect($rootScope.status).toBe('Saving...');
   $httpBackend.flush();
   expect($rootScope.status).toBe('');
 });

 it('should send auth header', function() {
   var controller = createController();
   $httpBackend.flush();

   $httpBackend.expectPOST('/add-msg.py', undefined, function(headers) {
     // check if the header was send, if it wasn't the expectation won't
     // match the request and the test will fail
     return headers['Authorization'] == 'xxx';
   }).respond(201, '');

   $rootScope.saveMessage('whatever');
     $httpBackend.flush();
   });
 });

如上所述，当执行测试时，模拟请求立即响应。我想在模拟GET请求上设置延迟。这个可能吗？我有一种感觉需要使用$timeout服务来实现这个目的。

奖励问题：设置这样的延迟是否存在任何缺点？在AngularJS单元测试中这样做是否合理？

- user396070

---

关于奖励问题：http://superuser.com/questions/330501/how-can-i-simulate-a-slow-connection-or-limit-the-bandwidth-that-firefox-can-us 我认为这不是你想在单元测试中拥有的东西。 - Eduard Gamonal

@EduardGamonal：我并不是真的想要限制浏览器的速度；Angular 的 window.setTimeout 应该已经足够了。 - user396070

是的，您可以使用超时，但您应该测试两个方面：小带宽和高延迟。您可以使用iprelay + firefox throttle来进行测试。我认为单元测试是用于测试组件的输入/输出，而不是应用程序在恶劣网络条件下的可靠性。 - Eduard Gamonal

啊，我现在明白你的意思了。 - user396070

Answer 1

创建一个针对 $httpBackend 的装饰器，像这个链接中的例子一样：http://endlessindirection.wordpress.com/2013/05/18/angularjs-delay-response-from-httpbackend/ 将此代码放入你的 app.js 中，以模拟或透传响应后延迟 700ms：

.config(function($provide) {
    $provide.decorator('$httpBackend', function($delegate) {
        var proxy = function(method, url, data, callback, headers) {
            var interceptor = function() {
                var _this = this,
                    _arguments = arguments;
                setTimeout(function() {
                    callback.apply(_this, _arguments);
                }, 700);
            };
            return $delegate.call(this, method, url, data, interceptor, headers);
        };
        for(var key in $delegate) {
            proxy[key] = $delegate[key];
        }
        return proxy;
    });
})

奖励答案：我认为时间不是你在单元测试中需要测试的东西。但是你肯定需要测试服务器错误，这就是为什么模拟http很方便的原因。

当我进行原型设计时，我会像这样使用延迟，这也是一种有效的情况。

- André Werlang