jasmine 初探(一)

首页 > 代码库 > jasmine 初探(一)

2024-11-20 13:39:02 203人阅读

前言

《敏捷软件开发》这本书由享誉全球的软件开发专家和软件大师Robert C.Martin所著中提到两个开发方式：

　TDD(Test Driven Development)测试驱动开发
　BDD(Behavior Driven Development)行为驱动开发。

测试驱动开发，对软件质量起到了规范性的控制。未写实现，先写测试，一度成为Java领域研发的圣经。随着Javascript兴起，功能越来越多，代码量越来越大，开发人员素质相差悬殊，真的有必要建立对代码的规范性控制。jasmine就是为团队合作而生。

1. jasmine介绍

技术分享

Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it‘s suited for websites, Node.js projects, or anywhere that JavaScript can run.

--引用jasmine自己的介绍

jasmine是一个BDD行为驱动开发测试框架，它不依赖于浏览器，DOM，或任何JavaScript框架，它使用各种网站当然包括nodejs，当然后面我要说的也是基于nodejs。

2. jasmine安装

技术分享

jasmine中使用到的类库，我都是通过bower一键搞定。

<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-2.0.0/jasmine_favicon.png"><link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-2.0.0/jasmine.css"> <script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script><script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script><script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/boot.js"></script>

3. jasmine运行环境

　　jasmine 开发主要依赖四个部分：　　

运行时环境：浏览器（只兼容以下浏览器）具体看.travis.yml；
- IE8 +
- Firefox 3.x
- Chrome ?
- Safari 5
测试目标文件（源文件）：用于实现某种业务逻辑的脚本文件（目标脚本文件）
测试案例（测试脚本）：符合jasmineAPI的测试js脚本
输出结果：jasmine测试输出结果

3. jasmine使用

　　既然上面都说到了运行环境是浏览器，当然我们的第一步是创建一个页面　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>jasmine test</title> 6     <link rel="stylesheet" href="bower_components/jasmine/lib/jasmine-core/jasmine.css"> 7     <script src="bower_components/jasmine/lib/jasmine-core/jasmine.js"></script> 8     <script src="bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script> 9 </head>10 <body>11     <h1>jasmine test</h1>12     <!--启动脚本，基本写法是固定。网上很多都将这个脚本放在测试案例之后，至少在我们测试的版本是不可以的，之前的版本我并没有测试，那样是否正确-->13     <script src="spec/bootstrap.js"></script>14     <!--测试目标文件-->15     <script src="app/app.js"></script>16     <!--测试案例-->17     <script src="spec/appSpec.js"></script>18 </body>19 </html>

查看代码

　　启动脚本bootstrap.js，是jasmine为启动脚本，基本上都固定写法。

 1 ;(function() { 2   window.jasmine = jasmineRequire.core(jasmineRequire); 3   jasmineRequire.html(jasmine); 4   var env = jasmine.getEnv(); 5   var jasmineInterface = jasmineRequire.interface(jasmine, env); 6   var jasmineEnv = jasmine.getEnv(); 7   if (typeof window == "undefined" && typeof exports == "object") { 8  9     extend(exports, jasmineInterface);10 11   } else {12     extend(window, jasmineInterface);13   }14   var queryString = new jasmine.QueryString({15     getWindowLocation: function() {16       return window.location;17     }18   });19 20   var catchingExceptions = queryString.getParam("catch");21 22   env.catchExceptions(typeof catchingExceptions === "undefined" ? true : catchingExceptions);23   var htmlReporter = new jasmine.HtmlReporter({24     env: env,25     onRaiseExceptionsClick: function() {26       queryString.setParam("catch", !env.catchingExceptions());27     },28     getContainer: function() {29       return document.body;30     },31     createElement: function() {32       return document.createElement.apply(document, arguments);33     },34     createTextNode: function() {35       return document.createTextNode.apply(document, arguments);36     },37     timer: new jasmine.Timer()38   });39 40 41   env.addReporter(jasmineInterface.jsApiReporter);42   env.addReporter(htmlReporter);43 44   var specFilter = new jasmine.HtmlSpecFilter({45     filterString: function() {46       return queryString.getParam("spec");47     }48   });49 50   env.specFilter = function(spec) {51     return specFilter.matches(spec.getFullName());52   };53   window.setTimeout = window.setTimeout;54   window.setInterval = window.setInterval;55   window.clearTimeout = window.clearTimeout;56   window.clearInterval = window.clearInterval;57   var currentWindowOnload = window.onload;58 59   window.onload = function() {60     if (currentWindowOnload) {61       currentWindowOnload();62     }63     htmlReporter.initialize();64     env.execute();65   };66 67   function extend(destination, source) {68     for (var property in source) destination[property] = source[property];69     return destination;70   }71 72 }());

查看代码

　　我们直接就只写测试案例测试我们的代码是否可以正常使用，直接给appSpec.js

1 describe("测试toBe的作用", function() {2     it("toBe相当于===", function() {3         var a = 12,4             b = a;5         expect(a).toBe(b);6         expect(a).not.toBe(null);7         expect(false == 0).toBe(true);8     });9 })

查看代码

jasmine

技术分享

执行正常，跟预期的一样执行成功。

你现在是不是在想刚才还说基于浏览器，结果还是在命令行中执行了！！！

　　那我们直接打开浏览器，看执行结果：

技术分享

　　跟命令行显示的一样都是成功的。有的小伙伴是不是有开始想迫不及待的尝试一下错误的情况了。好吧，我们改动一下，appSpec.js 看一下结果。

describe("测试toBe的作用", function() {    it("toBe相当于===", function() {        var a = 12,            b = a;        expect(a).not.toBe(b);        expect(a).not.toBe(null);        expect(false == 0).toBe(true);    });})

　　再刷新一下页面

技术分享