如何提升你的 Angular 单元测试水平（2/3）
跟随
业力配置
设置angular.json 的默认值
添加 Git 钩子
仅对特定分支应用 Husky Git 钩子 #186
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
这是关于Angular单元测试系列文章的第二篇。如果您不熟悉Angular CLI的使用，请先阅读本系列的第一篇文章。
在上一篇文章中，我们学习了如何向 Angular CLI 传递参数来运行单元测试。在本文中，我们将深入探讨 Karma 的配置，并通过配置使其更符合我们的独特需求，从而让测试运行器更加强大。是时候提升你的测试技能，并准备好迎接单元测试的挑战了！
跟随
我们使用 Angular CLI 来测试应用程序，并使用了我之前文章中的代码。
你也可以克隆tutorial-angular-httpclient并运行测试。文章中讨论的所有升级内容都可以在“test-configuration”分支中找到。
业力配置
在你的 Angular 应用中，找到 `.` 文件$/src/karma.config.js。这是 Karma 用来运行测试的配置文件。让我们开始编辑它吧！
记者
Angular CLI 默认启用“progress”和“kjhtml”报告器。在 v7 和 v5 版本中，您可以通过命令行配置报告器，但遗憾的是，该选项在 v6 版本中被移除。不过，我们仍然可以通过 v6 版本的配置文件进行更改！
如果您使用的是 Angular v5 或 v7，请使用标志传入以逗号分隔的报告者列表reporters。
要修改karma.config.js 文件，请在reporters数组中移除 'progress' 并将其替换为 'dots'。现在运行测试时，控制台输出将使用点号报告器而不是进度报告器。
添加新记者
但是我们的测试结果还可以做得更好。目前还没什么值得称道的。我们来试试添加一个报告器。
添加 'karma-spec-reporter' npm 包
npm install karma-spec-reporter --save-dev
在karma.conf.jsplugins中，通过在数组中添加 require 语句来引入报告器。
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-spec-reporter')
],
添加到reporters数组中
reporters: ['kjhtml', 'spec']
现在运行测试时，你会看到类似这样的输出。
Karma 提供了各种各样的报告器。例如，如果您想在 CI 环境中查看单元测试输出，可以添加 JUnit 输出报告器，并配置 Jenkins 来使用 JUnit 报告。如果您想让 Karma 更有趣一些，还可以添加彩虹猫进度报告器。
代码覆盖率
现在你已经知道如何运行测试并设置以获得你喜欢的输出格式，是时候测量覆盖率了。
请记住，测试覆盖率指标无法确定应用程序是否按预期运行，也无法确定您编写的测试是否“有效”，即是否测试了重要内容。
Angular CLI 会自动添加并配置 Istanbul 作为代码覆盖率报告器。karma.conf.js 文件中有一个配置部分coverageIstanbulReporter，并且已经设置好生成报告。在 Angular v7 之前的版本中，默认情况下只启用了 'html' 和 'lcov' 报告。如果数组中还没有 'text-summary'，请将其添加进去。
运行测试时启用覆盖率标志。在 v6 中，使用--code-coverage.
ng test --watch false --browsers ChromeHeadless --codeCoverage
现在控制台中会显示清晰的覆盖率摘要输出。
使用“html”报告运行代码覆盖率分析，会以 HTML 格式生成代码覆盖率的可视化概览。您可以查看整个应用程序的代码覆盖率结果，并按文件进行细分。
然后进入单个文件的覆盖率报告，查看每行代码的执行次数。
添加“文本”、“json”、“Cobertura”、“TeamCity”等原生报告格式，或者将“lcov”报告作为 CI 流程的一部分，以便您可以显示每个构建的测试覆盖率趋势线。
维持阈值
如果您想确保一定的覆盖率，可以在karma.conf.jscoverageIstanbulReporter中配置对象以添加。thresholds
向对象中thresholds填写键statements，、，lines和branches。functions
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
thresholds: {
statements: 80,
lines: 80,
branches: 80,
functions: 80
}
},
现在，当您运行代码覆盖率测试时，如果您的项目未达到覆盖率阈值，则测试将以失败告终。
设置angular.json 的默认值
当然，我们可以创建 npm 脚本来封装运行单元测试时传入的所有参数，但有些情况下，我们始终希望使用特定的配置。例如代码覆盖率测试。无论配置watch如何，我们都希望运行代码覆盖率测试。我们可以在angular.json 文件browsers中进行设置。
在$/angular.json文件中找到“test”的配置。它有一个名为“options”的属性。添加一个名为“codeCoverage”的新属性，并将其值设置为true。
除了覆盖率之外，您还可以设置更多属性。所有传递给 Angular CLI 的参数都可以进行配置。有关更多详细信息，请查看 angular.json 的架构。
添加 Git 钩子
想确保每次推送到代码库的代码都有通过的单元测试和足够的代码覆盖率吗？添加 npm 包 'husky'，并按照其说明pre-push添加运行单元测试的步骤。
现在，用户必须通过满足代码覆盖率要求的单元测试才能将代码推送到代码仓库。这项要求应用于所有分支，可能会使团队协作变得困难，因此您可能需要参考此 GitHub issue 中发布的方法，仅针对 master 分支进行操作。
仅对特定分支应用 Husky Git 钩子 #186
是否有办法配置 Husky 以应用特定的 Git 钩子，例如prepush仅应用于特定的分支master？
我知道我可以修改软件包中的钩子，但这会使事情变得更加复杂，因为 husky 会安装自己的钩子，然后我必须使用一些脚本用修改后的版本覆盖它。
主要目的是为了在推送到 master 分支之前只运行 e2e 或单元测试，而不是每次推送到 dev 分支时都运行（每次都要等待并看到浏览器弹出窗口，这很烦人）。
下一篇文章，我们将学习如何有针对性地运行测试，并更深入地了解自定义解决方案。
文章来源：https://dev.to/alisaduncan/how-to-level-up-your-angular-unit-testing-game-23-ged