分组测试结果：Karma / Protractor 与 Jenkins 集成

Question

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

我的问题非常简单，可以通过以下屏幕截图看到：我无法区分我的测试套件是量角器测试还是业力测试。

以红色突出显示的是我的量角器测试套件
未突出显示的是我的 Karma 测试套件。

因此我问自己以下问题：

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

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

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

Answer 1

你的问题是合理的，但是从目前的情况来看，这个问题的解决方案更接近于基于意见。

我们与 Teamcity 有同样的问题，NUnit、Karma 或 Protractor 测试之间没有视觉差异。发生这种情况是因为 CI 所有测试都是相同的，它只是解析 stdout 搜索特定的 patterns/format （测试套件、测试名称等），但没有测试类型或测试种类这样的东西, 所以没有按类型分组。

所以区分测试的唯一方法是使用命名约定或创建特殊版本的 describe 函数：

export describeProtractor(name:string, ...) {
     describe('(Protractor)' + name, ...);
}

为了这个目的有多个工作真的很不方便。

另一种选择是使用 HTML Publisher Plugin 来显示 karma/protractor html 记者生成的测试结果，我从未使用过，所以这取决于你。

Answer 2

尽管这是一个常见问题，但我认为没有最佳做法。这仅取决于开发人员希望如何在构建服务器上显示测试结果。

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

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

构建诸如 Jenkins 和 TeamCity 之类的服务器只需从结果文件（Jenkins，通常是 JUnit，我将在下面演示）或通过 stdout (TeamCity) 读取服务消息。因此，我们可以在写入这些记录之前操纵测试结果数据，这使我们能够区分业力（单位）和量角器（e2e），而无需运行单独作业的测试或使测试膨胀带有不必要前缀的套件。

您将需要两个额外的包，karma-junit-reporter and 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-reporters:

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 test、ng e2e 并添加一个 post 构建操作来发布 JUnit 测试结果报告，如下所示：

testresults\*.xml

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

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

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

我希望这能帮助您达到您想要的结果。

谢谢

分组测试结果：Karma / Protractor 与 Jenkins 集成

Grouping test results : Karma / Protractor integration with Jenkins

jenkins

karma-runner

protractor

jenkins-pipeline

angular