Dart/Flutter 的代码覆盖率可视化（特别适用于 Windows 和 VS Code）

Question

这原本是Github Issue in the Dart-Code repository。

1。上下文

我一直在开发一个包含数百个测试的包，因此可视化代码覆盖率的简单方法非常方便。

我想使用.vscode 配置和lcov.info 输出运行我的测试，VS Code 会自动识别它并在相应的编辑器上以红色或绿色突出显示。

2。我已经尝试过的方法

在过去的几天里——实际上是几个月——我尝试了许多不同的解决方案，但没有一个能达到上述理想的效果：

• flutter test --coverage --coverage-path=lcov.info 确实可以生成必要的文件，但是如果您使用的是 Windows，则必须通过诸如 genhtml 之类的第三方程序将其可视化是很笨拙的。
  • 它最终确实需要 Flutter，如果您正在使用纯 Dart，则应该没有必要...
• IntelliJ 应该可以理想地工作，但我似乎无法启用 Run with Coverage 按钮，即使在安装了test_coverage 包之后也是如此。
  • 虽然 Gitter 上的一个人告诉我，他在他的 IntelliJ 上工作。
• coverage 和 test_coverage 包都提供了与我上面描述的内容相近的功能，但它们的解决方案更加笨拙 - 在 Windows 上它们很难设置...
• codecov.io 是第 3 方的替代方案，但是当编辑器提供更灵活和更快的体验时，不得不在外部处理这个问题很烦人。
  • 而且还有覆盖不明确的问题，对于codecov.io，这个问题不太清楚。例如，如果一个文件夹测试间接调用另一个文件夹的东西，这是否也算作间接调用文件夹的覆盖范围？这几乎总是不受欢迎的。

3。其他资源

1. this old question on StackOverflow 最初很有帮助。

Answer 1

1. 你可以拿genhtml.perl脚本here。

2. 如果你的机器上安装了 Git for Windows，那么你已经安装了 Perl，它应该在这里：<git-install-dir>\usr\bin\perl.exe

3. 将lcov.info 文件中所有文件路径行（以SF: 前缀）中的反斜杠字符（\\）替换为斜杠字符（/）。

4. 运行genhtml.perl 脚本。例如——假设当前工作目录是你项目的根目录——：

   <git-install-dir>\usr\bin\perl.exe \
       C:\Scripts\genhtml.perl \
       -o .\coverage\html .\coverage\lcov.info
   

   注意。添加--prefix 选项也可能很有用。

作为这些操作的结果，您应该会在.\coverage\html/ 目录中获得生成的 HTML 报告。在浏览器中打开.\coverage\html\index.html 文件以查看报告。

我希望这会有所帮助——至少，它对我有用。