AngularJs单元测试

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

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

一、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程序的代码覆盖率工具,它是以土耳其最大城市伊斯坦布尔命名,因为土耳其地毯世界闻名,而地毯是用来覆盖的.

二、Karma的安装

安装测试相关的npm模块建议使用—save-dev命令,因为这是开发相关的,一般情况下使用以下两个命令即可：

npm install  karma –save-dev

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

 

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

 

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

命令：karma init

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

 

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

四、Karma+Jasmine配置

1、安装karma-jasmine:

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

2、jasmine的语法：

以下为一个jasmine的例子：

 

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

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

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

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

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

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

五、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之后,下面我们分别以控制器,指令,过滤器来编写一个简单的单元测试.

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

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

 

然后我们编写一个测试脚本,代码如下:

 

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

4、ng里指令的单元测试

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

 

然后我们编写一个简单的测试脚本,代码如下:

 

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

 

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

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

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

 

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

 

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

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

 

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

 

六、运行

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

 

七、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:希望广大读者朋友批评指证,如需转载请注明出处.