TDD学习之jasmine

  最近学了一段时间的TDD，从最开始的摸不着头脑，到现在的略懂，有一些学习的TDD心得，跟大家分享一下，希望对初学TDD的你有所帮助。 

    1.什么是TDD：TDD测试驱动开发（Test-driven development）是极限编程中倡导的程序开发方法，以其倡导先写测试程序，然后编码实现其功能得名。测试驱动开发始于20世纪90年代。测试驱动开发。测试驱动开发的目的是取得快速反馈并使用“illustrate the main line”方法来构建程序。 

     测试驱动开发是戴两顶帽子思考的开发方式：先戴上实现功能的帽子，在测试的辅助下，快速实现其功能；再戴上重构的帽子，在测试的保护下，通过去除冗余的代码，提高代码质量。测试驱动着整个开发过程：首先，驱动代码的设计和功能的实现；其后，驱动代码的再设计和重构。                                               --摘自维基百科 
                                                              
    说通俗点就是：先测试-再实现功能-最后重构。 

    2.TDD的流程是什么？举个例子：顾客要定制一个1m长，0.8m宽,0.5m高的蓝色玻璃水缸，商家做好后就交给顾客验收，验收不合格就需要改装，直到验收通过。测试也是一个道理，顾客需求就是测试文件，制作过程就相当于写功能实现代码。功能代码写好后就按照测试文件（顾客需求）进行测试，测试不通过就修改功能实现代码（改装），直至测试通过（验收）就可以啦！ 

    3.jasmine：javascript的测试框架有很多种，我用的是jasmine，下载地址是：https://github.com/pivotal/jasmine/archive/master.zip。参考jasmine的官方文档：http://jasmine.github.io/edge/introduction.html。 
   jasmine下载后解压某个版本(2.0.1)，打开工程,再打开dist/jasmine-standalone-2.0.1/spec，spec就是测试的代码文件，同目录下src文件夹下的js文件就是功能实现的代码文件。怎么知道测试有没有通过呢？用浏览器打开src下的SpecRunner文件（鼠标移动至页面又上方，会自动显示浏览器图标），就会在浏览器上显示测试的结果,如:3 specs, 0 failures。当然，首先需要在SpecRunner.html上添加你新建的js文件路径。 
    
    4.jasmine语法的简单介绍：打开spec/PlaySpec.js文件，可以看到一个关于播放器的测试，浏览一下整个文件，你可能会注意到，整个JS文件都是由  describe()   beforeEach()  it()  和  expect()  联系起来的。这几个方法就是测试最重要的部分。我截取一部分讲一下测试的基本语法：

Js代码  

1. describe("Player", function() {  
2.   var player;  
3.   var song;  
4.   
5.   beforeEach(function() {  
6.     player = new Player();  
7.     song = new Song();  
8.   });  
9.   
10.   it("should be able to play a Song", function() {  
11.     player.play(song);  
12.     expect(player.currentlyPlayingSong).toEqual(song);  
13.   
14.     //demonstrates use of custom matcher  
15.     expect(player).toBePlaying(song);  
16.   });  

   describe()和it()是什么：顾客验收的时候，要测水缸(water_jar)的大小是否符合要求，就需要分别测量水缸的长宽高。所以对应的，it()就是每个具体的小测试,比如测量水缸的长/宽/高，describe()是一个或多个it()的集合，如水缸的大小，就需要三个it()。describe()也可以相互嵌套。describe和it都接收两个参数，第一个参数是描述语句，表明测试的是什么内容。第二个参数是function()，就是具体测试怎么实现。 
   怎么知道测量结果符不符合要求呢？就拿测量结果与预期值进行比较，也就是expect()方法。expect()接受两个参数，第一个参数是实际的测量值，第二个参数是你的预期值。如果两者相等的话，测试就会通过(green),否则就是(red)。除了 .toEqual()外，还有 .toBe(),  .toMatch(),   .toBeDefined() 可以根据需要选择。比如刚才的水缸测试，我要测试水缸的大小，那么大概的框架就是：

Js代码  

1. describe("water_jar size"，function(){  
2.    it("should be 1m long"，function(){  
3.        var water_jar = new WaterJar();  
4.        expect(water_jar.length()).toEqual(1);  //预期水缸的长度应该为1m  
5.       });  
6.    it("should be 0.8m width"，function(){  
7.        var water_jar = new WaterJar();  
8.        expect(water_jar.width()).toEqual(0.8);  
9.       });  
10.    it("should be 0.5m height"，function(){  
11.        var water_jar = new WaterJar();  
12.        expect(water_jar.height()).toEqual(0.5);  
13.       });  
14. })  

    你可能会注意到，每个it()都需要创建一个新的water_jar实例。能不能只创建一个实例呢？这时候 beforeEach()  就出来啦。顾名思义，beforeEach:在每个(测试)之前。所以就可以把初始化放在 beforeEach() 里面： 

Js代码  

1. beforeEach(function(){  
2.    var water_jar = new WaterJar();  
3. })  

    这样每次测试开始前就会新建一个实例。可是如果测试数量足够多的话，就会造成内存使用过多。所以只新建一次变量，以后每个测试对新建的变量赋值，就可以大大降低内存的使用率。 

Js代码  

1. describe("water_jar size"，function(){  
2.    var water_jar;     //定义变量  
3.   
4.    beforeEach(function(){  
5.       water_jar = new WaterJar(); //每次测试开始前都对变量进行赋值  
6.    })   
7.   
8.    it("should be 1m long"，function(){  //测试长度是否为1m  
9.        expect(water_jar.length()).toEqual(1);  
10.       });  
11.    it("should be 0.8m width"，function(){   //测试宽度是否为0.8m  
12.        expect(water_jar.width()).toEqual(0.8);  
13.       });   
14.    it("should be 0.5m height"，function(){   //测试高度是否为0.5m  
15.        expect(water_jar.height()).toEqual(0.5);  
16.       });  
17. })  

     再看看上面播放器的测试，你是不是能大概看懂了呢？ 
    下一步就可以写你的实现代码啦。通过测试后就可以重构了。