单元测试Angularjs文件上传控制器方法答案

【问题标题】：Unit test Angularjs file upload controller method单元测试Angularjs文件上传控制器方法
【发布时间】：2013-12-30 15:52:22
【问题描述】：

我正在尝试在 Angularjs 中对负责文件上传的控制器方法进行单元测试：

 $scope.uploadFile = function() {
    var fd = new FormData();
    for (var i in $scope.files) {
        fd.append("uploadedFile", $scope.files[i]);
    }
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", $scope.uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.open("POST", "/fileupload");
    xhr.send(fd);
}

我试图像下面这样模拟 xhr 对象：

it("using $window ", inject(function($window) {
$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);

}));

当我运行业力测试配置文件时，出现以下错误：

TypeError：试图分配给只读属性。在 workFn (/home/dre/trunk/app/bower_components/angular-mocks/angular-mocks.js:2107)

谁能帮助我，我是 jasmine 和 karma 单元测试的新手

【问题讨论】：

标签： unit-testing angularjs jasmine karma-runner

【解决方案1】：

您应该使用 Angular 依赖注入，这对测试有很大帮助。您还应该使用 Angular 的 $http 或 $resource 服务来执行 XHR 请求。

话虽如此，我还是为您的测试创建了一个小提琴。您的问题中缺少测试实施，例如控制器创建。我希望完整的示例可以为您提供有关代码中问题的线索。

it("using $window ", function () {
    xhrObj = jasmine.createSpyObj('xhrObj', 
                                  ['addEventListener', 'open', 'send']);
    spyOn(window, "XMLHttpRequest").andReturn(xhrObj);

    scope.uploadFile()

    expect(xhrObj.addEventListener).toHaveBeenCalled();
    expect(xhrObj.addEventListener.calls.length).toBe(2);
});

您可以找到完整的示例here。

但我强烈建议您改用 $http/$resource。

【讨论】：