角度测试报告选项？答案

【问题标题】：Angular test reporting options?角度测试报告选项？
【发布时间】：2013-05-05 22:59:58
【问题描述】：

我发现 Angular 控制台测试报告难以阅读，它只是一大堆控制台文本，几乎没有格式。

是否可以使用 html 进行格式化，让 Angular 单元测试报告出现在浏览器中？前几天我注意到了这个 github repo - https://github.com/larrymyers/jasmine-reporters

是否可以使用该库中的 html 报告器进行 Angular 单元测试报告。我可以在浏览器中显示 Angular 单元测试的结果吗？

我知道用于 Angular 测试的 karma 测试运行程序文件中有一个“reporters”配置选项，它具有以下选项 - 点，进步，朱尼特，咆哮，覆盖范围

但是，无论我将它们设置为什么，这些似乎都没有任何作用，而且我找不到任何关于它们的文档。

那么 karma.conf.js 中的记者选项的目的是什么？

【问题讨论】：

标签： angularjs jasmine

【解决方案1】：

我个人使用覆盖选项。但要使其正常工作，您需要单独设置伊斯坦布尔 (https://github.com/yahoo/istanbul) 报道记者。这将以 HTML 格式为您提供正在测试的文件和文件中的行的状态，它不会显示实际编写的测试。

我不认为任何记者会真正打印出 HTML 格式的单个测试。尝试使用 Webstorm，它以易于阅读的格式显示各个测试。

我已经尝试过来自 npm 的 karma-html-reporter 模块，但它对我没有用，所以也许看看他们是否更新了那个。

【讨论】：

【解决方案2】：

我从 IntelliJ 13.x 运行 karma，并且能够使用 config.set 部分的 karma.conf.js 中的以下配置选项获得干净的 html 格式的测试输出：

    reporters: ['progress', 'junit', 'html']
    plugins : ['karma-htmlfile-reporter', ...] (karma-jasmine, etc...)
    htmlReporter: { outputFile: 'tests/units.html' }

测试运行后，我只需右键单击 test/units.html 并在浏览器中打开以查看结果的格式化版本，包括结果的颜色编码。当然，您需要安装任何插件或依赖项才能运行测试。

【讨论】：

【解决方案3】：

如果你一直在使用 Angular-CLI 开发你的项目，你可以运行一个

ng test --code-coverage

在您的 karma.conf.js 文件中使用以下（或类似）配置

coverageIstanbulReporter: {
  reports: ['html', 'lcovonly'],
  fixWebpackSourcePaths: true,
  thresholds: {
    global: { // thresholds for all files
      statements: 0,
      lines: 0,
      branches: 0,
      functions: 0
    },
    each: { // thresholds per file
      statements: 0,
      lines: 0,
      branches: 0,
      functions: 0
    }
  }
},

老实说，如果没有，Karma Istanbul 覆盖工具非常出色且安装相对简单。

【讨论】：

【解决方案4】：

对于代码覆盖率，我使用较新版本的karma-coverage-istanbul-reporter。它基于 angular-cli 代码覆盖率输出构建报告网站。您可以深入了解您的组件和服务，以查看缺少单元测试覆盖率的地方。顶部还有一个覆盖范围聚合。输出将在您定义的目标中创建一个覆盖文件夹，只需为报告加载 index.html。

我想指出，默认情况下，这将包括所有没有 .spec.ts 的文件。使用以下内容从 .angular-cli.json test 部分的覆盖范围中排除模型和其他文件：

"codeCoverage" : {
  "exclude": ["./src/test/*mocks.ts",
              "./src/environments/*.ts",
              "./src/app/models/*model.ts"
            ]
}

【讨论】：