详解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.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$
执行日志如下所示：
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$
在这个过程中可以看到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: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
执行日志入如下所示：
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设定为true
- 将chrome的launcher换成phantomjs
- 将浏览器也从Chrome换成PhantomJS
如果使用的是Angular 8或者是es6的target设定需要将target做如下修改
liumiaocn:demo liumiao$ diff tsconfig.json tsconfig.json.org 13c13 < "target": "es5", --- > "target": "es2015", liumiaocn:demo liumiao$
步骤3: 执行测试
执行ng test可以看到使用的是PhantomJS进行的测试，而且在执行过程中并没有浏览器被打开和执行。
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已经暂停更新，碰到问题时可能会较为尴尬，比如目前就出现在Angular 8升级是PhantomJS无法正常动作的网上发帖求助，实际上修改为es5能解决大部分问题，所以选择时需要慎重考虑。
无需打开浏览器的测试环境: Chrome的无头模式
PhantomJS使用Webkit内核，无需打开浏览器来完成测试，而实际上除去IE的很多浏览器都提供这种所谓的无头（Headless）模式，Chrome也可以直接提供，在Chrome 59开始提供了headless mode（无头模式）。在Angular 8中使用Chrome的无头模式进行测试非常简单，只需要修改缺省的浏览器从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设定为true
- 将浏览器从Chrome改成ChromeHeadless
步骤2: 执行测试
执行ng test可以看到使用的是ChromeHeadless进行的测试，而且在执行过程中并没有浏览器被打开和执行。
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$
总结
这篇文章介绍了三种常见的Karma的集成方式，由于PhantomJS暂停更新，并且其内核只是Webkit，所以大多数情况直接使用浏览器的Headless Mode可能是个更好的主意。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用Jasmine和Karma对AngularJS页面程序进行测试
AngularJS是继jQuery之后发生在JavaScript上最好的东西.这也是JavaScript开发一直以来想要的方式.Angular主要的优点之一就是它的依赖注入(Dependency Injection),它非常利于代码的单元测试.但有点小怪异的是,我在无论如何都没能找到一个介绍如何做单元测试的教程. 当然有很多不错的推荐:使用Jasmine测试框架和Karma测试执行器(Test Runner):但是并没有一篇完整的从无到有指导如何测试的教程.所以我写了这篇文章.我在网上找了很多资
-
详解Angular Karma测试的持续集成实践
使用Angular + Karma + Jasmine可以进行前端的单体测试,从前面的文章中我们了解到了Karma的工作原理,它会启动一个指定种类的浏览器,然后在此浏览器中运行测试用例.如果需要进行持续集成,比如结合Jenkins或者其他方式进行自动化的测试,如果需要手动关闭浏览器的操作,或者无法提供图形化的界面的情况保证测试的执行这些都会成为持续集成的障碍,这篇文章整理一下解决的常见方法. 可使用浏览器的测试环境 当测试环境可以使用浏览器,在这台机器上使用ng test则能进行测试,Karma
-
详解Angular依赖注入
目录 概述 一.依赖注入 二.Angular的依赖注入框架 概述 依赖注入:设计模式 依赖:程序里需要的某种类型的对象. 依赖注入框架:工程化的框架 注入器Injector:用它的API创建依赖的实例 Provider:怎样创建?(构造函数,工程函数) Object:组件,模块需要的依赖 依赖性注入进阶=>Angular中依赖注入框架提供父子层次注入型依赖 一.依赖注入 class Id { static getInstance(type: string): Id { return new Id
-
详解Angular中$cacheFactory缓存的使用
最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module
-
详解Angular父子组件通讯
概述 Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来
-
详解Angular结构型指令模块和样式
一,结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template. <ng-template [ngIf]="item.reminder"> <mat-icon > alar
-
详解Angular路由动画及高阶动画函数
一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 在router.animate.ts中定义一个进场动画,一个离场动画. 因为进场动画和离场动画用的特别频繁,有一个别名叫:enter和:leave. import { trigger, state, transition, style, animate} from '@angular/animations'; export const slideToR
-
详解Angular动态组件
使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现 然后我们来找个把手,看
-
详解Angular组件之投影
概述 运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-content>指令来标记投影点 <div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content>
-
详解Angular组件之生命周期(二)
一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child
-
详解Angular组件生命周期(一)
概述 组件声明周期以及angular的变化发现机制 红色方法只执行一次. 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法. 总共9个方法. 每个钩子都是@angular/core库里定义的接口. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-life', templateUrl: './life.component.html', styleUrls: ['./life