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

Question

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

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

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

因此，我问自己以下问题：

• 是否有一种良好的实践来管理今天的单元测试和持续集成的端到端测试？
• 我是否必须在单独的 Jenkins 工作中分开测试？这是否意味着我稍后需要在 Jenkins-pipeline 工作流中使用两个不同的 JenkinsFiles ？
• 或者相反，我可以简单地为每个测试套件设置一个前缀，以便我可以轻松管理所有内容？

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

---

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

Answer 1

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

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

I use Teamcity myself, however I have adapted this for use with Jenkins also. I've set up a demo app using Angular CLI to demonstrate.

Build servers such as Jenkins and TeamCity simply read either from a results file (Jenkins, usually JUnit which I will demonstrate below) or service messages via stdout (TeamCity). Therefore we can manipulate the test result data prior to these records being written, which allows us to be able to distinguish between karma (unit) and Protractor (e2e) without needing to run the tests on seperate jobs or bloat the test suites with unnecessary prefixes.

You will require two additional packages, karma-junit-reporter and jasmine-reporters. We will use karma-junit-reporter for Karma and jasmine-reporters for Protractor.

These packages allow us to modify the suite name prior to the results being written to a JUnit file, which will help us distinguish between unit and e2e.

You can follow the installations instructions provided by each tool or follow my implementation below:

Install karma-junit-reporter:

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

Make the the following changes to your karma.conf.js file:

Add karma-junit-reporter to the plugins array:

require('karma-junit-reporter')

Add junit to the reporters array:

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

Add a junitReporter object with the following :

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

Install jasmine-reporters:

npm install jasmine-reporters --save-dev

Please note, as of writing; the jasmine-reporters document for Protractor states you should run npm install --save-dev jasmine-reporters@^2.0.0 - however this will cause issues without exception handling. I’d recommend installing latest.

Add the following code to the onPrepare function of the protractor.conf.js file:

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);
});

You should now configure your Jenkins job to run ng test, ng e2e and also add a post build action to publish JUnit test result report as follows:

testresults\*.xml

Your Jenkins test result dashboard will now look like this:

For the purposes of this demonstration, I've failed both a unit test and an e2e test, as you can see each test name has a prefix determining whether it is unit or e2e. You can also drill down into all e2e or all unit tests by clicking the link under packages.

If you are brave and have a lot of time you can write your own utility which does the same job as these packages for a more customized outcome.

I hope this helps you achieve the outcome you require.

Thanks