angular - 分组测试结果 : Karma/Protractor integration with Jenkins

Question

我已经成功设置了一个 Jenkins 作业，该作业执行我的 Karma 测试(使用 Angular-CLI)以及我对 Angular4 应用程序的 Protractor 测试(使用 Angular-CLI)。这两个测试都将输出一个 XML 文件，然后 Jenkins 使用该文件来显示结果和详细信息。

我的问题非常简单，通过以下屏幕截图可见:我无法区分我的测试套件是 Protractor 测试还是 karma 测试。

• 以红色突出显示的是我的 Protractor 测试套件
• 未突出显示的是我的 Karma 测试套件。

因此我问自己以下问题:

• 是否有强制执行的良好实践来管理当今的单元测试和端到端测试以及持续集成？
• 我是否必须在单独的 Jenkins 作业中分离测试？这是否意味着我需要在以后的 Jenkins 管道工作流程中使用两个不同的 JenkinsFiles？
• 或者相反，我可以简单地为每个测试套件设置一个前缀，这样我就可以轻松地管理一切？

最后两个选项似乎都不切实际。

---

编辑:请仔细考虑这个问题并在投票结束之前完整阅读此问题，因为它不是基于意见的。我会明确表示:我正面临着不切实际的持续集成实现，对问题有明确的定义，我希望有一个解决方案可以解决我当前的问题，如果可能的话，一些关于测试前端的良好实践也可以清除此问题的应用程序。

Answer 1

虽然这是一个常见问题，但我认为没有最佳实践或良好实践。这仅取决于开发人员希望如何在构建服务器上显示测试结果。

我有针对您的特定用例的解决方案，希望能解决您的技术问题。

我自己使用 Teamcity，但我也将其改编为与 Jenkins 一起使用。我已经使用 Angular CLI 设置了一个演示应用程序来进行演示。

构建服务器，例如 Jenkins 和 TeamCity，只需从结果文件(Jenkins，通常是 JUnit，我将在下面演示)或通过标准输出 (TeamCity) 读取服务消息。因此，我们可以在写入这些记录之前操作测试结果数据，这使我们能够区分 karma (单位)和 Protractor (e2e)，而无需在单独的作业上运行测试或使用不必要的前缀使测试套件膨胀.

您将需要两个额外的包，karma-junit-reporter和 jasmine-reporters .我们将为 Karma 使用 karma-junit-reporter，为 Protractor 使用 jasmine-reporters。

这些包允许我们在将结果写入 JUnit 文件之前修改套件名称，这将帮助我们区分单元和 e2e。

您可以按照每个工具提供的安装说明进行操作，也可以按照我下面的实现进行操作:

安装 karma-junit-reporter:

npm install karma-junit-reporter --save-dev

对您的 karma.conf.js 文件进行以下更改:

将 karma-junit-reporter 添加到插件数组:

require('karma-junit-reporter')

将 junit 添加到 reporters 数组:

reporters: ['progress', 'kjhtml', 'junit']

使用以下内容添加一个 junitReporter 对象:

junitReporter: {
        outputDir: 'testresults', 
        outputFile: 'karmatest.xml', 
        suite: 'unit',  // whichever prefix you wish to use
        useBrowserName: false, 
      }

安装 Jasmine 记者:

npm install jasmine-reporters --save-dev

请注意，在撰写本文时； Protractor 的 jasmine-reporters 文档指出您应该运行 npm install --save-dev jasmine-reporters@^2.0.0 - 但是这将导致问题而没有异常处理。我建议安装最新的。

在protractor.conf.js文件的onPrepare函数中添加如下代码:

var jasmineReporters = require('jasmine-reporters');
return browser.getProcessedConfig().then(function (config) {
      var junitReporter = new jasmineReporters.JUnitXmlReporter({
        consolidateAll: true,
        savePath: 'testresults',
        filePrefix: 'protractor-test-results',
        modifySuiteName: function (generatedSuiteName, suite) {
          return 'e2e.' + generatedSuiteName; // whichever prefix you wish to use
    }
  });
  jasmine.getEnv().addReporter(junitReporter);
});

您现在应该配置您的 Jenkins 作业以运行 ng 测试、ng e2e 并添加一个构建后操作以发布 JUnit 测试结果报告，如下所示:

testresults\*.xml

您的 Jenkins 测试结果仪表板现在将如下所示:

出于演示的目的，我在单元测试和 e2e 测试中均未通过，如您所见，每个测试名称都有一个前缀，用于确定它是单元测试还是 e2e。您还可以通过单击包下的链接深入查看所有 e2e 或所有单元测试。

如果您有足够的勇气和充足的时间，您可以编写自己的实用程序来完成与这些包相同的工作，以获得更加个性化的结果。

我希望这可以帮助您实现所需的结果。

谢谢