AngularJS-单元测试文件上传

debugcn 发表于 Dev

埃戈尔·斯米尔诺夫（Egor Smirnov）

如您所知，在单元测试中，它具有内置的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支持对promise进行进度回调的信息（虽然不确定是否已与$ http服务集成），但是中止回调又如何呢？

有什么想法或者您以前遇到过类似的事情吗？

dnc253

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

从那里，您可以使不同的间谍返回针对不同测试所需的任何内容。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。