javascript - 以 Angular 进行单元测试文件上传

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

使用 resp 参数的 then 方法。在正常情况下，您将收到一个具有以下结构的对象: { 配置:{ 数据: { 文件:{ 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.io/gpincheiraa/pen/MyrvQK 祝你好运!