文章翻译自 Andrea Bizzotto
[How to Generate and Analyze a Flutter Test Coverage Report in VSCode (codewithandrea.com)](https://codewithandrea.com/articles/flutter-test-coverage/)
如果你在编写重要的或者不太简单的app,添加自动化测试是你可以做的最好的投资之一。
自动化测试帮助你编写更好的代码,提前捕捉到回归错误,在重构代码时更加自信。相比反复地手动测试你的应用,自动化测试甚至可以为你节省大量时间。
而且使用Flutter,很容易为你的整个应用(app )或包(package)生成和可视化测试覆盖率,精确到每一行!
所以在这篇文章中,我们将学习如何:
- 使用
flutter test --coverage
命令 - 分析测试报告
- 在VSCode中通过Flutter Coverage和Coverage Gutters插件直接查看测试覆盖率
Flutter test --coverage
假设你已经编写了一些测试,并希望了解项目中的测试覆盖率。 你需要做的就是运行以下三个命令:
bash
# 生成 `coverage/lcov.info` 文件
flutter test --coverage
# 生成HTML格式的报告
genhtml coverage/lcov.info -o coverage/html
# Open the report
open coverage/html/index.html
macos读者注意: 在macos上你需要先安装lcov才可以通过lcov.info生成html报告
brew install lcov
生成的HTML报告将会创建许多文件。为了避免将它们添加进git中,请将coverage/添加到你的.gitignore文件中。
执行完上面3条命令后,将生成报告,并在您的浏览器上打开一个如下所示的页面:
从这里,你可以深入每个目录并单独打开每个文件,只需要点击Directory中的某一条就可以进入目录。例如:
文件报告的一个好处是所有相关行都进行了颜色编码(蓝色:已覆盖,红色:未覆盖)。
请注意,报告会告诉你是否有测试覆盖了给定的行,并不会告诉你这些测试是否通过。换句话说,你仍然需要确保所有的测试都通过了。
虽然这个报告很有帮助,但在开发过程中通过浏览器阅读它并不实际。
幸运的是,有两个VSCode插件可以它变得更轻松。
VSCode插件 - Flutter Coverage
一旦你安装了Flutter Coverage
扩展,它将出现在你的测试标签页中,并为你显示所有文件和文件夹的覆盖率信息:
根据覆盖率百分比,您还将获得三个不同的图标,这些图标会显示您的代码中哪些部分需要更多的测试:
- ✅ 超过70%的覆盖率
- ⚠️ 50%到70%的覆盖率
- ❌ 低于50%的覆盖率
VSCode插件 - Coverage Gutters
安装了 Coverage Gutters 插件后,底部栏会出现一个小小的"监视"按钮:
如果你点击它,它会检查测试覆盖率信息(在 lcov.info 文件中),你将在编辑器中每一行旁看到绿色或红色的边线:
这个形式非常好,因为它能够精确地告诉你哪些代码部分在逐行基础上没有被覆盖!👍
请注意,Flutter Coverage 和 Coverage Gutters 都使用 lcov.info 文件来显示覆盖率数据。因此,在进行更改后,您应该重新运行 flutter test --coverage 命令以查看更新后的数据。
当Flutter Coverage和Coverage Gutters一起使用时,它们帮助你看到代码的哪些部分需要更多的测试。
它们也让编写测试变得更有趣和有成就感,因为将覆盖率达到100%感觉很棒!✅
结论
既然我们已经知道如何生成测试覆盖率以及如何充分利用可用的VSCode扩展,还有一件事需要说明:
仅靠代码覆盖率并不是万能的解决方案。
编写测试需要时间(尽管这远不及手动反复测试整个应用程序那么耗时😱),因此我们应该选择一个合理的测试策略。
一个好的测试策略组合包括单元测试、组件测试和集成测试,这可能是最有效的。并且根据项目的不同,可能还有必要包括端到端测试和黄金图像测试。