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

2023-08-08 19:33:04 65

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

可使用浏览器的测试环境

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

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

liumiaocn:demoliumiao$cpkarma.conf.jskarma.conf.js.origin
liumiaocn:demoliumiao$vikarma.conf.js
liumiaocn:demoliumiao$diffkarma.conf.jskarma.conf.js.origin
29c29
singleRun:false,
liumiaocn:demoliumiao$

执行日志如下所示：

liumiaocn:demoliumiao$rm-rfcoverage/
liumiaocn:demoliumiao$ls
README.mde2enode_modulessrctsconfig.spec.json
angular.jsonkarma.conf.jspackage-lock.jsontsconfig.app.jsontslint.json
browserslistkarma.conf.js.originpackage.jsontsconfig.json
liumiaocn:demoliumiao$
liumiaocn:demoliumiao$ngtest--code-coverage
30%building12/12modules0active3110201920:19:39.308:INFO[karma-server]:Karmav4.1.0serverstartedathttp://0.0.0.0:9876/
3110201920:19:39.314:INFO[launcher]:LaunchingbrowsersChromewithconcurrencyunlimited
30%building13/13modules0active3110201920:19:39.324:INFO[launcher]:StartingbrowserChrome
3110201920:19:43.028:INFO[Chrome78.0.3904(MacOSX10.14.0)]:ConnectedonsocketPwhf3R-KNkzVDi1AAAAAwithid46366297
Chrome78.0.3904(MacOSX10.14.0):Executed3of3SUCCESS(0.373secs/0.321secs)
TOTAL:3SUCCESS
TOTAL:3SUCCESS
TOTAL:3SUCCESS

===============================Coveragesummary===============================
Statements:100%(6/6)
Branches:100%(0/0)
Functions:100%(1/1)
Lines:100%(5/5)
================================================================================
liumiaocn:demoliumiao$ls
README.mdcoveragekarma.conf.js.originpackage.jsontsconfig.json
angular.jsone2enode_modulessrctsconfig.spec.json
browserslistkarma.conf.jspackage-lock.jsontsconfig.app.jsontslint.json
liumiaocn:demoliumiao$

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

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

比如测试环境在一个基于Alpine版Linux的容器之中的情况下，无法使用或者不希望使用图形化的浏览器的情况下，可以使用浏览器的Headless模式或者无界面方式的浏览器。PhantomJS就是这样的一种解决方法，Phantom是一个隐形的浏览器，就像它的名字那样，像一个“鬼魂/幻影/幽灵”，而事实上并没有那么高深。PhantomJS是基于Webkit内核的Headless模式，所以Webkit浏览器能做的事情，基本上它都能做，在之前爬虫的一些使用场景中有需要爱好者的追随。目前稳定版本为2.1，短时间内将为稳定在这一版本，因为目前其已经暂停更新了，更新时间据说会另行通知，但是迟迟未到。使用这个暂时停更的PhantomJS也是一种解决方法，具体步骤如下。

步骤1:安装PhantomJS

安装非常简单，PhantomJS提供Windows/Linux/MacOS的二进制文件，只需要将相应的bin目录加入到PATH搜素路径中即完成了安装，此处以MacOS上的安装为例。

下载地址：https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip

解压：解压至/usr/local/phantomjs下

版本确认：phantomjs--version

liumiaocn:demoliumiao$exportPATH=$PATH:/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin
liumiaocn:demoliumiao$whichphantomjs
/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs
liumiaocn:demoliumiao$phantomjs--version
2.1.1
liumiaocn:demoliumiao$

步骤2:安装karma-phantomjs-launcher

执行日志入如下所示：

liumiaocn:demoliumiao$npminstall--save-devkarma-phantomjs-launcher

>phantomjs-prebuilt@2.1.16install/Users/liumiao/Desktop/demo/node_modules/phantomjs-prebuilt
>nodeinstall.js

ConsideringPhantomJSfoundat/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs
FoundPhantomJSat/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs...verifying
Writinglocation.jsfile
PhantomJSisalreadyinstalledonPATHat/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs
npmWARNeslint-plugin-compat@3.3.0requiresapeerofeslint@^3.0.0||^4.0.0||^5.0.0||^6.0.0butnoneisinstalled.Youmustinstallpeerdependenciesyourself.

+karma-phantomjs-launcher@1.0.4
added16packagesfrom36contributorsin9.804s
liumiaocn:demoliumiao$

步骤3:修改Karma的配置文件

将缺省的karma配置文件做如下修改即可

liumiaocn:demoliumiao$diffkarma.conf.jskarma.conf.js.origin
10c10
require('karma-chrome-launcher'),
28,29c28,29
browsers:['Chrome'],
>singleRun:false,
liumiaocn:demoliumiao$

修改说明：

仍然需要将singleRun设定为true
将chrome的launcher换成phantomjs
将浏览器也从Chrome换成PhantomJS

如果使用的是Angular8或者是es6的target设定需要将target做如下修改

liumiaocn:demoliumiao$difftsconfig.jsontsconfig.json.org
13c13
<"target":"es5",
---
>"target":"es2015",
liumiaocn:demoliumiao$

步骤3:执行测试

执行ngtest可以看到使用的是PhantomJS进行的测试，而且在执行过程中并没有浏览器被打开和执行。

liumiaocn:demoliumiao$ngtest--code-coverage
25%building94/94modules0active0111201906:11:48.490:INFO[karma-server]:Karmav4.1.0serverstartedathttp://0.0.0.0:9876/
0111201906:11:48.493:INFO[launcher]:LaunchingbrowsersPhantomJSwithconcurrencyunlimited
25%building96/96modules0active0111201906:11:48.573:INFO[launcher]:StartingbrowserPhantomJS
0111201906:11:52.035:INFO[PhantomJS2.1.1(MacOSX0.0.0)]:ConnectedonsocketPTR3E6eTdHOW0JcEAAAAwithid8370488
PhantomJS2.1.1(MacOSX0.0.0):Executed3of3SUCCESS(0.512secs/0.769secs)
TOTAL:3SUCCESS
TOTAL:3SUCCESS
TOTAL:3SUCCESS

===============================Coveragesummary===============================
Statements:100%(7/7)
Branches:100%(0/0)
Functions:100%(2/2)
Lines:100%(6/6)
================================================================================
liumiaocn:demoliumiao$

此中方式由于PhantomJS已经暂停更新，碰到问题时可能会较为尴尬，比如目前就出现在Angular8升级是PhantomJS无法正常动作的网上发帖求助，实际上修改为es5能解决大部分问题，所以选择时需要慎重考虑。

无需打开浏览器的测试环境:Chrome的无头模式

PhantomJS使用Webkit内核，无需打开浏览器来完成测试，而实际上除去IE的很多浏览器都提供这种所谓的无头（Headless）模式，Chrome也可以直接提供，在Chrome59开始提供了headlessmode（无头模式）。在Angular8中使用Chrome的无头模式进行测试非常简单，只需要修改缺省的浏览器从Chrome到ChromeHeadless即可。

步骤1:修改Karma的配置文件

将缺省的karma配置文件做如下修改即可

liumiaocn:demoliumiao$diffkarma.conf.jskarma.conf.js.origin
28,29c28,29
browsers:['Chrome'],
>singleRun:false,
liumiaocn:demoliumiao$

修改说明：

仍然需要将singleRun设定为true
将浏览器从Chrome改成ChromeHeadless

步骤2:执行测试

执行ngtest可以看到使用的是ChromeHeadless进行的测试，而且在执行过程中并没有浏览器被打开和执行。

liumiaocn:demoliumiao$ngtest--code-coverage
25%building15/15modules0active0111201906:37:05.037:INFO[karma-server]:Karmav4.1.0serverstartedathttp://0.0.0.0:9876/
0111201906:37:05.040:INFO[launcher]:LaunchingbrowsersChromeHeadlesswithconcurrencyunlimited
25%building93/93modules0active0111201906:37:05.154:INFO[launcher]:StartingbrowserChromeHeadless
0111201906:37:08.720:INFO[HeadlessChrome78.0.3904(MacOSX10.14.0)]:ConnectedonsocketBr7fkzwejyGNs2WgAAAAwithid35869507
HeadlessChrome78.0.3904(MacOSX10.14.0):Executed3of3SUCCESS(0.374secs/0.319secs)
TOTAL:3SUCCESS
TOTAL:3SUCCESS
TOTAL:3SUCCESS

===============================Coveragesummary===============================
Statements:100%(7/7)
Branches:100%(0/0)
Functions:100%(2/2)
Lines:100%(6/6)
================================================================================
liumiaocn:demoliumiao$

总结

这篇文章介绍了三种常见的Karma的集成方式，由于PhantomJS暂停更新，并且其内核只是Webkit，所以大多数情况直接使用浏览器的HeadlessMode可能是个更好的主意。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐