`
d0ln
  • 浏览: 2794 次
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

TDD学习之jasmine

    博客分类:
  • TDD
 
阅读更多

  最近学了一段时间的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. })  


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

分享到:
评论

相关推荐

    Javascript_TDD_jasmine_karma_test

    JavaScript是Web开发中不可或缺的一...通过学习和实践这个项目,开发者可以深入了解JavaScript的TDD实践,掌握Jasmine和Karma的使用,提高代码质量和可维护性。同时,这也是提升软件工程技能和团队协作效率的有效途径。

    pruebas-de-bdd-tdd-con-jasmine

    通过学习和应用这些Jasmine特性,开发者能够有效地实践BDD和TDD,确保JavaScript应用程序的质量和可靠性。在实际项目"pruebas-de-bdd-tdd-con-jasmine-master"中,你可能找到具体的示例代码、测试用例和指导文档,...

    PyPI 官网下载 | jasmine-splinter-runner-0.6.5.tar.gz

    6. **测试驱动开发(TDD)**:通过Jasmine和Splinter,开发者可以遵循TDD原则,先编写测试,再编写代码以使测试通过。 7. **持续集成/持续部署(CI/CD)**:这种测试工具通常与CI/CD流程结合使用,确保代码在每次修改后...

    gameOfLife:Conway 的生活游戏,在学习 Jasmine 和 TDD 的同时创建为 kata

    本项目“gameOfLife”是基于 John Conway 的著名数学模型——生命游戏(Game of Life)构建的,同时也作为学习 JavaScript 和 Jasmine 测试框架的实践案例。 生命游戏,又称康威生命游戏,是英国数学家约翰·何顿·...

    angularjs-karma-jasmine:尝试与angularjs的TDD

    Karma和Jasmine则是JavaScript世界中广泛使用的测试工具,它们在TDD流程中扮演着重要角色。 **AngularJS** AngularJS是一个MVC(Model-View-Controller)框架,它通过数据绑定和依赖注入来简化Web应用的开发。...

    tdd-react-es6:入门项目专注于使用React,ES6和Jasmine进行测试驱动的开发(TDD)

    使用React和es6的TDD入门项目专注于通过React,ES6和Jasmine促进测试驱动开发(TDD)工具: Webpack 业力巴别塔指令git clone git@github....

    利用Jasmine编写的几个前端测试语句

    结合良好的测试实践,如TDD(测试驱动开发)和BDD(行为驱动开发),Jasmine可以帮助确保你的JavaScript代码质量高且健壮,减少出现bug的可能性。在实际项目中,你可以根据`第三个项目`中的具体代码和需求,运用上述...

    jsKataSeed:一个用 Jasmine 做 JS TDD katas 的种子项目。 包括 Gulp Karma 和 Jasmine

    JavaScript TDD 使用各种测试框架来辅助这一过程,Jasmine 就是其中之一。 **Jasmine** Jasmine 是一个行为驱动开发(BDD)的 JavaScript 测试框架,它不依赖任何浏览器、JavaScript 库、jQuery 或其他工具,因此...

    jasmine:使用Jasmine进行测试驱动开发(TDD)

    ** Jasmine:测试驱动开发(TDD)的利器 ** Jasmine 是一款强大的行为驱动开发(BDD)框架,尤其在...在实际开发中,结合压缩包中的`jasmine-master`资源,可以进一步学习和实践Jasmine的更多高级特性和最佳实践。

    tdd-jasmine:使用茉莉花进行测试驱动设计的示例

    为了完成该项目,我主要使用提供的文件以及JQuery文档和Jasmine文档。 我还使用了源伪造和w3schools的一些小技巧。 我发现这个项目非常有用。 我可以看到自己在当前工作中的日常工作中使用了这种测试和TDD。 我发现...

    TDD_Angular:使用 Jasmine 在 Angular.JS 中进行测试驱动开发的几个小项目

    通过"TDD_Angular"项目,我们可以学习到如何将TDD原则和Jasmine测试框架结合,以确保Angular应用的稳定性和可维护性。在实际开发中,我们应该养成编写测试的习惯,这将极大地提升我们的代码质量和开发效率。

    angularjs-and-jasmine-test-boilerplate:使用 Jasmine 的 TDD AngularJS 的最简单示例

    无需魔法即可学习 AngularJS TDD。 我看到很多人都在努力理解如何在 AngularJS 中执行 TDD,所以我创建了这个存储库:一个简单的 AngularJS 应用程序设置,带有 Jasmine 和一个 Html Test Runner 。这是什么保存你的...

    Thermostat:简单恒温器的逻辑(TDD,Jasmine,jQuery,外部API)

    我正在重新编写原始的恒温器程序,以练习javaScript,contol,Jasmine版本以及改进第一个版本的代码。规格温控器始于20度您可以使用上升功能来提高温度您可以使用下降功能降低温度最低温度为10度如果打开了省电模式...

    tdd-js:用Javascript做TDD

    1. **Jasmine**:一个行为驱动开发(BDD)风格的测试框架,提供简洁的语法用于定义期望和断言。 2. **Mocha**:一个灵活的测试框架,支持异步测试,可以与Chai、Sinon等库结合使用。 3. **Jest**:Facebook开发的...

    nodejs-tdd-learn:使用NodeJS和TDD进行项目:test_tube::beaming_face_with_smiling_eyes:

    4. **Mocha框架**:Mocha是Node.js中最流行的测试框架之一,支持BDD、TDD、exports等多种测试接口。它还提供了丰富的报告器和异步测试支持,方便在Node.js项目中进行TDD。 5. **Chai断言库**:Chai是一个灵活的断言...

    tdd1

    在JavaScript环境中,TDD可以借助各种测试框架来实现,如Jest、Mocha、Jasmine等。这些框架提供了编写单元测试、集成测试和端到端测试的能力,帮助开发者确保代码的正确性。例如,Jest是Facebook推出的广受欢迎的...

    angular-tdd:学习测试Angular组件

    **标题解析:** "angular-tdd:学习测试Angular组件" 这个标题表明这是一个关于使用测试驱动开发(TDD)方法来学习Angular框架组件测试的教程或者项目。TDD是一种软件开发实践,开发者先编写测试用例,然后编写刚好...

    jstdd_ato2015:JS TDD与Jasmine,Karma,Gulp一起@ ATO 2015

    JS TDD与茉莉,因果,古尔普 @ 2015年ATO 在此处查看幻灯片演示: : 检出/slides文件夹以查看实际的演示文稿。 使用本地http服务器会很有帮助: $ sudo npm install -g http-server $ cd slides $ http-server $...

    学习tdd

    通过学习TDD并结合TypeScript,你可以创建更健壮、可维护的软件,同时提高开发效率。在实际项目中应用TDD,不仅可以提升代码质量,还能帮助团队更好地理解和沟通需求。因此,无论是个人学习还是团队合作,掌握TDD和...

    Javascript_Codewars:Katas使用Jasmine和JS使用TDD方法完成了Codewars

    Javascript_Codewars Katas使用Jasmine和JS使用TDD方法完成了Codewars。

Global site tag (gtag.js) - Google Analytics