尝试测试 html File 对象时，它不会让我用示例图像预填充它？

Question

我创建了想要使用 Angular Dart 框架测试的组件。

当我创建我的测试文件时，我似乎在创建一个示例文件进行测试时遇到了问题。

在我的层级结构中，我有：

./bird.jpg
./image_uploader_po.dart
./image_uploaders_test.dart

然后在我的代码中

test("testing against valid image upload", () async {
  File testImage = new File("./bird.jpg");  //improper constructor.
  fixture.update((Component com){
    com.imageFile = testImage;
  });
  uploaderPO = await fixture.resolvePageObject(Component);
});

我遇到的问题是，这不是 File 的 dart/io 实现，而是 Html 实现。

我试图确定最好的做法是什么，打开一个文件以进行读取访问以应用于组件的文件实现。

我正在查找文件阅读器，但这与存在的文件有关，这是我遇到的问题。

现在，文件构造函数是：File(List<Object> fileBits, String filename, [Map<String, Dynamic> options]);，最终不知道“fileBits”应该是什么。

您可以在以下位置找到我正在使用的文件类：https://api.dartlang.org/stable/1.24.3/dart-html/File-class.html

我想要的最终状态是使用示例图像文件将其应用到图像上传器组件。

谢谢。

Answer 1

您正在运行的测试上下文是针对网络的，因此只有 dart:html 可用，而 dart:io 不可用。

您可以想象，在允许从进程文件系统任意加载文件的 Web 脚本中，这可能是一个巨大的安全漏洞。因此，网络对此有很多限制。

很多时候文件的内容对我们的测试并不重要，所以我会这样做：

File testImage = new File([], "bird.jpg"); // Mock contents don't matter

如果内容对测试很重要，您可以使用 XHR 获取图像，或尝试内联字节。

var response = await HttpRequest.request("bird.jpg", responseType: "blob");
fixture.update((Component com){
  com.imageFile = response.response;
});

希望您的组件可以读取 Blob 本身。如果不是，您可以尝试使用 'arraybuffer' responseType 创建一个文件，但这有点复杂。