代码改变世界

js的单元测试

2013-02-01 23:31  掸尘  阅读(4975)  评论(7)  编辑  收藏  举报

　　最近在优化以前的项目，重写一些地方，由于这些数据都是从客户端行情获取，自己也没有做测试的习惯，运行的时候，数据一直出不来，也不报错，这就俺们神奇的客户端。没办法，一步一步还原调试，最后找出来了，一个函数的参数，我调用的时候，参数的首字母变成大写了。可能最近雾大，哥每天吸收太多，变痴呆了！还有一个地方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，洗洗睡了