首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >用$httpBackend延迟响应

用$httpBackend延迟响应
EN

Stack Overflow用户
提问于 2014-08-18 17:18:37
回答 2查看 3.3K关注 0票数 3

在我看来,在收到API的响应之前,我已经加载了显示的动画。

代码语言:javascript
复制
//Displayed before we've received API response
<p ng-if="vm.vehicles == null">Loading ...</p>

//Displayed once we received response for the API
<table ng-if="vm.vehicles">
    <tr ng-repeat="vehicle.vm.vehicles">...</tr>

为了进行测试,我使用了$httpBackend角度模块。就像这样:

代码语言:javascript
复制
$httpBackend.whenGET('api/vehicles').respond({vehicles: [...]});

问题

我想写一个测试来检查加载动画是否显示。

我试过:

代码语言:javascript
复制
expect(ptor.isElementPresent(By.cssContainingText('p', 'Loading'))).to.eventually.be.true;`

但我不及格。因此,我认为我需要有条件地推迟从$httpBackend得到的响应。

我发现这篇博文是http://endlessindirection.wordpress.com/2013/05/18/angularjs-delay-response-from-httpbackend/

但是,插入配置方法会使我的所有测试失败(我认为因为模板没有及时加载),它会延迟所有响应,因此这并不是我真正需要的。

那么,我怎么才能推迟对那一次电话的回应呢?理想情况下,我只想为了这次测试而推迟它。

EN

回答 2

Stack Overflow用户

发布于 2014-09-28 23:36:39

查看$http的文档,特别是interceptors

这是一个有趣的地方:

response:使用http响应对象调用拦截器。该函数可以自由地修改响应对象或创建一个新对象。函数需要直接返回响应对象,或者作为包含响应或新响应对象的promise返回。

换句话说,您可以拦截响应,而不是立即返回,而是返回一个在超时后返回响应的承诺.

例如柱塞实例

但是在端到端测试的情况下,您必须处理一个$httpBackend对象。

这一点起作用了:

与单元测试不同的是,在端到端测试场景中,或者在用模拟替换了真正的后端api开发应用程序的场景中,某些类别的请求通常需要绕过模拟并发出真正的http请求(例如从when服务器获取模板或静态文件)。若要使用此行为配置后端,请使用passThrough请求处理程序when而不是respond。

翻译:您可以使用.passThrough(),您的拦截器应该可以工作:

代码语言:javascript
复制
$httpBackend.whenGET('api/vehicles').passThrough();

缺点是这将执行实际的请求。

您还可以检查这个非常类似的问题:AngularJS --如何使用ngMockE2E $httpBackend来延迟特定的响应?

票数 0
EN

Stack Overflow用户

发布于 2015-02-01 20:38:07

我能够通过使用超时值来解决$httpBackend的respond()方法中可用的函数中的承诺来实现这个功能。

我在我的一个角服务上测试一个方法,它用API调用的结果填充一个列表。此外,我在该服务上有指示列表何时加载和何时完成的bools。因此,在我的特定单元测试中,我只想确保“加载”bool设置为true,然后在完成时返回为false (并且在成功填充列表时,“已完成加载”bool设置为true。)

为此,我需要延迟模拟的httpBackend GET响应,允许我检查“加载”bool是否设置为true,以及“已完成的加载”bool是否未定义,但在超时之后,两个bool都需要有新的值。

UPDATE:抱歉没有提前更新。但是,因为我没有执行$timeout (),所以$timeout函数中的expect语句没有执行。我不再用这种方式模拟延迟了,但我忘了我把这个贴在这里了。谢谢你让我注意到马克-阿美利。

代码语言:javascript
复制
var fakeList = [{ id: 1, name: "item 1" }, { id: 2, name: "item 2" }];

$http.expectGET('/myapi/myresource').respond(fakeList);

 myAngularService.myMethod();

 expect(myAngularService.listIsLoading).toBeTruthy();
 expect(myAngularService.listFinishedSuccessfully).toBeUndefined();

 $http.flush();

 expect(myAngularService.listIsLoading).toBeFalsy();
 expect(myAngularService.listFinishedSuccessfully).toBeTruthy();
 expect(myAngularService.myList).toEqual(fakeList);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25368691

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档