Question

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

是否可以使用html格式化Angular单元测试报告？前几天我注意到了这个github回购 - https://github.com/larrymyers/jasmine-reporters

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

我知道在用于Angular测试的karma测试运行器文件中有一个'reporter'配置选项，它有以下选项 - 点，进展， JUnit的，低吼，覆盖

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

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

Answer 1

If you've been developing your project using the Angular-CLI, you can just run a

ng test --code-coverage

with the following (or similar) config in your karma.conf.js file

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
    }
  }
},

honestly, if not, the Karma Istanbul coverage tool is excellent and relatively simple to install.

Answer 2

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

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

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

Answer 3

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

Answer 4

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

我想要注意，默认情况下，这将包含没有.spec.ts的所有文件。使用以下方法从.angular-cli.json test部分中的coverage中排除模型和其他文件：

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

角度测试报告选项？

4 个答案: