6) 分块处于视图外，在当前视图下面，不在用户指定的额外区域内
3. 加载测试：
1） 测试当前区块在初始化时就在用户视图内
2） 滚动到当前区块，测试加载结果
测试代码示例：
1） 初始化测试：
var lazy3 = new HomeApp.groupLazyLoad({renderTo:'J_l3',placeholder:url}); describe('初始化测试',function(){ it('当前区块在视图内的初始化测试',function(){ var viewportHeight = DOM.viewportHeight(), container3 = S.one('#J_l3'), off3 = DOM.offset(container3); window.scrollTo(0,off3.top); //滚动到区块 lazy3.initLazyLoad(); //初始化 expect(true).toEqual(!lazy3.loaded); //验证是否已经初始化过 expect(0).toEqual(lazy3.lazyloadImgs.length);//未初始化图片数组是否为空 }); }); |
2） 定位测试（对应上面的测试用例 2-5）
it('滚动向上，当前区块滚动出视图，不超过附加范围时',function(){ var container2 = S.one('#J_l2'), off2 = DOM.offset(container2), append = lazy2.APPEND_WINDOW_HEIGHT; window.scrollTo(0,off2.top - viewportHeight -append +1); expect(true).toEqual(lazy2._isInView()); }); |
3） 测试加载图片
it('移到当前区块，测试图片已经加载',function(){ var finished =false; runs(function(){ //注册事件 lazy2.on('afterLoad',loaded); //移到区块范围 window.scrollTo(0,off2.top); }); //等待加载完成 waitsFor(function(){ return finished; },'未完成！',1200); runs(function(){ var imgs = S.all('img','#J_l2'); S.each(imgs,function(img){ //测试图片src恢复正常 expect(url).not.toEqual(img.getAttribute('src')); }); lazy2.un('afterLoad',loaded); }); function loaded (){ finished =true; } }); |
这个用例比较复杂一点，我们在JS控制Dom过程中有些情况我们明确，函数何时执行，何时结束，特别是有些动作由事件触发。这时候需要在动作完成后通知我们，回调函数在这时候显然不合适，因此可以提供事件，也便于其他人的扩展使用。
测试心得：
前端的单元测试事实上比想象中更容易写，能做的测试也足够多，因此在一些提供给其他人使用的组件最好能够提供单元测试，便于改进和测试，后面还要写一篇能更加体现出单元测试强大的文章，大家一起不断学习不断进步。
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
