当AngularJS项目越来越大时候,需要进行单元测试,可以先开发功能再进行测试,也可以先进行测试。

一、karma 

  是一个基于Node.js(先要安装)的JavaScript测试执行过程管理工具(Test Runner)。Test Runner是用来跑测试的工具,即,写好测试,让它跑起来。

  可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。

  一个强大特性就是,可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。

二、jasmine

  是一个用于JS代码测试的行为驱动开发的框架,它不依赖于任何其他的JS框架以及DOM,是一个简洁及友好的API测试库。

  是代码中用来写断言的库,测试代码中expect和toBe等函数都来自它。

三、mock库

  angular-mocks.js 是一个AngularJS提供的一个用来Mock内置服务的独立测试库。如对$httpBackend,$exceptionHandler。

  $httpBackend 通过本地调用来模拟服务器对象。模拟http后端,即服务器。

  $httpBackend.whenGet("/someUrl").respond({name:'wolf'},{'X-Record-Count':100'});

  即,声明了一个模拟服务端,当测试代码请求Get/someUrl地址时候,被$httpBackend拦截,并返回一个JSON对象{name:'wolf'},同时,返回一个额外的response header : X-Record-Count 值为100.

  另外,需要$httpBackend.flush函数触发调用。而且,不要在mock写复杂业务逻辑,给出固定数据,返回固定数据。

四、jasmine语法

1、一个测试用例以describe函数来定义,它有两参数,第一个用来描述测试内容,第二个参数是一个函数,写一些真实的测试代码。

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

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

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

另外,describe函数里的作用域跟普通JS一样都是可以在里面的子函数里访问的,就像上面的it访问foo变量。

五、例子

1、测试一个服务

  一个服务:

angular.module("app.services").service("constService", function(){
  this.myConstanat = 2;
});

  编写测试(jasmine)

describe("constService", function () {
var out; // 被测对象
beforeEach(function () {
module('app.services');   // 导入模块
     inject(function (constService) {   // 注入依赖
  out = constService; // 关联被测对象实例
})); it("one == 1", function () {
expect(out.myConstant).toEqual(1);
});
});

2、模拟http请求返回值

  一般我们写$http请求,用如下代码到服务器端请求,函数通过http get请求得到user的值。

//通过http请求得到user
$scope.GetUser = function(){
$http.get('/auth.py').then(function(response) {
$scope.user = response.data;
});

  单元测试里我们并不真的希望发送一个http get请求来运行测试,因为那样会使测试复杂化,网络相关的各种问题都会导致测试失败,而且angular http服务是异步的,而我们希望测试是同步的。

 var scope,ctrl;
//inject利用angular的依赖注入,将需要的模块,服务插入作用域
beforeEach(inject(function ($controller, $rootScope) {
//模拟生成scope, $rootScope是angular中的顶级scope,angular中每个controller中的
//scope都是rootScope new出来的
scope = $rootScope.$new();
//模拟生成controller 并把先前生成的scope传入以方便测试
ctrl = $controller('unitTestCtrl', {$scope: scope});
}));
//开始测试
//模拟http get的返回值, 插入injector服务,让我们能够在测试代码中使用依赖注入来获得需要的服务
it('GetUser should fetch users', inject(function($injector){
// $httpBackend 是由angular mock提供的一个模拟http请求返回服务
// 可以用它来模拟http请求的返回值
// 这里通过$injector来获取它的实例
var $httpBackend = $injector.get('$httpBackend'); // $httpBackend 在Get方法,对 '/auth.py' 的url将会返回 一个jason对象
// {customerId: '1',name:'benwei'}
$httpBackend.when('GET', '/auth.py').respond({customerId: '1',name:'benwei'}); //以上为测试前的准备工作, 也可以把这部分代码放在beforeEach里,
//但要注意: beforeEach里的设置将影响所有在它作用域的测试用例。 //运行GetUser函数
scope.GetUser(); //把http的异步转为同步,要求$httpBackend立刻返回数据
$httpBackend.flush(); // 查看scope.user的值是否正确
expect(scope.user).toEqual({customerId: '1',name:'benwei'});
}));

AngularJS 单元测试 Karma jasmine的更多相关文章

  1. karma、jasmine做angularjs单元测试

    引用文:karma.jasmine做angularjs单元测试 karma和jasmine介绍 <1>技术介绍 karma karma是Testacular的新名字 karma是用来自动化 ...

  2. 基于karma和jasmine的Angularjs 单元测试

    Angularjs 基于karma和jasmine的单元测试 目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller     3.1 测试controller中变量值是否 ...

  3. angularJS测试一 Karma Jasmine Mock

    AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...

  4. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  5. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  6. 使用karma+jasmine做单元测试

    目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...

  7. 搭建Karma+Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

  8. 学习Karma+Jasmine+istanbul+webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

  9. AngularJs单元测试

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

随机推荐

  1. maven的父工程中添加子工程

    父工程的结构如下: 1.选中父工程名,接着单击鼠标右键,选择”Maven“ -----> "New Maven Module Project". 2.如下图,打勾 ---&g ...

  2. waf相关

    google上搜索下面信息: waf site:klionsec.github.io 有几篇比较有意思的问题: https://klionsec.github.io/2017/07/09/nginx- ...

  3. shell判断文件后缀名是否为特定字符串

    如果文件是 .css文件 或 .js文件,则进行处理. if [ "${file##*.}"x = "css"x ]||[ "${file##*.}& ...

  4. python多线程下载网页图片并保存至特定目录

    #!python3 #multidownloadXkcd.py - Download XKCD comics using multiple threads. import requests impor ...

  5. BZOJ 3131 [SDOI2013]淘金 - 数位DP

    传送门 Solution 这道数位$DP$看的我很懵逼啊... 首先我们肯定要先预处理出 $12$位乘起来的所有的可能情况, 记录入数组 $b$, 发现个数并不多, 仅$1e4$不到. 然后我们考虑算 ...

  6. HDU 2665.Kth number 区间第K小

    Kth number Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  7. java如何实现发邮件功能。

    http://blog.sina.com.cn/s/blog_59ca2c2a01013800.html http://www.cnblogs.com/xdp-gacl/p/4216311.html

  8. 在Tomcat中部署Spring jpetstore

    第三篇:在Tomcat中部署Spring jpetstore 博客分类: Java之web SpringTomcatMySQLJDBCMVC  Spring samples中的jpetstore,基于 ...

  9. 使用Simple MvvmToolkit开发Android和iOS程序

    详情见:Android and iOS Development with Simple MVVM Toolkit? Yes you can! :http://blog.tonysneed.com/20 ...

  10. 验证签名机制——java示例

    简单的验证公钥私钥签名认证: 公钥是对外公开的部分,私钥是不公开的部分,一般在项目开发中公钥是给用户,私钥是存于服务器上,二者中有一个加密,则需要另外一个来解密. 下面是java实现的一个比较简单的示 ...