ember cli中文件上传的验收测试答案

【问题标题】：Acceptance test for file uploading in ember cliember cli中文件上传的验收测试
【发布时间】：2015-05-21 03:54:43
【问题描述】：

我想在 ember 中创建一个上传文件的基本验收测试。我可以用 Pretender 模拟服务器，但我需要知道如何用我的文件系统中的文件填充 input type="file" 字段。所以问题基本上是：

如何用 ember 测试助手填充输入文件字段，我是否使用 fillIn 助手？
如何将示例文件添加到文件夹并从我的验收测试中获取它们。是否可以从验收测试中获取我的 Ember 项目的当前路径以从文件系统中选择要上传的文件？在 Rails 中，我们使用 Rails.root 来实现此目的。

【问题讨论】：

标签： ember.js integration-testing ember-cli qunit ember-qunit

【解决方案1】：

我以不同的方式解决它：我不从文件系统上传文件，而是手动创建一个 Blob 并在输入元素上使用 triggerHandler：

let inputElement = $('input[type=file]');

let blob = new Blob(['foo', 'bar'], {type: 'text/plain'});
blob.name = 'foobar.txt';
inputElement.triggerHandler({
  type: 'change',
  target: {
    files: {
      0: blob,
      length: 1,
      item() { return blob; }
    }
  }
});

这会触发上传。

【讨论】：

这适用于像<input type='file' onchange={{action 'parseFile' value="target.files"}} />这样的html

【解决方案2】：

您不能使用fillIn 之类的东西来设置文件字段，其中包含准备上传的文件值，因为浏览器不允许：

How to set a value to a file input in HTML?

我认为唯一可能的方法是使用 xhr 下载服务器上存在的文件，然后使用 xhr 上传它。我想不出任何方法可以在不引入我链接到的那个 SO 问题中解释的安全问题的情况下以编程方式设置文件输入字段的值。

从 http url 下载要测试上传的演示文件时，可以从这里开始：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

【讨论】：