欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS 单元测试(一)详解

程序员文章站 2022-10-18 16:10:22
angularjs单元测试 网上有很多单元测试的教程,比如如何安装jasmine和ngmock,大家可以搜一下。这里就不在说了。下面重点介绍一个单元测试的过程。 加...

angularjs单元测试

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

加载一个模块

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

准备

需要准备的就是一个简单的angularjs启动模块。

如何实现

 angular.mock.module方法被用在beforeeach方法中。这个module方法需要一个模块的名字或者另外一个字面量对象来替代,将会被注入。

1、使用一个字符串名字来代表模块

 beforeeach(module('services.emcees'))

2、添加字面量对象

 beforeeach(module('services.emcees',{
 beatjunkies': {
  'dj': 'babu'
 })
 })


3、现在可以在测试中使用beatjunkies引用检索解决的对象,返回{'dj': 'babu'}

4、最后你也可以提供一个方法,提供一个rapper引用。

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


写一个测试

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

例如:

 .directive('emcee',function(){
 return{
  restrict:'e',
  link:function(scope,element,attr){
   scope.onclick=function(){
    element.text('step up ' + scope.emcee + '!')
   }
  }
 }

 })

具体做法

1、创建两个变量,一个用于scope(var scope),另一个用于element(var element)。

2、确定载入你的模块 beforeeach(module('cookbook'))

3、创建一个beforeeach方法用来注入必要的依赖,并且指定1中的变量来声明这些变量。包括创建一个新的scope对象和为scope指定emcee值。

 beforeeach(inject(function($rootscope,$compile){
 rootscope=$rootscope;
 scope=$rootscope.$new();
 scope.emcee='izzy ice'
 }))

4、紧接3在beforeeach函数中加入创建指令的部分。

 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

 scope.$digest();

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

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

7、紧接步骤6spec中,添加触发onclick的方法。

 scope.onclick

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

 expect(element.text()).tobe('step up izzy ice!')

9、整合

 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定义了一个值scope.emcee,期望这个值能与指令相关联。在步骤4中我们编译我们的指令,
在步骤5中调用$scope.$degist确保所有的绑定都更新过了。

在步骤6中声明这个spec测试并且规定我们希望从中得到什么,我们触发scope.onclick然后利用scope提供的值来更新element。angular element提供了一个方便的text函数,用来返回element的内容。
在步骤8中使用这个text返回的值来与 step up izzy ice 进行对比。

一些常用的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)

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