角度上传单元测试文件

Question

我正在使用nf-file-upload模块将文件上传到后端。 文件上传的代码如下：

    $scope.upload = function (file) {
            console.log(file)

            Upload.upload({
                url: 'http://localhost:3000/fileupload',
                data: {file: file[0]},
            }).then(function (resp) {
                console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data);
}

文件上传效果很好。 但是，当我创建单元测试时：

  it('should send file to backend for processing', function(){
    var mockFile = {file:[{"name":"file.bin", "size":1018, "type":"application/binary"}]};
    httpBackend.when('POST', 'http://localhost:3000/fileupload').respond(200, {"filePath":"http://localhost:3000/uploads/file.txt"});
    scope.upload(mockFile);
    httpBackend.flush();
  });

我收到一个错误：

TypeError: undefined is not an object (evaluating 'resp.config.data.file.name')

我究竟做错了什么？

Answer 1

then使用resp参数的方法。 在正常情况下，您会收到一个具有以下结构的对象：{config：{data：{file：{name：'a name'}}}}

但是在测试中，您不会以相同的结构进行响应。

编辑：好的。 我懂了。 ng-file-uploader返回数据的方式是不可模拟的。 您不会在resp.data.config.file.name中获得文件名，而是在上传文件之前将文件名保存在变量中。 像这样：

   $scope.upload = function (file) {

      var fileName = file.name;

      Upload.upload({
        url: 'http://localhost:3000/fileupload',
        data: {file: file[0]},
      })
      .then(function (resp) {

        console.log('Success ' + fileName + ' uploaded. Response: ' + resp.data);
    });

  };

检查此codepen codepen.io/gpincheiraa/pen/MyrvQK祝您好运！

Answer 2

您需要运行一个摘要循环。

  it('should send file to backend for processing', function(){
    var mockFile = {file:[{"name":"file.bin", "size":1018, "type":"application/binary"}]};
    httpBackend.when('POST', 'http://localhost:3000/fileupload').respond(200, {"filePath":"http://localhost:3000/uploads/file.txt"});
    scope.upload(mockFile);
    httpBackend.flush();
    scope.$digest();
  });

这将解决承诺并触发返回数据。