Question

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

// 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单元测试中这是否合理？

Answer 1

为$ httpBackend创建一个装饰器，如下所示：http://endlessindirection.wordpress.com/2013/05/18/angularjs-delay-response-from-httpbackend/

将此信息放入app.js中，在每次模拟或直通响应期间延迟700毫秒：

.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会派上用场的原因。

我在原型制作时使用这样的延迟，这也是一个有效的场景。

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

1 个答案: