重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊(cè)、服務(wù)器等服務(wù)
詳解AngularKarma測試的持續(xù)集成實(shí)踐
使用Angular + Karma + Jasmine可以進(jìn)行前端的單體測試，從前面的文章中我們了解到了Karma的工作原理，它會(huì)啟動(dòng)一個(gè)指定種類的瀏覽器，然后在此瀏覽器中運(yùn)行測試用例。如果需要進(jìn)行持續(xù)集成，比如結(jié)合Jenkins或者其他方式進(jìn)行自動(dòng)化的測試，如果需要手動(dòng)關(guān)閉瀏覽器的操作，或者無法提供圖形化的界面的情況保證測試的執(zhí)行這些都會(huì)成為持續(xù)集成的障礙，這篇文章整理一下解決的常見方法。
創(chuàng)新互聯(lián)公司專注于古藺網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供古藺營銷型網(wǎng)站建設(shè)，古藺網(wǎng)站制作、古藺網(wǎng)頁設(shè)計(jì)、古藺網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造古藺網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供古藺網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
可使用瀏覽器的測試環(huán)境
當(dāng)測試環(huán)境可以使用瀏覽器，在這臺(tái)機(jī)器上使用ng test則能進(jìn)行測試，Karma會(huì)啟動(dòng)Chrome瀏覽器，然后執(zhí)行測試用例，持續(xù)集成的時(shí)候，Jenkins通過遠(yuǎn)程命令執(zhí)行的方式到可使用瀏覽器的測試環(huán)境中執(zhí)行ng test完成測試。
這種方式非常簡單，需要解決的只有一個(gè)問題，Angular 的demo應(yīng)用執(zhí)行ng test時(shí)，執(zhí)行完畢之后，Chrome瀏覽器也不會(huì)退出，這樣Jenkins的調(diào)用部分也不會(huì)返回，只需要保證其執(zhí)行結(jié)束后立即關(guān)閉瀏覽器，這種方式就沒有問題了。而實(shí)際上Karma的設(shè)定文件中，singleRun正是這個(gè)選項(xiàng)，缺省被設(shè)定為false，這就是其不退出的原因。只需要將此選項(xiàng)設(shè)定為true即可。demo示例的Karma設(shè)定文件改成如下即可：
liumiaocn:demo liumiao$ cp karma.conf.js karma.conf.js.origin liumiaocn:demo liumiao$ vi karma.conf.js liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin 29c29 < singleRun: true, --- > singleRun: false, liumiaocn:demo liumiao$
執(zhí)行日志如下所示：
liumiaocn:demo liumiao$ rm -rf coverage/ liumiaocn:demo liumiao$ ls README.md e2e node_modules src tsconfig.spec.json angular.json karma.conf.js package-lock.json tsconfig.app.json tslint.json browserslist karma.conf.js.origin package.json tsconfig.json liumiaocn:demo liumiao$ liumiaocn:demo liumiao$ ng test --code-coverage 30% 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 unlimited 30% building 13/13 modules 0 active31 10 2019 20:19:39.324:INFO [launcher]: Starting browser Chrome 31 10 2019 20:19:43.028:INFO [Chrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket Pwhf3R-KNkzVDi1AAAAA with id 46366297 Chrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.373 secs / 0.321 secs) TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS =============================== Coverage summary =============================== Statements : 100% ( 6/6 ) Branches : 100% ( 0/0 ) Functions : 100% ( 1/1 ) Lines : 100% ( 5/5 ) ================================================================================ liumiaocn:demo liumiao$ ls README.md coverage karma.conf.js.origin package.json tsconfig.json angular.json e2e node_modules src tsconfig.spec.json browserslist karma.conf.js package-lock.json tsconfig.app.json tslint.json liumiaocn:demo liumiao$
在這個(gè)過程中可以看到Chrome被自動(dòng)打開、執(zhí)行測試用例并顯示結(jié)果然后自動(dòng)退出了。通過遠(yuǎn)程方式調(diào)用應(yīng)該也沒有問題。不評(píng)價(jià)解決方法的好壞與局限性，這也是一種實(shí)現(xiàn)的方式。
無需打開瀏覽器的測試環(huán)境: PhantomJS
比如測試環(huán)境在一個(gè)基于Alpine版Linux的容器之中的情況下，無法使用或者不希望使用圖形化的瀏覽器的情況下，可以使用瀏覽器的Headless模式或者無界面方式的瀏覽器。PhantomJS就是這樣的一種解決方法，Phantom是一個(gè)隱形的瀏覽器，就像它的名字那樣，像一個(gè)“鬼魂/幻影/幽靈”，而事實(shí)上并沒有那么高深。PhantomJS是基于Webkit內(nèi)核的Headless模式，所以Webkit瀏覽器能做的事情，基本上它都能做，在之前爬蟲的一些使用場景中有需要愛好者的追隨。目前穩(wěn)定版本為2.1，短時(shí)間內(nèi)將為穩(wěn)定在這一版本，因?yàn)槟壳捌湟呀?jīng)暫停更新了，更新時(shí)間據(jù)說會(huì)另行通知，但是遲遲未到。使用這個(gè)暫時(shí)停更的PhantomJS也是一種解決方法，具體步驟如下。
步驟1: 安裝PhantomJS
安裝非常簡單，PhantomJS提供Windows/Linux/MacOS的二進(jìn)制文件，只需要將相應(yīng)的bin目錄加入到PATH搜素路徑中即完成了安裝，此處以MacOS上的安裝為例。
下載地址：https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
解壓：解壓至/usr/local/phantomjs下
版本確認(rèn)：phantomjs --version
liumiaocn:demo liumiao$ export PATH=$PATH:/usr/local/phantomjs/phantomjs-2.1.1-macosx/bin liumiaocn:demo liumiao$ which phantomjs /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs liumiaocn:demo liumiao$ phantomjs --version 2.1.1 liumiaocn:demo liumiao$
步驟2: 安裝karma-phantomjs-launcher
執(zhí)行日志入如下所示：
liumiaocn:demo liumiao$ npm install --save-dev karma-phantomjs-launcher > phantomjs-prebuilt@2.1.16 install /Users/liumiao/Desktop/demo/node_modules/phantomjs-prebuilt > node install.js Considering PhantomJS found at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs Found PhantomJS at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs ...verifying Writing location.js file PhantomJS is already installed on PATH at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs npm WARN eslint-plugin-compat@3.3.0 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. + karma-phantomjs-launcher@1.0.4 added 16 packages from 36 contributors in 9.804s liumiaocn:demo liumiao$
步驟3: 修改Karma的配置文件
將缺省的karma配置文件做如下修改即可
liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin
10c10
< require('karma-phantomjs-launcher'),
---
> require('karma-chrome-launcher'),
28,29c28,29
< browsers: ['PhantomJS'],
< singleRun: true,
---
> browsers: ['Chrome'],
> singleRun: false,
liumiaocn:demo liumiao$
修改說明：
- 仍然需要將singleRun設(shè)定為true
- 將chrome的launcher換成phantomjs
- 將瀏覽器也從Chrome換成PhantomJS
如果使用的是Angular 8或者是es6的target設(shè)定需要將target做如下修改
liumiaocn:demo liumiao$ diff tsconfig.json tsconfig.json.org 13c13 < "target": "es5", --- > "target": "es2015", liumiaocn:demo liumiao$
步驟3: 執(zhí)行測試
執(zhí)行ng test可以看到使用的是PhantomJS進(jìn)行的測試，而且在執(zhí)行過程中并沒有瀏覽器被打開和執(zhí)行。
liumiaocn:demo liumiao$ ng test --code-coverage 25% building 94/94 modules 0 active01 11 2019 06:11:48.490:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/ 01 11 2019 06:11:48.493:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited 25% building 96/96 modules 0 active01 11 2019 06:11:48.573:INFO [launcher]: Starting browser PhantomJS 01 11 2019 06:11:52.035:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket PTR3E6eTdHOW0JcEAAAA with id 8370488 PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 SUCCESS (0.512 secs / 0.769 secs) TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS =============================== Coverage summary =============================== Statements : 100% ( 7/7 ) Branches : 100% ( 0/0 ) Functions : 100% ( 2/2 ) Lines : 100% ( 6/6 ) ================================================================================ liumiaocn:demo liumiao$
此中方式由于PhantomJS已經(jīng)暫停更新，碰到問題時(shí)可能會(huì)較為尷尬，比如目前就出現(xiàn)在Angular 8升級(jí)是PhantomJS無法正常動(dòng)作的網(wǎng)上發(fā)帖求助，實(shí)際上修改為es5能解決大部分問題，所以選擇時(shí)需要慎重考慮。
無需打開瀏覽器的測試環(huán)境: Chrome的無頭模式
PhantomJS使用Webkit內(nèi)核，無需打開瀏覽器來完成測試，而實(shí)際上除去IE的很多瀏覽器都提供這種所謂的無頭（Headless）模式，Chrome也可以直接提供，在Chrome 59開始提供了headless mode（無頭模式）。在Angular 8中使用Chrome的無頭模式進(jìn)行測試非常簡單，只需要修改缺省的瀏覽器從Chrome到ChromeHeadless即可。
步驟1: 修改Karma的配置文件
將缺省的karma配置文件做如下修改即可
liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin 28,29c28,29 < browsers: ['ChromeHeadless'], < singleRun: true, --- > browsers: ['Chrome'], > singleRun: false, liumiaocn:demo liumiao$
修改說明：
- 仍然需要將singleRun設(shè)定為true
- 將瀏覽器從Chrome改成ChromeHeadless
步驟2: 執(zhí)行測試
執(zhí)行ng test可以看到使用的是ChromeHeadless進(jìn)行的測試，而且在執(zhí)行過程中并沒有瀏覽器被打開和執(zhí)行。
liumiaocn:demo liumiao$ ng test --code-coverage 25% building 15/15 modules 0 active01 11 2019 06:37:05.037:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/ 01 11 2019 06:37:05.040:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited 25% building 93/93 modules 0 active01 11 2019 06:37:05.154:INFO [launcher]: Starting browser ChromeHeadless 01 11 2019 06:37:08.720:INFO [HeadlessChrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket Br7fkzwejyGNs2WgAAAA with id 35869507 HeadlessChrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.374 secs / 0.319 secs) TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS =============================== Coverage summary =============================== Statements : 100% ( 7/7 ) Branches : 100% ( 0/0 ) Functions : 100% ( 2/2 ) Lines : 100% ( 6/6 ) ================================================================================ liumiaocn:demo liumiao$
總結(jié)
這篇文章介紹了三種常見的Karma的集成方式，由于PhantomJS暫停更新，并且其內(nèi)核只是Webkit，所以大多數(shù)情況直接使用瀏覽器的Headless Mode可能是個(gè)更好的主意。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目：詳解AngularKarma測試的持續(xù)集成實(shí)踐
當(dāng)前地址：http://www.xueling.net.cn/article/pisdgg.html