前言:
我属于TDD的拥护者,之前写后端代,都喜欢把一些重要的逻辑代码抽离处理,增加Unit Test。可是最近在接触前端Unit Test时,让自己忍不住想吐槽一下。也顺便实现一下今年的目标(一个月至少一篇技术博客,1月2月我会补上的)。前端测试框架有很多,比较流量的是Qunit和Jasminejs,这两个多单元测试框架的具体区别网上有很多资料,有兴趣大家可以去查一下。我是因为Jasminejs比较丰富的断言、断言扩展、spy、mock这些功能吸引着我。所以首先把jasminejs引入项目中。当时主要引入的是1.3版本。
最近在学习2.0版本,发现引入2.0版本的jasminejs代码,我的整个Unit Test跑不起来了。尽然不向下兼容?不兼容的问题让我顿时觉得jasminejs有点小儿科的感觉。幸亏做了一些封装,不然我是没办法升级了。
现在网上关于jasminejs的介绍大多数是针对1.3这个版本,下面是我排查和总结的经验,为自己做个笔记,也和大家分享一下。有错误地方请大家拍砖。
本文只针对1.3和2.0区别做说明,至于jasminejs详细学习手册建议大家上官网,介绍的很详细。
jasminejs:http://jasmine.github.io/
jasminejs github: https://github.com/pivotal/jasmine/
区别:
1、calls区别:
测试代码:
describe("对spy函数的测试", function() { var foo, bar = null; beforeEach(function() { foo = { setBar: function(value) { bar = value; } }; spyOn(foo, 'setBar'); //foo为spy函数 foo.setBar(123); foo.setBar(456, 'another param'); }); it("上一次被调用的参数", function() { var most = foo.setBar.calls; expect(most).toBeDefined(); }); });
1.3版本:
如图,chrome跟踪结果。
calls是一个数组,返回每次调用的上下文。数组最后一个值和mostRecentCall值相等。
expect(foo.setBar.calls[foo.setBar.calls.length-1]).toEqual(foo.setBar.mostRecentCall);
2.0版本:
如图,chrome跟踪结果。
calls是一个CallTracker的实例对象。这样更规范一些,用类封装了调用相关的信息。类中所有方法说明见下面。
2、1.3 mostRecentCall和2.0.calls.mostRecent()区别
(1)、调用方式不同
前者是:被调用方法.mostRecentCall,例如:foo.setBar.mostRecentCall
后者是:被调用方法.calls.mostRecent,例如:foo.setBar.calls.mostRecent()
(2)、值相同
mostRecentCall是一个对象,有两个属性:args和object,其中args是调用方法是所传的参数,object是调用方法的所属对象。
describe("对spy函数的测试", function() { var foo, bar = null; beforeEach(function() { foo = { setBar: function(value) { bar = value; } }; spyOn(foo, 'setBar'); //foo为spy函数 foo.setBar(123); foo.setBar(456, 'another param'); }); it("上一次被调用的参数", function() { expect(foo.setBar.mostRecentCall.args[0]).toEqual(456); }); it("上一次被调用的参数", function() { expect(foo.setBar.mostRecentCall.object === foo).toEqual(true); }); });
.calls.mostRecent()是函数,返回一个对象,同上。
3、2.0中强大的calls对象
.calls.any() 至少一次被调用,返回false/true。
.calls.count()被调用次数
.calls.argsFor(index)返回被index+1次调用的参数,返回值为[]
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
it("tracks the arguments of each call", function(){ foo.setBar(123); foo.setBar(456, "baz"); expect(foo.setBar.calls.argsFor(0)).toEqual([123]); expect(foo.setBar.calls.argsFor(1)).toEqual([456, "baz"]); });
.calls.allArgs()返回所有被调用的参数,以逗号隔开,每一次调用的参数,以数组[]的形式返回
.calls.all()同1.3中calls。返回每次调用的上下文context。
.calls.mostRecent()同1.3的mostRecentCall,返回最近一次调用的上下文信息。等同于.calls.all()[.calls.call().length - 1]
.calls.first等同于.calls.all()[0]
.calls.reset()重置spy的所有信息,此时.call.any()返回false。
4、异步啊异步
1.3为了实现异步测试,jasminejs使用了一种很初级的方法,循环等待。
describe("Asynchronous specs", function() { var value, flag; it("should support async execution of test preparation and expectations", function() { runs(function() { flag = true; value = 0; setTimeout(function() { flag = true; }, 500); }); waitsFor(function() { value++; return flag; }, "The Value should be incremented", 450); runs(function() { expect(value).toBeGreaterThan(0); }); }); });
这里的异步有以下几个问题:
1、写法太过复杂,需要自己封装;
2、实现有点初级。
waitsFor有三个参数:
第1个参数:校验异步是否完成函数,返回值为bool,返回true,停止循环等待;
第2个参数:错误提示,如果操作第3个参数指定的毫秒数,第1个参数还是返回false,断言失败。提示信息如下:
第3个参数:循环等待的时间,单位:毫秒。
异步实现,大多是ajax请求,这个请求受网络、服务器环境等诸多因素影响,所以很难估算需要多长时间。
2.0对这个async test做了很大的优化,也更合理了。
describe("Asynchronous specs", function() { var value; beforeEach(function(done) { setTimeout(function() { value = 0; done(); }, 1); }); it("should support async execution of test preparation and expectations", function(done) { value++; expect(value).toBeGreaterThan(0); done(); }); });
采用了一种pub/sub订阅模式处理,ajax请求成功,通知it执行。
5、仅仅写法不同
下面主要是功能一样,但是写法发生变化。
1.3 | 2.0 | 说明 |
andCallThrough | .and.callThrough | 函数监视器,但函数真的执行 |
andReturn | .and.returnValue | 函数监视器,函数不真的执行。指定监视的函数的返回值 |
andCallFake | .and.callFake | 替代被监视的函数,原函数不执行 |
calls | .calls.all() | 返回每次调用的上下文context |
mostRecentCall | .calls.mostRecent() | 最近一次被调用的上下文信息 |
jasmine.Clock.useMock | jasmine.clock().install | 启动模拟时间 |
jasmine.Clock.tick | jasmine.clock().tick | 模拟向前毫秒 |
jasmine.clock().uninstall() | 停止模拟时间,1.3无此方法 |
先写这些,其他区别如果有必要,我会在后续的文章中补充。没有必要我会加一些jasmine2.0的源码分析文章。