在JavaScript的AngularJS库中进行单元测试的方法


Posted in Javascript onJune 23, 2015

开发者们都一致认为单元测试在开发项目中十分有好处。它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心。

在JavaScript的AngularJS库中进行单元测试的方法

 测试驱动开发流程图

AngularJS的代码声称其较高的可测性确实是合理的。单单文档中列出端对端的测试实例就能说明。就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易。即使官方文档中以提供了详尽的实例,但在我的实际应用中却还是很有挑战。这里我就简单示范一下我是怎么操作的吧.

Instant Karma

Karma 是来Angular团队针对JavaScript开发的一个测试运行框架。它很方便的实现了自动执行测试任务从而替代了繁琐的手工操作(好比回归测试集或是加载目标测试的依赖关系)Karma 和Angular的协作就好比花生酱和果冻.

只需要在Karma中定义好配置文件启动它,接下来它就会在预期的测试环境下的自动执行测试用例。你可以在配置文件中制定相关的测试环境。angular-seed,是我强烈推荐的可以快速实施的方案。在我近期的项目中Karma 的配置如下:
 

module.exports = function(config) {
  config.set({
    basePath: '../',
 
    files: [
      'app/lib/angular/angular.js',
      'app/lib/angular/angular-*.js',
      'app/js/**/*.js',
      'test/lib/recaptcha/recaptcha_ajax.js',
      'test/lib/angular/angular-mocks.js',
      'test/unit/**/*.js'
    ],
 
    exclude: [
      'app/lib/angular/angular-loader.js',
      'app/lib/angular/*.min.js',
      'app/lib/angular/angular-scenario.js'
    ],
 
    autoWatch: true,
 
    frameworks: ['jasmine'],
 
    browsers: ['PhantomJS'],
 
    plugins: [
      'karma-junit-reporter',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-jasmine',
      'karma-phantomjs-launcher'
    ],
 
    junitReporter: {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }
 
  })
}

这个跟angular-seed的默认配置类似只不过有以下几点不同:

  •     需要更改浏览器从Chrome 转到PhantomJS, 这样每次跳转时无需再打开新的浏览器窗口,但在OSX系统会有窗口延迟。所以这个插件还有浏览器设置都做了更改。
  •     由于我的应用需要引用Google的Recaptcha服务因此添加了依赖的recaptcha_ajax.js小文件。这个小配置就像在Karma的配置文件中添加一行代码那么简单。

autoWatch确实是个很酷的设置,它会让Karma在有文件更改时自动回归你的测试用例。你可以这样安装Karma:
 

npm install karma

angular-seed 提供了一个简单的脚本inscripts/test.sh去触发Karma的测试。

用Jasmine设计测试用例

当使用Jasmine----一种行为驱动开发模式的JavaScript测试框架为Angular设计单元测试用例时大部分的资源都已可获取。

这也就是我接下来要说的话题。

如果你要对AngularJS controller做单元测试可以利用Angular的依赖注入dependency injection 功能导入测试场景中controller需要的服务版本还能同时检查预期的结果是否正确。例如,我定义了这个controller去高亮需要导航去的那个页签:
 

app.controller('NavCtrl', function($scope, $location) {
  $scope.isActive = function(route) {
    return route === $location.path();
  };
})

如果想要测试isActive方法,我会怎么做呢?我将检查$locationservice 变量是否返回了预期值,方法返回的是否预期值。因此在我们的测试说明中我们会定义好局部变量保存测试过程中需要的controlled版本并在需要时注入到对应的controller当中。然后在实际的测试用例中我们会加入断言来验证实际的结果是否正确。整个过程如下:
 

describe('NavCtrl', function() {
  var $scope, $location, $rootScope, createController;
 
  beforeEach(inject(function($injector) {
    $location = $injector.get('$location');
    $rootScope = $injector.get('$rootScope');
    $scope = $rootScope.$new();
 
    var $controller = $injector.get('$controller');
 
    createController = function() {
      return $controller('NavCtrl', {
        '$scope': $scope
      });
    };
  }));
 
  it('should have a method to check if the path is active', function() {
    var controller = createController();
    $location.path('/about');
    expect($location.path()).toBe('/about');
    expect($scope.isActive('/about')).toBe(true);
    expect($scope.isActive('/contact')).toBe(false);
  });
});

使用整个基本的结构,你就能设计各种类型的测试。由于我们的测试场景使用了本地的环境来调用controller,你也可以多加上一些属性接着执行一个方法清除这些属性,然后再验证一下属性到底有没有被清除。

$httpBackendIs Cool

那么要是你在调用$httpservice请求或是发送数据到服务端呢?还好,Angular提供了一种

$httpBackend的mock方法。这样的话,你就能自定义服务端的响应内容,又或是确保服务端的响应结果能和单元测试中的预期保持一致。

具体细节如下:
 

describe('MainCtrl', function() {
  var $scope, $rootScope, $httpBackend, $timeout, createController;
  beforeEach(inject(function($injector) {
    $timeout = $injector.get('$timeout');
    $httpBackend = $injector.get('$httpBackend');
    $rootScope = $injector.get('$rootScope');
    $scope = $rootScope.$new();
 
 
    var $controller = $injector.get('$controller');
 
    createController = function() {
      return $controller('MainCtrl', {
        '$scope': $scope
      });
    };
  }));
 
  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });
 
  it('should run the Test to get the link data from the go backend', function() {
    var controller = createController();
    $scope.urlToScrape = 'success.com';
 
    $httpBackend.expect('GET', '/slurp?urlToScrape=http:%2F%2Fsuccess.com')
      .respond({
        "success": true,
        "links": ["http://www.google.com", "http://angularjs.org", "http://amazon.com"]
      });
 
    // have to use $apply to trigger the $digest which will
    // take care of the HTTP request
    $scope.$apply(function() {
      $scope.runTest();
    });
 
    expect($scope.parseOriginalUrlStatus).toEqual('calling');
 
    $httpBackend.flush();
 
    expect($scope.retrievedUrls).toEqual(["http://www.google.com", "http://angularjs.org", "http://amazon.com"]);
    expect($scope.parseOriginalUrlStatus).toEqual('waiting');
    expect($scope.doneScrapingOriginalUrl).toEqual(true);
  });
});

正如你所见,beforeEach call其实都很类似,唯一不同的是我们是从injector获取$httpBackend而并非直接获取。即使如此,创建不同的测试时还会有一些明显的不同之处。对初学者来说,会有一个afterEachcall 方法来确保$httpBackend在每次用例执行后不会有明显的异常请求。如果你观察一下测试场景的设置和$httpBackend方法的应用就会会发现有那么几点不是那么直观的。
 

实际上调用$httpBackend的方法也算是简单明了但还不够——我们还得在传值给$scope.$apply的方法中把调用封装到实际测试中的$scope.runTest方法上。这样在$digest被触发后才能处理HTTP请求。而如你所见直到我们调用$httpBackend.flush()方法后$httpBackend才会被解析,这也就保证了我们能在调用过程中去验证返回的结果是否正确(在上面的示例中,controller的$scope.parseOriginalUrlStatusproperty属性将被传递给调用者,我们也因此能实时监控)

接下来的几行代码都是在调用过程中检测$scopethat属性的断言。很酷吧?

提示:在某些单元测试中,用户习惯把没有$的范围标记为变量。这个在Angular文档中并没有强制要求或是过分强调,只是我在使用中为了提高可读性和一致性才使用$scopelike这种方式。

结论

也许这就是我做起来对其他人而言只是自然而然能做到的事情之一,但是学习使用Angular编写单元测试一开始对我而言确实是相当痛苦的。我发现自己对如何开始的理解大多来自互联网上各种博客文章和资源的拼拼凑凑,没有真正一致或明确的最佳实践,而是通过自然而然随意的选择。我想针对我最终得到的成果提供一些文档,以帮助那些也许还在坑里面挣扎的其他人,毕竟他们只是想要编写代码而已,而非不得不去了解Angular和Jasmine中所有的怪异特性和独特用法。因此我希望这篇文章能对你有些许帮助。

Javascript 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
JS前端加密算法示例
Dec 22 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 #Javascript
js的flv视频播放器插件使用方法
Jun 23 #Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 #Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 #Javascript
浅谈setTimeout 与 setInterval
Jun 23 #Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 #Javascript
javascript中传统事件与现代事件
Jun 23 #Javascript
You might like
VOLVO车载收音机
2021/03/02 无线电
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
详解Python学习之安装pandas
2019/04/16 Python
Django后台admin的使用详解
2019/07/08 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
什么是.net
2015/08/03 面试题
就业自荐信
2013/12/04 职场文书
网络研修随笔感言
2015/11/18 职场文书