详解Angular Karma测试的持续集成实践

使用Angular + Karma + Jasmine可以进行前端的单体测试，从前面的文章中我们了解到了Karma的工作原理，它会启动一个指定种类的浏览器，然后在此浏览器中运行测试用例。如果需要进行持续集成，比如结合Jenkins或者其他方式进行自动化的测试，如果需要手动关闭浏览器的操作，或者无法提供图形化的界面的情况保证测试的执行这些都会成为持续集成的障碍，这篇文章整理一下解决的常见方法。

可使用浏览器的测试环境

当测试环境可以使用浏览器，在这台机器上使用ng test则能进行测试，Karma会启动Chrome浏览器，然后执行测试用例，持续集成的时候，Jenkins通过远程命令执行的方式到可使用浏览器的测试环境中执行ng test完成测试。

这种方式非常简单，需要解决的只有一个问题，Angular 的demo应用执行ng test时，执行完毕之后，Chrome浏览器也不会退出，这样Jenkins的调用部分也不会返回，只需要保证其执行结束后立即关闭浏览器，这种方式就没有问题了。而实际上Karma的设定文件中，singleRun正是这个选项，缺省被设定为false，这就是其不退出的原因。只需要将此选项设定为true即可。demo示例的Karma设定文件改成如下即可：

liumiaocn:demo liumiao$ cp karma.conf.js karma.conf.js.originliumiaocn:demo liumiao$ vi karma.conf.jsliumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin 29c29<   singleRun: true,--->   singleRun: false,liumiaocn:demo liumiao$

执行日志如下所示：

liumiaocn:demo liumiao$ rm -rf coverage/liumiaocn:demo liumiao$ lsREADME.md      e2e         node_modules     src         tsconfig.spec.jsonangular.json     karma.conf.js    package-lock.json  tsconfig.app.json  tslint.jsonbrowserslist     karma.conf.js.origin package.json     tsconfig.jsonliumiaocn:demo liumiao$ liumiaocn:demo liumiao$ ng test --code-coverage30% building 12/12 modules 0 active31 10 2019 20:19:39.308:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/31 10 2019 20:19:39.314:INFO [launcher]: Launching browsers Chrome with concurrency unlimited30% building 13/13 modules 0 active31 10 2019 20:19:39.324:INFO [launcher]: Starting browser Chrome31 10 2019 20:19:43.028:INFO [Chrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket Pwhf3R-KNkzVDi1AAAAA with id 46366297Chrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.373 secs / 0.321 secs)TOTAL: 3 SUCCESSTOTAL: 3 SUCCESSTOTAL: 3 SUCCESS=============================== Coverage summary ===============================Statements  : 100% ( 6/6 )Branches   : 100% ( 0/0 )Functions  : 100% ( 1/1 )Lines    : 100% ( 5/5 )================================================================================liumiaocn:demo liumiao$ lsREADME.md      coverage       karma.conf.js.origin package.json     tsconfig.jsonangular.json     e2e         node_modules     src         tsconfig.spec.jsonbrowserslist     karma.conf.js    package-lock.json  tsconfig.app.json  tslint.jsonliumiaocn:demo liumiao$ 

在这个过程中可以看到Chrome被自动打开、执行测试用例并显示结果然后自动退出了。通过远程方式调用应该也没有问题。不评价解决方法的好坏与局限性，这也是一种实现的方式。

无需打开浏览器的测试环境: PhantomJS