angular.js如何嘲笑（或存根）在每个测试XHR请求

本文介绍了angular.js如何嘲笑（或存根）在每个测试XHR请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在角JS单元测试，我想成立XHR响应每个试验（在它办法），而不是在beforeEach方法，但似乎不工作？

此工作

 描述（'ExampleListCtrl'，函数（）{
  变量$范围，$ httpBackend;  beforeEach（注（功能（_ $ httpBackend_，$ rootScope，$控制器）{
    $ httpBackend = _ $ httpBackend_;
    。$ httpBackend.expectGET（'范例'）响应（[]）; //＆LT; ---这ONE
    $控制器（ExampleListCtrl，{$范围：$范围= $ rootScope $新的（）}）;
  }））;  它（'应该创建实例0例如牵强'，函数（）{
    预计（$ scope.examples）.toBeUndefined（）;
    $ httpBackend.flush（）;
    期待（$ scope.examples）.toEqual（[]）;
  }）;}）;

结果

 执行的8成功的8（0.366秒/ 0.043秒）

但这种失败，错误当我移动expectGet方法每个方法。我不知道为什么。

 描述（'ExampleListCtrl'，函数（）{
  变量$范围，$ httpBackend;  beforeEach（注（功能（_ $ httpBackend_，$ rootScope，$控制器）{
    $ httpBackend = _ $ httpBackend_;
    $控制器（ExampleListCtrl，{$范围：$范围= $ rootScope $新的（）}）;
  }））;  它（'应该创建实例0例如牵强'，函数（）{
    。$ httpBackend.expectGET（'范例'）响应（[]）; //＆LT; ---搬到这里
    期待（$ scope.examples）.toBeUndefined（）;
    $ httpBackend.flush（）;
    期待（$ scope.examples）.toEqual（[]）;
  }）;
}）;

以下是错误

  ....
在/Users/me/app/test/unit/controllers/ExampleListCtrlSpec.js:3:1
      错误：没有挂起请求刷新
在错误（小于匿名＆GT;）
在功能。$ httpBackend.flush（/Users/me/app/test/lib/angular/angular-mocks.js:1171:34）
在空＆LT;＆匿名GT; （/Users/me/app/test/unit/controllers/ExampleListCtrlSpec.js:14:18）

---- ----编辑

按照下面的意见，我提出了从控制器的beforeEach以及改变测试这样的，这样我可以测试$ httpBackend.expectGET不止一次。

 描述（'ExampleListCtrl'，函数（）{
  变量$范围，$ rootScope，$ httpBackend;  beforeEach（注（功能（_ $ httpBackend_，$ rootScope，$控制器）{
    $ httpBackend = _ $ httpBackend_;
    控制器= $控制器;
    $范围= $ rootScope $新的（）。
  }））;  它（'应该创建0例如，从XHR获取实例模式'，函数（）{
    。$ httpBackend.expectGET（'范例'）响应（[]）;
    控制器（ExampleListCtrl，{$范围：$范围}）;
    $ httpBackend.flush（）;
    预计（$ scope.examples）.toEqual（[]）;
  }）;}）;

解决方案

这是因为，一旦你实例化控制器，它提取 $ HTTP ，因此， $ httBackend 。因此，所有的期望应前需要它使。

如果你想将你的 $ httpBackend.expectGet 来规范（是块），那么你需要移动你的 $控制器（ExempleListCtrl，... 为好，预期。

In angular js unit test, I wanted to set xhr response to each test(in "it" method"), not in beforeEach method, but it seems not working.?

This works

describe('ExampleListCtrl', function(){
  var $scope, $httpBackend;

  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
    $httpBackend = _$httpBackend_;
    $httpBackend.expectGET('examples').respond([]);   // <--- THIS ONE
    $controller(ExampleListCtrl, {$scope: $scope = $rootScope.$new()});
  }));

  it('should create "examples"  with 0 example fetched', function() {
    expect($scope.examples).toBeUndefined();
    $httpBackend.flush();
    expect($scope.examples).toEqual([]);
  });

});

result

Executed 8 of 8 SUCCESS (0.366 secs / 0.043 secs)

But this fails with error when I move expectGet method to each method. I don't know why.

describe('ExampleListCtrl', function(){
  var $scope, $httpBackend;

  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
    $httpBackend = _$httpBackend_;
    $controller(ExampleListCtrl, {$scope: $scope = $rootScope.$new()});
  }));

  it('should create "examples"  with 0 example fetched', function() {
    $httpBackend.expectGET('examples').respond([]);  // <--- MOVED TO HERE
    expect($scope.examples).toBeUndefined();
    $httpBackend.flush();
    expect($scope.examples).toEqual([]);
  });
});

Here is the error

....
at /Users/me/app/test/unit/controllers/ExampleListCtrlSpec.js:3:1
      Error: No pending request to flush
at Error (<anonymous>)
at Function.$httpBackend.flush (/Users/me/app/test/lib/angular/angular-mocks.js:1171:34)
at null.<anonymous> (/Users/me/app/test/unit/controllers/ExampleListCtrlSpec.js:14:18)

---- Edited ----

Following the advice below, I have moved the controller out of beforeEach, and changed test like this, so that I can test $httpBackend.expectGET more than once.

describe('ExampleListCtrl', function(){
  var $scope, $rootScope, $httpBackend;

  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
    $httpBackend = _$httpBackend_;
    controller = $controller;
    $scope = $rootScope.$new();
  }));

  it('should create "examples" model with 0 example fetched from xhr', function() {
    $httpBackend.expectGET('examples').respond([]);
    controller(ExampleListCtrl, {$scope: $scope});
    $httpBackend.flush();
    expect($scope.examples).toEqual([]);
  });

});

解决方案

This happens because once you instantiate your controller, it fetches $http and, thus, $httBackend. So, all expectations shall be made prior to requiring it.

If you wish to move your $httpBackend.expectGet to the spec (it block) then you need to move your $controller(ExempleListCtrl, ... as well, after the expectations.

这篇关于angular.js如何嘲笑（或存根）在每个测试XHR请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！