angular.js如何嘲笑(或存根)在每个测试XHR请求存根、测试、在每个、angular

2023-09-13 03:09:06 作者:微雨清凉夏己过

在角JS单元测试,我想成立XHR响应每个试验(在它办法),而不是在beforeEach方法,但似乎不工作?

此工作

 描述('ExampleListCtrl',函数(){  变量$范围,$ httpBackend;  beforeEach(注(功能(_ $ httpBackend_,$ rootScope,$控制器){    $ httpBackend = _ $ httpBackend_;    。$ httpBackend.expectGET('范例')响应([]); //< ---这ONE    $控制器(ExampleListCtrl,{$范围:$范围= $ rootScope $新的()});  }));  它('应该创建实例0例如牵强',函数(){    预计($ scope.examples).toBeUndefined();    $ httpBackend.flush();    期待($ scope.examples).toEqual([]);  });}); 
angularjs的 http请求问题

结果

 执行的8成功的8(0.366秒/ 0.043秒) 

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

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

以下是错误

  ....在/Users/me/app/test/unit/controllers/ExampleListCtrlSpec.js:3:1      错误:没有挂起请求刷新在错误(小于匿名>)在功能。$ httpBackend.flush(/Users/me/app/test/lib/angular/angular-mocks.js:1171:34)在空<&匿名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.

 
精彩推荐
图片推荐