AngularJS - 单元测试文件上传

Question

如你所知,里面的单元测试它的内置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服务集成),但是中止回调呢？

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

Answer 1

如果该$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);

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