5

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

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

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

我知道用于 Angular 测试的 karma 测试运行程序文件中有一个“reporters”配置选项，它有以下选项 - 点、进度、junit、咆哮、覆盖率

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

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

4

4 回答 4

0

我从 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 并在浏览器中打开以查看结果的格式化版本，包括结果的颜色编码。当然，您需要安装任何插件或依赖项才能运行测试。

于 2014-05-29T18:40:25.327 回答
0

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

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

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

于 2014-01-24T23:30:31.017 回答
0

如果你一直在使用 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 覆盖工具非常出色，而且安装相对简单。

于 2017-08-04T12:16:50.747 回答
0

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

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

"codeCoverage" : {
  "exclude": ["./src/test/*mocks.ts",
              "./src/environments/*.ts",
              "./src/app/models/*model.ts"
            ]
}
于 2017-09-22T18:17:54.230 回答