如何在e2e AngularJS测试中进行文件上传？

Question

在我的一个视图中，我有一个文件上传控件。它支持通过拖放或单击按钮后打开的标准文件对话框进行文件上传。

如何在我的端到端测试中实现这一功能呢？¹

---

¹ 只需要其中的任意一种方式即可。

- Tomas Grosup

---

你需要测试哪部分功能呢？是正确的拖放行为还是仅仅是文件上传？通过AJAX发送一个文件（例如，new File()）是否足够？ - John Doe

我只需要进行文件上传（使用真实文件），以便我可以继续进行其他测试。 - Tomas Grosup

因此，通过AJAX发送真实文件将起作用，而发送使用new File()创建的空文件则不会。 - Tomas Grosup

如果有帮助的话，该文件是一个 XML 文件，我在测试代码中创建该文件没有问题，只要有方法可以做到。 - Tomas Grosup

你是如何编写端到端测试的？Selenium支持文件上传。 - wosc

我正在使用AngularJS附带的端到端测试，文档链接为http://docs.angularjs.org/guide/dev_guide.e2e-testing。 - Tomas Grosup

Answer 1

您可以使用JavaScript blob上传文件。这需要FileApi，不兼容旧浏览器（http://caniuse.com/fileapi）。但是，由于您提到使用拖放上传，它使用FileApi，所以问题不大。

使用blob API上传文件有两种方式。其中一种非常简单，另一种只是第一种的延续。

使用JavaScript，您可以创建一个新的blob：

var blob = new Blob("content", contentType);

例如，这将创建一个包含文本“Hello World！”的blob对象。

var foo = new Blob("Hello World!", {type: "text/plain"});

---

您还可以使用以下方法，对于非纯文本文件，例如pdf文件，这种方法更好。您需要将文件转换为Base64（您可以使用类似this的东西），并使用Base64数据创建blob。

使用此函数（this的稍作修改版本）创建blob。

function b64toBlob(b64Data, contentType, sliceSize) {
b64Data = b64Data.replace(/\s/g, '');
contentType = contentType || '';
sliceSize = sliceSize || 1024;

function charCodeFromCharacter(c) {
    return c.charCodeAt(0);
}

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);
    var byteNumbers = Array.prototype.map.call(slice, charCodeFromCharacter);
    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: contentType});
return blob;
}

例如，这将创建一个PDF blob对象。

var pdf = "JVBERi0xLjQKJcfsj6IKNSAwIG9...=="; //base64 encoded file as a String
var pdfBlob = b64toBlob(pdf, "application/pdf", 1024);

---

使用上述方法之一创建 Blob 后，它可以被视为一个文件。例如，您可以将该文件放入 FormData 对象中（如果您正在进行上传操作，如 this）。

var fd = new FormData();
fd.append("uploadedFile", pdfBlob, "My PDF.pdf"*);

*目前来看，Filename参数只在Chrome上有效。

- Eric Zhang