手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2025年07月的文章

JavaScript单元测试工具 — QUnit

Submitted by gouki on 2010, February 10, 10:26 AM

好象这篇文章的原始链接来自cssrain，不记得了。。如果作者看到，请联系我一下，我加上链接，SORRY了。

文章来自google doc，内容如下：

QUnit是jQuery团队开发的 JavaScript单元测试工具，使用方便，界面美观。近期试用了一下并进一步了解了JavaScript单元测试，记录一下所思所得。

什么是单元测试

XML/HTML代码
  1. 单元测试又称为模块测试，是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑，也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。  
  2.   
  3. 通常来说，程式設計師每修改一次程式就會進行最少一次單元測試，在編寫程式的過程中前後很可能要進行多次單元測試，以證實程式達到軟件規格書 (en:Specification)要求的工作目標，沒有臭蟲；雖然单元测试不是什么必须的，但也不坏，這牽涉到專案管理的政策決定。  
  4.   
  5. —— 维基百科 (中文，英文)  

 

为什么 JavaScript需要单元测试

由于存在浏览器解析环境、用户操作习惯等差异，前端程序的许多问题是无法捕捉或重现的，现在前端程序的测试多是黑盒测试，即靠点击点击点击来寻找程序bug。这种方式既费时费力，又无法保证测试的覆盖面。

同时，前端逻辑和交互越来越复杂，和其他编程语言一样，一 个函数，一个模块，在修改bug或添加新功能的过程中，很容易就产生新的bug，或使老的bug复活。这种情况下，反复进行黑盒测试，其工作量和测试质量 是可想而知的。

此外，浏览器兼容性测试是前 端程序测试的重要一环，在多个浏览器之间测试前端程序，上面说的工作量就会成n倍的增加。

为什么我们的前端程序如此脆弱？就是因为没用单元测试。。

假如使用了单元测试，上边的问题就变得很容易了，当然前提 是你要花时间去研究和编写测试用例。

根据函 数或模块的源代码，编写出包含各种情况的测试用例，每次解决bug或添加新功能，都随时更新这个用例然后进行测试，很容易就找出新bug和“复活”的老 bug。

测试兼容性，只需要在不同的浏览器 中分别运行这个测试，问题就一目了然了。

也 许白盒比黑盒要多费几倍的脑子，但想想我们那脆弱的程序，想想那些随时冒出来的烦人的老bug，费点脑子，值了！

使用QUnit

注：下面的内容主要参考了 QUnit文档 和 NetTuts+的这篇文章。

建立一个测试页面，引入 qunit.js 和 qunit.css 这 两个必需的文件，这两个文件是存放在github上的，鉴于目前操蛋的互联网环境，最好下载到本地调用。

注：body中的元素id命名必须依照如下形式，否则无法 正常显示。

XML/HTML代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.   <link rel="stylesheet"href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css"media="screen" />  
  6.   <script type="text/javascript"src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>  
  7. </head>  
  8. <body>  
  9.   <h1 id="qunit-header">QUnit example</h1>  
  10.   <h2 id="qunit-banner"></h2>  
  11.   <h2 id="qunit-userAgent"></h2>  
  12.   <ol id="qunit-tests"></ol>  
  13. </body>  
  14. </html>  

测试示例

下面是一个最简单的函数测试用例，解释请见程序注释。

JavaScript代码
  1. //定义测试模块  
  2. module( "测试示例" );  
  3. //定义一个简单的函数，判断参数是不是数字  
  4. function simpleTest(para) {  
  5.   if(typeof para == "number") {  
  6.     return true;  
  7.   }  
  8.   else{  
  9.     return false;  
  10.   }  
  11. }  
  12. //开始单元测试  
  13. test('simpleTest()', function() {  
  14.   //列举各种可能的情况，注意使用 ! 保证表达式符合应该的逻辑  
  15.   ok(simpleTest(2), '2 是一个数字');  
  16.   ok(!simpleTest("2"), '"2"不是一个数字');  
  17. });  

module( name, [lifecycle] ) 函数指定测试模块和周期。

ok( state, [message] ) 是QUnit中最常用的一个判断函数，只能判断true和false。

DEMO在这里，看一下测试结果：

大小: 19.15 K 尺寸: 326 x 221 浏览: 1821 次 点击打开新窗口浏览全图

结果都是绿的，说明两条测试语句都符合设定的规则。可以尝试修改下规则

JavaScript代码
  1. //...  
  2. ok(simpleTest("2"), '"2"是一个数字');  
  3. //...  

就可以看到爆红了。。

更多测试判断

除了ok()之外，QUnit还有如下几个判断函数：

相等判断equals( actual, expected, [message] )

示例：

JavaScript代码
  1. //定义一个简单的函数，返回数字和2的乘积  
  2. function simpleTest1(para) {  
  3.   return para * 2;  
  4. }  
  5. //开始单元测试  
  6. test('simpleTest1()', function() {  
  7.   //列举各种可能的情况  
  8.   equals(simpleTest1(2), 4, '2 * 2 等于 4');  
  9.   equals(simpleTest(2), 3, '2 * 2 等于 3');  
  10. });  

 

相同判断 (包含数组、对象等)same( actual, expected, [message] )

示例：

JavaScript代码
  1. //定义一个简单的函数，返回一个数组  
  2. function simpleTest2() {  
  3.   return [1, 2];  
  4. }  
  5. //开始单元测试  
  6. test('simpleTest2()', function() {  
  7.   //列举各种可能的情况  
  8.   equals(simpleTest2(), [1, 2], '函数返回数组[1, 2]');  
  9.   equals(simpleTest2(), [1, 1], '函数返回数组[1, 1]');  
  10. });  

same()和意思和equals()差不多，但 same()可以判断数组、对象等的相同，而equals不能。

异步与Ajax

对于异步程序的测试，如setTimeout、 setInterval、Ajax等情况，按照上面的方法，在异步调用执行之前，测试就已完成并输出了结果。这时，配合使用QUnit提供的两个函数：stop( [timeout] ) 和 start()，也可以轻松搞定。

直接看例子：

JavaScript代码
  1. //异步测试  
  2. module( "异步测试示例" );  
  3. //setTimeout  
  4. test('asynchronous test', function() {  
  5.   // 暂停测试  
  6.   stop();  
  7.    
  8.   setTimeout(function() {  
  9.     ok(true, '完成运行');  
  10.     //待测试完成后，恢复  
  11.     start();  
  12.   }, 100)  
  13. })  
  14. //另一种形式  
  15. asyncTest('asynchronous test', function() {  
  16.   setTimeout(function() {  
  17.     ok(true);  
  18.     //待测试完成后，恢复  
  19.     start();  
  20.   }, 100)  
  21. })  
Ajax也是类似的道理：
JavaScript代码
  1. //Ajax测试  
  2. function ajax(successCallback) {  
  3.   $.ajax({  
  4.     url: 'server.php',  
  5.     success: successCallback  
  6.   });  
  7. }  
  8.    
  9. test('asynchronous test', function() {  
  10.   // 暂停测试  
  11.   stop();  
  12.    
  13.   ajax(function() {  
  14.     // 异步调用判断  
  15.   })  
  16.    
  17.   setTimeout(function() {  
  18.     //异步测试完成后，恢复  
  19.     start();  
  20.   }, 2000);  
  21. })  

了解更多

 

 

Tags: 单元测试, qunit

Javascript | 评论:0 | 阅读:19713

Patch1 for NetBeans IDE 6.8 Now Available

Submitted by gouki on 2010, February 9, 11:03 PM

这次更新对PHP来说只有两个更新，但这两个更新都很重要，一个是自动缩进的问题，还有一个是interface的问题。
interface我不知道是什么问题，因为没仔细注意过，自动缩进也只是偶尔出现，有时候代码没有写全时，敲回车到新行时，却不由自主的缩进了。。

看看官方的说明先：
The NetBeans team has released a new patch, which is an update to the NetBeans IDE 6.8.

The patch includes bug fixes in modules for C/C++, EJB and EAR, GUI Builder, IDE Platform, Java, Java Debugger, JavaFX SDK, Java Persistence, Java Web Applications, JSF, Local History, PHP, RCP Platform, RESTful Web Services, and Team.

To obtain the fixes, the NetBeans IDE must be installed and running. You can download the fixes through the IDE's Plugin Manager.

关于PHP的更新只有两条：

5-Feb-2010 PHP - Provides tools and support for PHP development. 1.11.2 178542 Wrong indentation when using new line for braces placement.
05-Feb-2010 PHP - Provides tools and support for PHP development. 1.11.2 178103 [68cat] Wrong code genaration from interface

Tags: netbeans

Software | 评论:0 | 阅读:18880

PHP 中如何处理时区

Submitted by gouki on 2010, February 9, 4:51 PM

小记录，一般情况而言，默认安装好的lamp中，时间都是标准GMT时间，基本上，我们中国时间都应该是+8才对，但很多人往往不设置。

因此，为了时间正确，建议你还是设置一下默认时区，否则出现这8小时的误差也很郁闷的。

那么如何知道自己的时区是否正确呢？在不知道一些系统函数的情况下，直接输出 date('Y-m-d H:i:s', now()) ，就可以了解了。。

那么，我在知道这样的问题后，怎么能够知道当前设定的时区是哪里呢？这时可以通过：date_default_timezone_get()函数来获取，理所当然，设置时区就是date_default_timezone_set()了。

手册上也说明，在PHP 5.1之后，如果时区不正确，那每次在调用Date或者time函数时，都会有一个warning 或者 notice出现：

XML/HTML代码
  1. Note: Since PHP 5.1.0 (when the date/time functions were rewritten), every call to a date/time function will generate a E_NOTICE if the timezone isn't valid, and/or a E_STRICT message if using the system settings or the TZ environment variable.   

当然，如果你觉得这样设置很麻烦，你可以更改php.ini文件中的 ;date.timezone = ，添加自己需要的时区，例如 date.timezone = Asia/Chongqing，然后重启服务器就可以了。PHP支持的 timezone 的字符串在手册中能够查到。

手册中的：Appendix J. List of Supported Timezones，可以查看所有支持的时区。

Note: The latest version of the timezone database can be installed via PECL's timezonedb. For Windows users, a pre-compiled DLL can be downloaded from the PECL4Win site: php_timezonedb.dll.

Tags: 时区

PHP | 评论:0 | 阅读:17686

[娱乐]凤姐霸气语录大全

Submitted by gouki on 2010, February 8, 1:36 PM

最近凤姐很是红火啊，一时间芙蓉姐姐、杨二车娜母之类的在凤姐面前黯然失色，听听凤姐怎么说的：

1 你去死
2 必须具备国际视野 有征服世界的欲望
3 本人找伴侣 一不求帅二不求富
4 9岁博览群书，20岁到达顶峰， 往前300年往后推300年， 没有人会超过我，在智力上他们是不可能比我强的 那就在身高和外貌上弥补吧。。。
5 他太老了 而且身高也不够 他也不可能是北大清华 更不可能是经济学专业 我不会选他（陈坤）
6 这个标准不高 这个标准很低
7 看到其他女的就他妈花痴一样（疯了 上电视说脏话）
8 过了三十岁自己滚蛋
9 男人过了三十岁就没看点了 就人老珠黄了
10 你给我十万

11 吾日三省吾身（凤姐念错字了）
12 我用的是A4纸，因为A4是标准
13. 因为上海是一个经济中心 我这个人对征服经济世界蛮有兴趣的(征服猫扑的男人试试)
14. 我经常看的都是社会经济学和一些文学类的著作！比如说，《知音》还有《故事会》。
15 我一般按长相将人分等。
我是第三等。
（主持人指着他男朋友问：他是几等）
他啊，没有等。。。。。（乐乐捂嘴笑）
16 我在家乐福超市工作，世界500强.
17 世界上有一半的男人看到我就想逃跑，另一半我看到他就想逃跑。
18我这个人有点洁癖，以前读书时衣服每天要洗，现在基本上过两三天就洗一次，洗头也这样，现在很多时间都浪费在这上面。
19罗指着台下众人说:你们这些普通院校的,如果撇开这上面的七条,你们肯定有人会原意娶我...
20 真的美女真多啊.我对面的一位男孩,开始很仔细的打量我,我想我应该还没有出名到他已经看过我的视频吧.有次有人对我说你上电视了,我说什么电视?人家说东方卫视啊.我打开电视,东方卫视正在播奥巴马的新闻.我觉得我和奥巴马之间还有很大的距离.做人,自知之明还是有的.。

牛人啊。怪不得别人说信春哥得永生，而信凤姐则是得自信。

实在是我辈偶像 啊。

Tags: 凤姐, 罗玉凤, 芙蓉姐姐, 春哥

Misc | 评论:1 | 阅读:17582

Firebug Lite For Chrome

Submitted by gouki on 2010, February 8, 10:31 AM

很意外，一直都认为firebug不会为chrome写插件了。毕竟chrome自带了一个F12的debug工具。
4。0开始后的chrome逐渐开始支持插件，然而，插件网站却不是每次打开都正常。也让我非常郁闷。
不过，看过chrome的插件编写的hello world，却真的发现，它的编写比firefox的插件简单的多。

上面都是闲话，真正想说的还是firebug，自从前两年firebug为IE出过lite版本后，更新幅度就小了很多，所以这次看到它为chrome做的更新，还是不禁想尝试一下的。
OK，上官方的菜，Firebug自己认为：

Firebug Lite: doing the Firebug way, anywhere.
  1.  * Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome  
  2.  * Same look and feel as Firebug  
  3.  * Inspect HTML and modify style in real-time  
  4.  * Powerful console logging functions  
  5.  * Rich representation of DOM elements  
  6.  * Extend Firebug Lite and add features to make it even more powerful  

不过作为chrome插件，它还仅仅是一个beta版，他这么介绍的：

XML/HTML代码
  1. Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.  
  2.   
  3. o get more information about what's new in Firebug Lite 1.3 beta (which is compatible with all major browsers) please visit the beta release page.   


可以到这里进行下载：http://getfirebug.com/releases/lite/chrome/

Tags: firebug, chrome

Software | 评论:0 | 阅读:24137

Records:3108«‹398399400401402403404405406407›»