Javascript 角度4测试文件读取器已加载

我尝试使用Dropzone.js测试将文件转换为Base64的方法。我的方法很有效，但是对于文件阅读器的测试，它变得很难。实际上，我创建了一个名为文件读取器的测试（见下文），但无法在

onload

属性中输入。我想测试

onload

属性的内部。谢谢你的回答

我的代码覆盖范围

我的组件

fileTransform(event, action): void {
  const reader = new FileReader();
  reader.onload = (evt) => {
    const file = evt.target['result'];
    if (action === 'add') {
      this.filesDrop.push(file);
    }
    if (action === 'remove') {
      const index = this.filesDrop.indexOf(file);
      if (index > -1) {
        this.filesDrop.splice(index, 1);
      }
    }
  };
  reader.readAsDataURL(event);
}

const file = {
  'upload': {
    'progress': 0,
    'total': 17343,
    'bytesSent': 0,
    'filename': 'TEST.jpeg'
  },
  'type': 'images/jpeg',
  'width': 350,
  'height': 200,
  'size': 17343,
  'name': 'TEST.jpeg',
  'dataURL': 'data:image/jpeg;base64, FOO'
};

const fileFR = {
  'bubbles': false,
  'returnValue': true,
  'target': {
    'readyState': 2,
    'result': 'data:image/jpeg;base64, FOO',
    'onload': 'bar'
  }
};

it('should fileTransform()', () => {

  spyOn(<any>window, 'FileReader').and.returnValue({
    readAsDataURL: function() {},
    onload: function() {}
  });

  component.fileTransform(fileFR, 'add');
  expect(FileReader).toHaveBeenCalled();

});

我的测试

fileTransform(event, action): void {
  const reader = new FileReader();
  reader.onload = (evt) => {
    const file = evt.target['result'];
    if (action === 'add') {
      this.filesDrop.push(file);
    }
    if (action === 'remove') {
      const index = this.filesDrop.indexOf(file);
      if (index > -1) {
        this.filesDrop.splice(index, 1);
      }
    }
  };
  reader.readAsDataURL(event);
}

const file = {
  'upload': {
    'progress': 0,
    'total': 17343,
    'bytesSent': 0,
    'filename': 'TEST.jpeg'
  },
  'type': 'images/jpeg',
  'width': 350,
  'height': 200,
  'size': 17343,
  'name': 'TEST.jpeg',
  'dataURL': 'data:image/jpeg;base64, FOO'
};

const fileFR = {
  'bubbles': false,
  'returnValue': true,
  'target': {
    'readyState': 2,
    'result': 'data:image/jpeg;base64, FOO',
    'onload': 'bar'
  }
};

it('should fileTransform()', () => {

  spyOn(<any>window, 'FileReader').and.returnValue({
    readAsDataURL: function() {},
    onload: function() {}
  });

  component.fileTransform(fileFR, 'add');
  expect(FileReader).toHaveBeenCalled();

});

const文件={
“上传”：{
“进度”：0，
“总计”：17343，
“bytesSent”：0，
“文件名”：“TEST.jpeg”
},
'type'：'images/jpeg'，
“宽度”：350，
‘高度’：200，
“大小”：17343，
'name'：'TEST.jpeg'，
'dataURL'：'data:image/jpeg；base64，FOO'
};
const fileFR={
"泡沫":假,，
“returnValue”：true，
“目标”：{
“readyState”：2，
“结果”：“数据：图像/jpeg；base64，FOO”，
“onload”：“bar”
}
};
它（'should fileTransform（）'，（）=>{
spyOn（窗口，'FileReader'）。和.returnValue({
readAsDataURL:function（）{}，
onload:function（）{}
});
fileTransform（fileFR，'add'）；
expect（FileReader）.toHaveBeenCalled（）；
});

可能有点晚，但我今天有同样的问题。 我建议排除对回复的处理，并为此单独设置一个功能

    fileTransform(event, action): void {
      const reader = new FileReader();
      reader.onload = (evt) => {
        this.processFileLoad(evt);
      };
      reader.readAsDataURL(event);
    }

    /**
    * Function which processes the results of a file read
    * @param evt: any - the data to process
    */
    processFileLoad(evt: any){
      ...do your magic here...
    } 

现在可以单独测试processFileLoad，这将使代码更具可读性