AngularJS单元测试-1

网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下。这里就不在说了。下面重点介绍一个单元测试的过程。<p>

加载一个模块

AngularJS用module来包括应用不同的部分比如<code>controllers,services, filters</code>。为了测试不同的部分,我们需要一个不同模块的引用,并且加载它。Angularjs模块注入使用ngMock模块。ngMock模块能够注入服务service进入单元测试。
ngMock暴露出<code>angular.mock.module</code>方法,缩写是module。<p>

准备

需要准备的就是一个简单的AngularJS启动模块。<p>

如何实现

<code> angular.mock.module</code>方法被用在<code>beforeEach</code>方法中。这个module方法需要一个模块的名字或者另外一个字面量对象来替代,将会被注入。<p>
1、使用一个字符串名字来代表模块

beforeEach(module('services.emcees'))

2、添加字面量对象

beforeEach(module('services.emcees',{
  beatjunkies': {
      'dj': 'Babu'
  })
})

3、现在可以在测试中使用beatjunkies引用检索解决的对象,返回<code>{'dj': 'Babu'}</code><p>
4、最后你也可以提供一个方法,提供一个rapper引用。<p>

beforeEach(module('services.emcees'),{
  beatjunkies': {
      'dj': 'Babu'
  })
},function($provider){
  $provider.value('rapper', 'madchild')
})

写一个测试

例如这个例子,将要开始测试一个关于更改scope值来更新内容的指令。当scope上定义的一个noclick方法触发的时候这个值就会被分配。这需要在HTML上的按钮触发。<p>
例如:<p>

.directive('emcee',function(){
  return{
      restrict:'E',
      link:function(scope,element,attr){
          scope.onClick=function(){
              element.text('Step up ' + scope.emcee + '!')
          }
      }
  }

})

具体做法

1、创建两个变量,一个用于<code>scope(var scope)</code>,另一个用于<code>element(var element)</code>。<p>
2、确定载入你的模块 <code>beforeEach(module('cookbook'))</code><p>
3、创建一个beforeEach方法用来注入必要的依赖,并且指定1中的变量来声明这些变量。包括创建一个新的scope对象和为scope指定emcee值。<p>

beforeEach(inject(function($rootscope,$compile){
  rootscope=$rootscope;
  scope=$rootscope.$new();
  scope.emcee='Izzy Ice'
}))

4、紧接3在beforeEach函数中加入创建指令的部分。<p>

 beforeEach(inject(function($rootscope,$compile){
    rootscope=$rootscope;
    scope=$rootscope.$new();
    scope.emcee='Izzy Ice';
    element=angular.element('<emcee></emcee>');
    $compile(element)(scope);
 }))

5、紧接着第三步在beforeEach中启动所有的watcher<p>

scope.$digest();

6、需要创建一个新的spec来定义期望的结果是什么。<p>

it('should assign scope emcee to element text when the onClick handler is called',function(){

})

7、紧接步骤6spec中,添加触发onClick的方法。<p>

scope.onClick

8、在步骤6spec中,添加一个用于匹配element值的期望<p>

expect(element.text()).tobe('Step up Izzy Ice!')

9、整合<p>

it('should assign scope emcee to element text when the onClick handler is called', function () {
      scope.onClick ();
      expect(element.text()).toBe('Step up Izzy Ice!');
});

原理

步骤1中声明了两个能被重复测试的变量,在步骤3中使用beforeEach确保测试运行前这两个变量被分配值。在步骤3中也为scope定义了一个值<code>scope.emcee</code>,期望这个值能与指令相关联。在步骤4中我们编译我们的指令,
在步骤5中调用$scope.$degist确保所有的绑定都更新过了。<p>
在步骤6中声明这个spec测试并且规定我们希望从中得到什么,我们触发<code>scope.onClick</code>然后利用scope提供的值来更新element。Angular element提供了一个方便的text函数,用来返回element的内容。
在步骤8中使用这个text返回的值来与 Step up Izzy Ice 进行对比。<p>

一些常用的matchers方法。

1、实际值包含期望值。

expect($djListItems().eq(0).html()).toContain('DStyles<br>\nQbert<br>\nMix Master Mike<br>\nShortkut<br>\nA-Trak<br>\nBabu')

2、实际值与期望值是否一致。

expect(element.text()).toBe('iec')

3、实际值与期望值相等

expect(scope.emcee.length).toEqual(0)

4、实际值期望值正则匹配相等

expect(element.text().toMatch(/Eyadea/))

5、实际值是否被定义

expect($cookies.bboy.toBeDefined)

6、如果实际值没有被定义

expect($cookiew.bboy).not.toBeDefined()

7、实际值是否为空

 expect(BreakBeat.tracks()).tobeNull()

8、实际值是否为不空

expect(BreakBeat.tracks()).not.tobeNull(); 

9、实际值是否为false

expect(element(by.css('button')).getAttribute('disabled').toBeFalsy())

10、实际值为真

expect(angular.element(element.find('a')[0].parent().hasClass('nghide').getAttribute('disabled')).toBeTruthy())

11、实际值少于期望值

expect(scope.deejays.length).toBeLessThan(2);

12、实际值大于期望值

expect(scope.deejays.length).toBeGraterThan(2)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,759评论 1 21
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,654评论 18 139
  • 文章来自:http://blog.csdn.net/mj813/article/details/52451355 ...
    好大一只鹏阅读 9,192评论 2 126
  • 这是今天描的一幅老师的画作,请老师过目
    兰栀阅读 217评论 2 0
  • 2017年10月1日 秋天来啦。收获的季节。 2017年10月4日中秋节 蚌埠,细雨蒙蒙,一颗银杏被虫蛀到。力量的...
    丑娃娃儿子阅读 233评论 0 0