单元测试 Angular 5 应用程序的模拟文件列表

Posted 2023-03-13

【中文标题】单元测试 Angular 5 应用程序的模拟文件列表

【英文标题】：Mock FileList for Unit Test Angular 5 App

【发布时间】：2018-09-04 02:18:14

【问题描述】：

模拟FileList

我正在尝试编写一个需要 FileList 的单元测试 (Angular5)。我到处寻找解决方案的任何提示。 我想知道这是否可能因为 FileList 的安全性而我的任务从一开始就注定了。

如果可能，任何指针将不胜感激。

【问题讨论】：

我不知道 jasmine，但从头开始创建可写 FileList 的唯一规范方法是通过 DataTransfer 构造函数（目前仅在 Blink 中可用）。有关演示，请参阅 ***.com/questions/47119426/…。

我们这里没有辩论。

gist.github.com/amabes/88324d68690e0e7b8e313cd0cafaa219

@Kaiido，似乎这个问题与您标记的问题不重复。能否请您删除标记或说明标记为重复的原因？

@AlanMabry 您可能想发布作为答案。

【参考方案1】：

选项 1：使用 DataTransfer 构造函数

describe('Component', () => 
  const getFileList = () => 
    const dt = new DataTransfer();
    dt.items.add(new File([], 'file.csv'));
    return dt.files;
  ;

  it('should mock fileList', () => 
    component.fileList = getFileList();
  );
);

选项 2：使用 Blob 模拟文件列表

describe('Component', () => 
  const getFileList = () => 
    const blob = new Blob([""],  type: "text/html" );
    blob["lastModifiedDate"] = "";
    blob["name"] = "filename";
    const file = <File>blob;
    const fileList: FileList = 
      0: file,
      1: file,
      length: 2,
      item: (index: number) => file
    ;
    return fileList;
  ;

  it('should mock fileList', () => 
    component.fileList = getFileList();
  );
);

编码愉快！

【讨论】：

如果您需要HTMLInputEvent 类型，请参阅this answer。