首页 > 其他 > 详细

QUnit入门 (一)

时间:2016-02-03 18:21:45      阅读:161      评论:0      收藏:0      [点我收藏+]

  作者Aurelio De Rosa jQuery in Action(没读的是熊猫吧haha) 第三版 和 Instant jQuery Selectors 的作者,并且是一个全栈(full-stack)和webapp开发工程师,拥有着超过五年的HTML, CSS, Sass, JavaScript 和 PHP的开发经验。不但精通JavaScript和 HTML5 APIs,而且也在web安全、可访问性、性能和方面有着深刻的造诣。(sitepoint:http://www.sitepoint.com/author/aderosa/)

  软件测试是给定一组输入值,检测真实值和期待输出值之间差别的过程。软件测试,特别是单元测试对于软件开发人员是必不可少的。不幸运的是,许多开发人员惧怕单元测试。

  JS里面有许多可以供我们选择进行单元测试的框架。比如,Mocha, Selenium, jasmine 和 QUnit。本文将重点讲述Qunit。Jquery团队(jQuery team)开发了许多著名的js库,包括了jQuery 、jQuery UI和Qunit等。

  1、配置QUnit。

  QUnit本身非常低简单,并且非常方便去使用。主要的概念可以花费几个小时内掌握。

  首先安装QUnit,有三种方式:

    官网下载源文件; 引用CDN; 使用 bower 安装( bower install --save-dev qunit );  使用npm安装( npm install --save-dev qunitjs ) ;

    除非开发的项目非常简单或者项目准备发布到生产环境,否则不建议使用cdn的方式。在本文中我们使用第一种引入QUnit。在QUnit官网下载最新版的 qunit-1.20.0.js 和 qunit-1.20.0.css。创建一个html文件,内容如下:

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4       <meta charset="utf-8">
 5       <title>QUnit Example</title>
 6       <link rel="stylesheet" href="../js/qunit/qunit-1.20.0.css">
 7    </head>
 8    <body>
 9       <div id="qunit"></div>
10       <div id="qunit-fixture"></div>
11       <script src="../js/qunit/qunit-1.20.0.js"></script>
12    </body>
13 </html>

   在body里面有两组div标签,div#qunit是QUnit用来显示测试结果的容器。div#qunit-fixture是QUnit留给开发者自己使用的,这个容器允许开发者测试添加,修改或者移除的dom代码,使开发者不必再为在每个test后为清理dom树而担忧。如果将在代码执行过程中创建html防止在这个div内,QUnit将帮助我们重置掉这些代码,恢复到初始状态。

   下面来看如何编写使用QUnit进行测试。

  2、使用QUnit创建一个测试(test)。

  QUnit创建test有两个方法:QUnit.test()和QUnit.asyncTest()。正如它们的命名,QUnit.test()常常用来测试同步运行的代码,QUnit.asyncTest()常常测试异步运行的代码。在这一小节,主要讲解如何使用QUnit.test()测试同步运行的代码。

  QUnit.test(name, testFunction)

   第一个参数name是用来标记test名称的字符串。第二个参数,testFunction是一个函数,包含了一个asset作为它的参数。asset包含了许多可供我们断言的方法。建立一个test。

QUnit.test(My first test, function(assert) {
     // Assertions here... 
});

  上面的代码段创建了一个名称为"My first test"的test和没有包含任何断言的一个空函数。下面我们来了解

  

  3、assert断言方法

  断言(Assertions)能够校验我们的代码是否如我们期望的那样运行,是软件测试的核心。QUnit有许多方法可以校验。asset作为QUnit.test()的回调函数的第一个参数。

  罗列了asset的主要方法和它们的主要用法:

  deepEqual(value, expected[, message]) : 递归性严格比较的,针对所有的javascript类型。如果真实值和期待值(expected)属性,属性值都一样并且和有同样的prototype的话,断言通过。

  equal(value, expected[, message]) : 真实值和期待值(expected )是否相等,通过非严格方式的 "==",可能会转换类型。

  notDeepEqual(value, expected[, message]):与deepEqual()类似,但是用于比较不相等。

  notEqual(value, expected[, message]) : 与equal()类似,但是用于判断不想等(转换类型的不相等)。

 

  
  

 


  

   

    

    .

 

  

 

QUnit入门 (一)

原文:http://www.cnblogs.com/tanght/p/5161767.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!