单元测试 – AngularJS – 单元测试文件上传

前端之家收集整理的这篇文章主要介绍了单元测试 – AngularJS – 单元测试文件上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如您所知,在单元测试中,它内置的 angularjs功能可以使用$httpBackend模拟XHR请求 – 这在编写单元测试时非常有用且有用.

最近,我遇到了在文件上传的情况下嘲笑XHR的需要,并发现了一些问题.

考虑以下代码

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress",uploadProgress(event),false);
xhr.addEventListener("load",uploadComplete(event),false);
xhr.addEventListener("error",uploadError(event),false);
xhr.addEventListener("abort",uploadAbort(event),false);
xhr.open("POST",'some url');
xhr.send(someData);

我想做的是通过模拟XHR请求来对这样的代码进行单元测试,但是不可能这样做,因为这里没有使用$http服务.

我试过这个(它正在工作,可以用$httpBackend嘲笑):

$http({
    method: 'POST',url: 'some url',data: someData,headers: {'Content-Type': undefined},transformRequest: angular.identity})
.then(successCallback,errorCallback);

但在这种情况下,我不知道如何实现’progress’回调和’abort’回调(它们是必不可少的,并且在我现在正在处理的情况下是必需的).

我已经看到最新的Angular支持进程回调承诺的信息(不确定它是否与$http服务集成),但是中止回调呢?

任何想法或者你之前遇到类似的东西?

如果$http服务没有为您提供所需的一切,您仍然可以对第一个代码块进行单元测试.首先,更改代码以使用Angular的$window服务.这只是一个包装器服务,但它允许您在测试中模拟对象.所以,你会想要这样做:
var xhr = new $window.XMLHttpRequest();

然后在你的测试中,只需模拟它并使用间谍.

$window.XMLHttpRequest= angular.noop;
addEventListenerSpy = jasmine.createSpy("addEventListener");
openSpy = jasmine.createSpy("open");
sendSpy = jasmine.createSpy("send");
xhrObj = {
   upload: 
   {
       addEventListener: addEventListenerSpy
   },addEventListener: addEventListenerSpy,open: openSpy,send: sendSpy
};
spyOn($window,"XMLHttpRequest").andReturn(xhrObj);

从那里,您可以让不同的间谍返回您想要的不同测试.

猜你在找的Angularjs相关文章