如何摄取 javascript

Question

我正在做一个 Flutter 网络项目。 web/index.html 文件正在注入一个 JavaScript 脚本，可以简化为：

<script>
  window['dataLayer'] = [];
</script>

所以在我的 flutter 代码中，我可以这样做：

@JS()
import 'package:js/js.dart';

@JS('dataLayer.push')
external void push(data);

push(myData);

将 myData 推入 window.dataLayer 数组。

然而，在测试中，当我运行

flutter test --platform chrome

我遇到了错误

TypeError: Cannot read properties of undefined (reading 'push')

当我打电话时

push(myData);

因为window['dataLayer']从未被创建过。

如何像在 index.html 中那样注入一些 javascript 脚本？

Answer 1

可以在运行测试时加载自定义 HTML 文件，请参阅 the instructions of the package test。

如果您的测试文件名为 folder/my_test.dart，那么您可以创建一个名为 (folder/my_test.html):

的 html 文件

<!doctype html>
<html>

<head>
  <title>Custom HTML file title</title>
  <link rel="x-dart-test" href="my_test.dart">
  <script src="packages/test/dart.js"></script>
  <script>
    window['dataLayer'] = [];
  </script>
</head>

</html>

见。

然后你可以运行

dart test --platform chrome

但是，只有 dart test 支持，flutter test 不支持，请参阅 this issue。在其中，他们建议改为编写集成测试。

如何摄取 javascript

How to injest javascript in

flutter

flutter-test

flutter-web

flutter-web-browser