QUnit是由jQuery团队开发的一套单元测试工具。官网网址:http://qunitjs.com/。
用法:1 我们可以直接下载qunit然后在你的HTML文件中引入js资源以及css样式资源
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>QUnit Example</title> <!--<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.23.0.css">--> <link rel="stylesheet" type="text/css" href="css/QUnit.css"/> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <!--<script src="https://code.jquery.com/qunit/qunit-1.23.0.js"></script>--> <script src="js/QUnit.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function demo(num){ return num>5 ? true :false; } QUnit.test( "Hello test", function( assert ) { assert.ok( demo(6), "大于5!" ); }); QUnit.test( "test2", function( assert ) { assert.equal( "djl 箫氏" ,"djl 箫氏", "true和1值相等" ); }); </script> </body> </html>
2 当然也可以使用CDN静态资源,上述代码中屏蔽的部分。
然后既可以开始了,使用最多的就是ok 断言,用来判断是true还是false;
上面代码中demo函数中的值为6大于5会返回true,所以出现的效果如上图。如果我们改为4,则会是下面的结果。
当然还有其他情况也会,是上图的现象,例如下面的情况。
QUnit.test( "ok test", function( assert ) { assert.ok( true, "true succeeds" ); assert.ok( "non-empty", "non-empty string succeeds" ); assert.ok( false, "false fails" ); assert.ok( 0, "0 fails" ); assert.ok( NaN, "NaN fails" ); assert.ok( "", "empty string fails" ); assert.ok( null, "null fails" ); assert.ok( undefined, "undefined fails" ); });
当然还有equal函数,用来比较两个的值是否相等(不会来比较数据类型)。相当于是“==”,所以它不能用于比较数组和对象。
例:
QUnit.test( "equal test", function( assert ) { assert.equal( 0, 0, "Zero, Zero; equal succeeds" ); assert.equal( "", 0, "Empty, Zero; equal succeeds" ); assert.equal( 1, "1", "Empty, Empty; equal succeeds" ); assert.equal( true, "1", "Empty, Empty; equal succeeds" ); assert.equal( true, 1, "Empty, Empty; equal succeeds" ); assert.equal( "", "", "Empty, Empty; equal succeeds" ); assert.equal( "three", 3, "Three, 3; equal fails" ); assert.equal( null, false, "null, false; equal fails" ); });
当然如果要比较数组和对象,那么就要你用到same()这个函数。
用法也很简单,大家直接看API文档就好了http://api.qunitjs.com/category/all/
在这里还有几篇文章,值得一看:
国外的一篇:http://code.tutsplus.com/tutorials/how-to-test-your-javascript-code-with-qunit--net-9077