AngularJS 单元测试(二)详解

使用对象模拟注入

我们可以非常容易的使用angularjs的$provider服务用一个对象模拟一个依赖并且注入。

例子如下

 angular.module('artists',[]).
  factory('Artists',['imageStore',function(imageStore){
    return {
      thumb:function(){
        return imageStore.thumbnailUrl(id)
      }
    }
  }])

如何实现

如何确定了服务

1、创建一个URL的引用,稍后会被mock捕获,和为Artists注入的一个变量

var URL;
var Artists;

2、紧接着在beforeEach方法中使用$provide 服务注册模拟的factory服务。使用一个对象模拟thumbnailUrl方法。

beforeEach(module(function($provide){
  $provide.value('imageStore',{
    thumbnailUrl:function(id){
      url='/thumb/'+id
    }
  })
})

3、使用$injector服务注入这个方法,返回这个Artists服务并且用刚才创建的的变量来声明,稍后可以使用到。

 beforeEach(inject(function($inject){
  Artists=$inject.get('Artists');
 }))

4、调用Artists创建一个简单的测试

it('return the correct artist thumbnailUrl',function(){
  Artists.thumb('1');
  expect(url).toBe('/thumbs/1');
 })

5、这里有一个完整的使用$provide模拟测试例子,这返回一个定义了thumbnailUrl方法,

describe('factory:artists',function(){
  var url;
  var Artists;
  beforeEach(module('artist'));
  beforeEach(module(function($provide){
    $provide.value('imageStore',{
      thumbnailUrl: function (id) {
      url = '/thumbs/' + id;
      }
    })
  }));
  beforeEach(inject(function($injector){
    Artists=$injector.get('Artists')
  }))
  it('return the correct artist thumbnailUrl',function(){
    Artists.thumb('1');
    expect(url).toBe('/thumb/1')
  })

 })

使用spec模拟注册实例

为了声明依赖注入的实例,下面声明一个例子,下面有两个服务,第二个服务被注入到了第一个里。

 angular.module('hiphop',[])
  .factory('deejays',['$rootscope','scratch',function($rootscope,scratch){
    return{
      originator: 'DJ Kool Herc',
      technique: scratch.technique()
    }
  }])
  .factory('scratch',['$rootscope',function($rootscope){
    return{
      technique:function(){
        return 'breakbeat';
      }
    }
  }])

2、

describe('Service: deejays',function(){
  beforeEach(module('hiphop'));
  var deejays;
  beforeEach(inject(function($injector){
    deejays=$injector.get('deejays');
  }))
  beforeEach(inject(function($provide) {
    $provide.value('scratch',jasmine.createSpyObj('scratch', ['technique']));
  }));
  it('should return the correct originator',function(){
    expect(deejays.originator).toBe('DJ Kool Herc');
  })
 })

以上就是对AngularJS 单元测试的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

(0)

相关推荐

  • AngularJS使用指令增强标准表单元素功能

    Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括: 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性 下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</ti

  • AngularJS 单元测试(一)详解

    AngularJS单元测试 网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下.这里就不在说了.下面重点介绍一个单元测试的过程. 加载一个模块 AngularJS用module来包括应用不同的部分比如controllers,services, filters.为了测试不同的部分,我们需要一个不同模块的引用,并且加载它.Angularjs模块注入使用ngMock模块.ngMock模块能够注入服务service进入单元测试. ngMock暴露出angular.mock

  • Angular.js与Bootstrap相结合实现表格分页代码

    先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • AngularJs unit-testing(单元测试)详解

    javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编译器几乎不能给开发者提供任何帮助.因为这个原因,我们感受到编写任何javascript代码都必须有一套强大完整的测试.angular拥有许多功能,让我们更加容易地测试我们的应用.我们应该没有借口不去写测试(这个嘛--). 一. It is all about NOT mixing concerns(全部都关于避免代码关系变得复杂--) 单元测试,正如名称那样,是关于测试单个"单元"的代码.单元测试努力解答这

  • 总结十个Angular.js由浅入深的面试问题

    一.ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的.而ng-if实际上控制dom节点的增删除来实现的.因此如果我们是根据不同的条件来进行dom节点的加载的话,那么ng-if的性能好过ng-show. 二.解释下什么是$rootScrope以及和$scope的区别? 通俗的说$rootScrope 页面所有$scope的父亲. 我们来看下如何产生$rootScope和$scope吧. step1:Angu

  • angularjs中的单元测试实例

    当ng项目越来越大的时候,单元测试就要提上日程了,有的时候团队是以测试先行,有的是先实现功能,后面再测试功能模块,这个各有利弊,今天主要说说利用karma和jasmine来进行ng模块的单元测试. 什么是Karma karma是一个单元测试的运行控制框架,提供以不同环境来运行单元测试,比如chrome,firfox,phantomjs等,测试框架支持jasmine,mocha,qunit,是一个以nodejs为环境的npm模块. 安装测试相关的npm模块建议使用----save-dev参数,因为

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

    开发者们都一致认为单元测试在开发项目中十分有好处.它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心.  测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的.单单文档中列出端对端的测试实例就能说明.就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易.即使官方文档中以提供了详尽的实例,但在我的实际应用中却还是很有挑战.这里我就简单示范一下我是怎么操作的吧. Instant Karma Karma 是来Angular团队针对Java

  • Angular.js如何从PHP读取后台数据

    之前已经有很多方法可以通过angular进行本地数据的读取.以前的例子中,大多数情况都是将数据存放到模块的$scope变量中,或者直接利用ng-init定义初始化的数据.但是这些方法都只为了演示其他功能的效果.这次来学习一下如何将Angular和PHP相结合,从后台读取数据. 首先,利用PHP,我们定义了一组后台数据,代码如下(test.php): <?php header("Access-Control-Allow-Origin: *"); header("Conte

  • 对Angular.js Controller如何进行单元测试

    一.写个简单的Angular App 在开始写测试之前,我们先写一个简单的计算App,它会计算两个数字之和. 代码如下: <html> <head> <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> </head> <body> <!-- T

随机推荐