AngularJs单元测试

这篇文章主要介绍了angularJS中的单元测试实例,本文主要介绍利用Karma和Jasmine来进行ng模块的单元测试,并用Istanbul  来生成代码覆盖率测试报告,须要的朋友们能够参考下,如下可全都是干货哦！

当ng项目愈来愈大的时候,单元测试就要提上日程了,有的时候团队是以测试先行,有的是先实现功能,后面再测试功能模块,这个各有利弊,今天主要说说利用karma和jasmine来进行ng模块的单元测试.

1、Karma+Jasmine+ Istanbul

Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular更名为Karma.Karma是一个让人感到很是神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透！

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）.该工具可用于测试全部主流Web浏览器,也可集成到CI（Continuous integration）工具,也可和其余代码编辑器一块儿使用.这个测试工具的一个强大特性就是,它能够监控(Watch)文件的变化,而后自行执行,经过console.log显示测试结果.

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

上面是Jasmine官网对其的解释,中文意思是：Jasmine是一个用于JS代码测试的行为驱动开发的框架,它不依赖于任何其余的JS框架以及DOM,是一个简洁及友好的API测试库.

 

Istanbul是JavaScript程序的代码覆盖率工具,它是以土耳其最大城市伊斯坦布尔命名,由于土耳其地毯世界闻名,而地毯是用来覆盖的.

2、Karma的安装

安装测试相关的npm模块建议使用—save-dev命令,由于这是开发相关的,通常状况下使用如下两个命令便可：

npm install  karma –save-dev

检测karma安装是否成功（以下表示安装成功）：

 

安装karma时会自动安装一些经常使用的模块,参考karma代码里的package.json文件的devDependencies属性：

 

而后使用命令生成配置文件,该配置文件是nodejs风格的：

命令：karma init

输入命令后根据提示,使用“tab”切换选项和“enter”下一步便可,生成的配置文件格式以下：

 

以上即是karma配置文件的基本内容.

4、Karma+Jasmine配置

一、安装karma-jasmine:

使用命令 : npm install karma-jasmine --save-dev 安装

二、jasmine的语法：

如下为一个jasmine的例子：

 

上面是一个jasmine的例子,这里就几个重要的API作一下介绍：

1.首先任何一个测试用例以describe函数来定义,它有两参数,第一个用来描述测试大致的中心内容,第二个参数是一个函数,里面写一些真实的测试代码

2.it是用来定义单个具体测试任务,也有两个参数,第一个用来描述测试内容,第二个参数是一个函数,里面存放一些测试方法

3.expect主要用来计算一个变量或者一个表达式的值,而后用来跟指望的值比较或者作一些其它的事件

4.beforeEach与afterEach主要是用来在执行测试任务以前和以后作一些事情,上面的例子就是在执行以前改变变量的值,而后在执行完成以后重置变量的值

最后要说的是,describe函数里的做用域跟普通JS同样都是能够在里面的子函数里访问的,就像上面的it访问foo变量,更多的API请 点击这里 .

5、ng的单元测试

由于ng自己框架的缘由,模块都是经过DI(Dependency Injection依赖注入)来加载以及实例化的,因此为了方便配合jasmine来编写测试脚本,因此官方提供了angular-mock.js的一个测试工具类来提供模块定义,加载,注入等.

下面说说ng-mock里的一些经常使用方法

1.angular.mock.module 此方法一样在window命名空间下,很是方便调用module是用来配置inject方法注入的模块信息,参数能够是字符串,函数,对象,能够像下面这样使用,代码以下:

 

它通常用在beforeEach方法里,由于这个能够确保在执行测试任务的时候,inject方法能够获取到模块配置

2.angular.mock.inject 此方法一样在window命名空间下,很是方便调用inject是用来注入上面配置好的ng模块,方面在it的测试函数里调用,常见的调用例子以下:

 

上面是官方提供的一些inject例子,代码很好看懂,其实inject里面就是利用angular.inject方法建立的一个内置的依赖注入实例,而后里面的模块注入跟普通ng模块里的依赖处理是同样的.

简单的介绍完ng-mock以后,下面咱们分别以控制器,指令,过滤器来编写一个简单的单元测试.

三、ng里控制器的单元测试

定义一个简单的控制器, 代码以下:

 

而后咱们编写一个测试脚本,代码以下:

 

上面利用了$rootScope来建立子做用域,而后把这个参数传进控制器的构建方法$controller里去,最终会执行上面的控制器里的方法,而后咱们检查子做用域里的对象属性是否跟指望值相等.

四、ng里指令的单元测试

定义一个简单的指令,代码以下:

 

而后咱们编写一个简单的测试脚本,代码以下:

 

上面的指令将会这用在html里使用,代码以下:

 

测试脚本里首先注入$compile与$rootScope两个服务,一个用来编译html,一个用来建立做用域用,注意这里的_,默认ng里注入的服务先后加上_时,最后会被ng处理掉的,这两个服务保存在内部的两个变量里,方便下面的测试用例能调用到$compile方法传入原指令html,而后在返回的函数里传入$rootScope,这样就完成了做用域与视图的绑定,最后调用$rootScope.$digest来触发全部监听,保证视图里的模型内容获得更新,而后获取当前指令对应元素的html内容与指望值进行对比.

五、ng里的过滤器单元测试

定义一个简单的过滤器,代码以下:

 

而后编写一个简单的测试脚本,代码以下:

 

上面的代码先配置过滤器模块,而后定义一个version值,由于interpolate依赖这个服务,最后用inject注入interpolate过滤器,注意这里的过滤器后面得加上Filter后缀,最后传入文本内容到过滤器函数里执行,与指望值进行对比.

最终上面的被测试文件IndexCtrl.js代码以下：

 

测试脚本IndexCtrlTest.js代码以下：

 

6、运行

输入命令： karma start karma.conf.js 启动,测试结果以下：

 

7、Karma+Istanbul 生成代码覆盖率

安装istanbul依赖：npm install –g karma-coverage

修改karma.conf.js配置：

 

启动karma,在工程目录下找到coverage文件夹,生成的覆盖率文件都包含在该文件夹中,在浏览器中打开“coverage/index.html”文件,可看到生成的代码覆盖率报告：

 

覆盖率是100%,说明咱们完整了测试了IndexCtrl.js的功能.

如今咱们在filter中加入一个if分支,代码以下：

 

再看代码覆盖率报告,以下所示：

 

Statements：85.71%覆盖,Branches：50%覆盖.

为了产品的质量咱们要尽可能达到更多的覆盖率,通常对于JAVA项目来讲,能达到80%就是至关高的标准了.对于Javascript的代码测试及覆盖率研究,我还要作更多的验证.

 

PS:但愿广大读者朋友批评指证,如需转载请注明出处.