使用jasmine作为前端框架进行单元测未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net试，比较坑爹的是当程序中有异步处理，或者【转载请注明来源】未经授权，禁止复制转载。模拟、类似异步处理的时候，比较难进行控制【作者：唐霜】【本文受版权保护】。今天就来详细讨论一下clock和set【转载请注明来源】原创内容，盗版必究。Timeout两种不同的方法在处理不同的【作者：唐霜】【本文受版权保护】情况下的用法。
著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】未经授权，禁止复制转载。使用clock模拟时钟快速调用异步操作
clock是jasmine里面想象力非常【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。赞的一个功能，它能模拟时钟，快速推进（甚【版权所有，侵权必究】原创内容，盗版必究。至倒退）程序中的模拟时钟，从而让setT【作者：唐霜】【版权所有】唐霜 www.tangshuang.netimeout、setInterval在你【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。的模拟时钟里面按照你的想象进行。
【未经授权禁止转载】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ng.net比如你写了这样一段代码：
【转载请注明来源】【本文受版权保护】【作者：唐霜】【版权所有，侵权必究】setTimeout(() => console.log("ok"), 30*60*1000) // 三十分钟后执行
如果在正常的浏览器时钟中执行这段代码，你【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net肯定得等30分钟才能看到控制台输出“OK【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net”。但是，通过模拟时间，你能使这个时间在本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】模拟状态下进行控制（五维空间的感觉）。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ngnet】it("test timeout", () => {
let test = 0
jasmine.clock().install() // 安装模拟时钟，会对setTimeout和setInterval进行重写
setTimeout(() => test = 1, 30*60*1000)
console.log(test) // 0
jasmine.clock().tick(30*60*1000)
console.log(test) // 1
})
上面这段代码里面，给了一个test变量，【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】按照setTimeout的设定，test【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】要在半个小时之后才会变成1，结果把上面这【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net段代码放到jasmine的it测试用例中本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】去执行，秒变1了，为什么？关键就在jasmine.clock().tick(30*60*1000)。在前面执行了jasmine.clock().install()之后，setTimeout就不是原来的s本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。etTimeout了，执行jasmine.clock().tick(30*60*1000)之后相当于时间已经过了半个小时，所以se著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】tTimeout里面的回调函数被执行了，【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】所以test变成了1，所以下面的test【版权所有，侵权必究】未经授权，禁止复制转载。输出为1.
简单的说，clock机制就是重写setT【转载请注明来源】【版权所有，侵权必究】imeout，在调用tick的时候，把模原创内容，盗版必究。【未经授权禁止转载】拟时钟的时间按照自己的意愿推进，如果推进本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net过程中超过了setTimeout设定的时【本文首发于唐霜的博客】【转载请注明来源】间，setTimeout的回调函数就会被转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】执行。为了验证这点，jasmine提供了jasmine.createSpy方法作为监控助手。你可以通过timerCallback.calls.count()来查看回调函数被执行的次数：
it("test timeout", () => {
let timerCallback = jasmine.createSpy("timerCallback")
let test = 0
jasmine.clock().install() // 安装模拟时钟，会对setTimeout和setInterval进行重写
setInterval(() => test ++, 30*60*1000)
console.log(test) // 0
jasmine.clock().tick(20*60*1000) // 时间没到，没有调用
console.log(test) // 0
console.log(timerCallback.calls.count()) // 0
jasmine.clock().tick(30*60*1000)
console.log(test) // 1
console.log(timerCallback.calls.count()) // 1，显示出回调函数被执行的次数，可以重复调用tick来看执行的次数
})
那么，jasmine是如何实现clock【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。功能的呢？我们还要去看下源码。这里是clock的源码，可以看到，jasmi【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netne确实对setTimeout进行了封装原创内容，盗版必究。【转载请注明来源】，另外，使用了一个叫delayedFunctionSched【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ulerFactory的模块，来实现对回调函数列队的存取和调用【未经授权禁止转载】【未经授权禁止转载】。认真阅读这两个模块之后，就可以了解ja著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】smine实现clock的原理。
【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【版权所有，侵权必究】jasmine中的异步回调测试
从上面你可以看到，clock实际上是想把转载请注明出处：www.tangshuang.net【版权所有，侵权必究】setTimeout等基于时间的几个函数【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】转换为同步执行，也就是说它解决了一个时间转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】问题。但是，有的时候，程序必须异步执行，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。比如ajax，或者异步加载一些数据（pr【作者：唐霜】本文作者：唐霜，转载请注明出处。omise），甚至setTimeout(【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】fun, 0)，这些异步的动作，如果简单【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net按照我们开发中的思路进行的话，就会出问题【作者：唐霜】未经授权，禁止复制转载。，测试就会失败。举一个栗子：
本文版权归作者所有，未经授权不得转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】it("test data", () => {
let content = ""
$.get("your url").then(data => content = data)
expect(content).not.toBe("")
})
我们虽然使用了ajaxMock，对jqu本文版权归作者所有，未经授权不得转载。【转载请注明来源】ery的ajax请求进行了模拟，但是由于【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。使用的是deffered，所以这个请求仍原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。然是模拟的异步操作。当expect执行的【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。时候，$.get的then可能还没有执行转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，因此可能就会得到错误的测试结果。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【转载请注明来源】【版权所有】唐霜 www.tangshuang.netang.netjasmine解决异步测试的方法非常简单【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net，就是在it的回调函数中传入参数作为标记【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，比如把上面的代码改为：
原创内容，盗版必究。【转载请注明来源】【转载请注明来源】原创内容，盗版必究。it("test data", done => {
let content = ""
$.get("your url").then(data => {
content = data
expect(content).not.toBe("")
done()
})
})
当done被传入之后，只有调用done时【本文受版权保护】本文版权归作者所有，未经授权不得转载。，jasmine才认为这个测试用例结束，【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net否则这个测试用例将处于等待状态。
转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ng.net
不过有一个点需要注意，就是setTim未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.neteout异步测试的时候，不能和clock【本文受版权保护】【原创内容，转载请注明出处】一起使用，比如：
beforeEach(() => jasmine.clock().install())it("test async", done => {$.get(...).then(...)setTimeout(() => {expect(...).toBe(...)}, 1000)})afterEach(() => jasmine.clock().uninstall())
上面这段代码会报错！！！原因很简单，因为【本文受版权保护】原创内容，盗版必究。clock需要通过tick来推进时间，而【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】上面代码中时间将永远禁止。
【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ang.net【作者：唐霜】未经授权，禁止复制转载。既然如此，那加上tick不就好了吗？对不【版权所有，侵权必究】转载请注明出处：www.tangshuang.net起，仍然会失败（不报错）。前文已经说明，本文作者：唐霜，转载请注明出处。【转载请注明来源】tick其实是调用回调函数，而立即调用回未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】调函数，$.get方法请求的数据其实还没本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】有回来，所以你expect中的值是原始值【原创内容，转载请注明出处】【本文受版权保护】，不会得到正确的结果。所以，如果是使用a【作者：唐霜】【原创不易，请尊重版权】jax，不要用timeout的方式去ex本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】pect，而是应该写在ajax的回调函数【版权所有，侵权必究】【原创不易，请尊重版权】中，采用done作为回调通知。
【转载请注明来源】【转载请注明来源】jasmine提供了一个ajax的解决方案，和clock非常像，也是对XMLHttpRequest进行重写，也【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。采用jasmine.Ajax.install()这种形式。不过它不是jasmine-co【原创内容，转载请注明出处】未经授权，禁止复制转载。re的内容，而是以插件的形式挂载到jas【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】mine中去。
jasmine1.3供了两个函数，run著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】s和waitsFor来实现，但是2.0开【原创内容，转载请注明出处】原创内容，盗版必究。始使用done的方式异步通知方便的多。
原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。总结
本文总结了jasmine中clock和异【作者：唐霜】著作权归作者所有，禁止商业用途转载。步的两个问题。简单的说，clock主要用【版权所有，侵权必究】【原创内容，转载请注明出处】在“不想等待，直接快进时间”，而异步则主【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】要用在“需要等待”。使用clock不能把【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net它当setTimeout来用，实际上相反原创内容，盗版必究。原创内容，盗版必究。，clock是把setTimeout同步未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】执行，是把setTimeout作为其他程【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net序进行的依赖来处理，比如：
【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ngnet】转载请注明出处：www.tangshua【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】ng.netsetTimeout(() => a = 1, 1000)setTimeout(() => b = a + 2, 200)
上面这段代码，第二个setTimeout【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。依赖于第一个，所以这个时候使用clock【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。快进时间就很爽，但是绝不能把它用在异步操著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。作中，clock无法让ajax的请求变快【原创内容，转载请注明出处】【作者：唐霜】，ajax请求仍然是自己的那个节奏，如果转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net你在请求还没回来的时候就直接通过cloc未经授权，禁止复制转载。【原创不易，请尊重版权】k去快进时间，得到的只是ajax还没成功【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。时拿到的数据，比如上面提到的那个反例。
转载请注明出处：www.tangshua未经授权，禁止复制转载。【版权所有，侵权必究】ng.net【访问 www.tangshuang.n【版权所有，侵权必究】【版权所有，侵权必究】et 获取更多精彩内容】2017-02-27 6195 jasmine
