Angular 4 测试 FileReader 加载答案

【问题标题】：Angular 4 Test FileReader onloadAngular 4 测试 FileReader 加载
【发布时间】：2018-02-24 17:34:16
【问题描述】：

我尝试使用 Dropzone.js 测试将我的文件转换为 Base64 的方法。我的方法有效，但要测试 FileReader，就很难了。实际上，我为 FileReader 创建了一个测试（见下文），但我无法输入 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();

});

【问题讨论】：

标签： javascript angular jasmine dropzone.js

【解决方案1】：

可能有点晚了，但我今天也有同样的问题。我建议排除对响应的处理，并为此设置一个单独的函数。

    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，这将使代码更具可读性。

【讨论】：