标签： 前端开发
1. QUnit是什么？
一个js进行单元测试的库
单元测试就是检验代码是否按预期运作。
代码写的测试比人手测试好得多，因此单元测试是必须的。
官网
2. 如何使用
1）hello world：准备两个文件，一个显示测试结果的页面（有模板），一个测试用例
<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.17.1.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture" style="border: 1px solid red"></div>
<script src="http://code.jquery.com/qunit/qunit-1.17.1.js"></script>
<script src="test.js"></script>
</body>
</html>
测试用例的一个简单demo
//数字表示共有多少个断言，可有可无
QUnit.test("hello test", 1, function (assert) {
assert.ok("hello" == "hello", "hello world successfully");
});
断言还有equal(), deepEqual()等等，详细可参考官网
在浏览器上看test.html结果如下：
- 同步回调
QUnit.test("sync callback", function (assert) {
var body = $('body');
body.click(function(){
assert.ok(true, "body was clicked");
body.unbind("click");
});
body.trigger("click"); //注意这里是jQuery的写法，原生是element.click();
assert.ok(true, "test");
});
- 异步回调
有两种方法:一是使用var done = assert.async(), 再在异步断言处调用done()；另一种是使用QUnit.asnycTest()
//第一种方法
QUnit.test("async callback", 2, function (assert) {
var body = $('body');
var done = assert.async(); //表示存在异步，先暂停测试
body.click(function(){
assert.ok(true, "body was clicked");
done(); //表示异步结束，开始测试
body.unbind("click");
});
setTimeout(function(){
body.trigger("click");
}, 1000)
assert.ok(true, "test");
});
//第二种方法
QUnit.asyncTest("async callback", 2, function (assert) {
var body = $('body');
body.click(function(){
assert.ok(true, "body was clicked");
QUnit.start(); //表示异步完成，开始测试
body.unbind("click");
});
setTimeout(function(){
body.trigger("click");
}, 1000)
assert.ok(true, "test");
});
- AJAX测试的一种写法
对于有多个异步读取的页面，可以这样写测试用例
//当完成所以的ajax时调用start开始测试
function createAsyncCounter(count){
count = count || 1;
return function(){ --count || QUnit.start()};
//count为零时开始测试
}
QUnit.asyncTest("ajax test", 2, function(assert){
//这里只展示1个ajax，根据自己情况而定
var count = createAsyncCounter(1);
var x = $.ajax("https://api.github.com/users/octocat/gists");
x.done(function(data, status, xhr){
assert.ok(data,"get data");
assert.equal(data[0]["id"],"6cad326836d38bd3a7ae","id correct");
}).always(count); //无论ajax成功与否都执行计数
});
- DOM测试
可以测试dom操作是否达到预期，需要用到测试页面的#qunit-fixture
QUnit.test("dom test", 1, function (assert) {
var fixture = $('#qunit-fixture');
fixture.append('<span>hello!</span>');
assert.equal($('span', fixture).length, 1, "div append one span");
});
#qunit-fixture每次测试都会自动清除自身内容，因此可复用。
6)分组
使用在测试的方法上面加一句QUnit.module("module_name"); 即可分组
另外分组也可以设置测试前后需要做的事情
QUnit.module("module_name", {setup:function(){//..}, teardown:function(){//...}});
- 自定义断言
//定义
QUnit.assert.mod2 = function(value, expect, message){
var actual = value % 2;
this.push(actual === expect, actual, expect, message);
}
//使用
QUnit.test( "test", function( assert ) {
assert.expect( 2 );
assert.mod2( 2, 0, "2 % 2 == 0" );
assert.mod2( 3, 1, "3 % 2 == 1" );
});
- 测试页面上的工具
三个checkbox
Hide passed tests
很好理解，就是隐藏通过的测试，勾选之后，通过的测试就不显示出来了，在测试用例多的时候非常有用。而且使用了HTML5的sessionStorage技术，会记住之前没通过的测试，然后页面重新载入的时候只测试之前那部分没有通过的case。
Check for Globals
“全局检查“，如果勾选了这项，在进行测试之前，QUnit会检查测试之前和测试之后window对象中的属性，如果前后不一样，就会显示不通过。
No try-catch
选中则意味着QUnit会在try-catch语句之外运行回调，此时，如果测试抛出异常，测试就会停止。主要是因为有些浏览器的调试工具是相当弱的，尤其IE6，一个未处理的异常要比捕获的异常可以提供更多的信息。即使再次抛出，由于JavaScript不擅长异常处理，原来的堆栈跟踪在大多数浏览器里都丢失了。如果遇到一个异常，无法追溯错误代码的时候，就可以使用这个选项了。
测试用例旁边还有一个rerun可以重新测试
- 使用grunt实现自动测试
很简单，首先安装qunit插件:
npm install grunt-contrib-qunit --save-dev
然后在grunt.initConfig里配置qunit: { files:[test/*.html] }
添加任务到watch
watch:{
files:['<%= jshint.files %>', '<%= qunit.files %>'],
tasks:['jshint', 'qunit']
}
加载库 grunt.loadNpmTasks('grunt-contrib-qunit');
也可以加入到常规任务中 grunt.registerTask('test', ['jshint', 'qunit', 'watch']);
之后每次更新插件都会自动运行测试文件。
