[转载]javascript的单元测试 - 刘璋 - 博客园

[转载]js的单元测试 – 刘璋 – 博客园.

  最近在优化以前的项目,重写一些地方,由于这些数据都是从客户端行情获取,自己也没 有做测试的习惯,运行的时候,数据一直出不来,也不报错,这就俺们神奇的客户端。没办法,一步一步还原调试,最后找出来了,一个函数的参数,我调用的时 候,参数的首字母变成大写了。可能最近雾大,哥每天吸收太多,变痴呆了!还有一个地方value 写成val。于是决定用单元测试,汤姆大叔曾经提到过qunit,自己搜一下,原来是JQuery团队开发的,所有JQuery的代码均由其测试。

我自己看了一下,自己深深的爱上了他,只需引用两个文件就行了

<link rel="stylesheet" href="/resources/qunit.css">
<script src="/resources/qunit.js"></script>

非常简单!
随便看一个简单的例子

 

test( "hello test", function() {  ok( 1 == "1", "Passed!" );});

ok( state, message )  state 会转换成true or false, 如果是true 则通过,反则失败

还有一个是比较常用 equal

 

test( "a test", function() {  equal( 1, "1", "String '1' and number 1 have the same value" );});

equal( actual, expected, message )  actual 是object类型,expected 也是object 适合数组,对象进行比较!

ok 和equal 属于比较常用的断言

下面是我自己做的例子

复制代码
<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">  
<title>QUnit Example</title>  
<link rel="stylesheet" href="qunit/qunit.css">
<style> .myclass { color : red}; </style>
</head>
<body>  
<div id="qunit"></div>  
<div id="qunit-fixture"></div>  
<script src="qunit/qunit.js"></script>
<script src="qunit/jquery-1.6.3.js"></script>
<div id="mytest"></div>
</body>
</html>
<script>
function changeEl(el, text) { el.html(text); el.addClass('myclass'); } module('my first test'); test('测试插入的元素操作', function(){ var el = $('#mytest'); changeEl(el, '') equal(el.text(), '', '测试通过'); equal(el.hasClass('myclass'), true, '测试通过'); }) </script>
复制代码

下面是测试界面

 

ok,洗洗睡了

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏