项目准备启用Qunit, 先来尝试一下。 不说废话，上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>QUint</title>
<link rel="stylesheet" href="qunit.css">
<script src="qunit.js"></script>
<script type="text/javascript"> myfunc = function(a){
return a^3;
}
function Foo( x, y, z ) {
this.x = x;
this.y = y;
this.z = z;
} test("Simple", function(assert) {
assert.ok(function(){return "world1"}, "world");
assert.notOk(1 === "1", "=== failed!");
ok(1 == "1", "== pass!");
equal('1',1,"1==1 equal");
assert.ok(myfunc(1) == 2,"calc pass"+(1^3));
}); var a = new Foo(1,2,3);
var b = a;
test("object",function(){
propEqual(a,b,"a is same as b");
strictEqual(a,b,"a is strict same as b");
a.x =8;
propEqual(a,b,"a is same as b");
a = {x:8,y:2,z:3};
propEqual(a,b,"a is same as b");
notStrictEqual(a,b,"a is not strict same as b");
a = new Foo(1,2,3);
notPropEqual(a,b,"a is not same as b");
b = new Foo(1,2,3);
notEqual(a,b,"a is not same as b");
notStrictEqual(a,b,"a is not strict same as b for different object");
deepEqual(a,b,"a b DeepEqual");
}); test( "async", function( assert ) {
assert.expect( 2 ); var done1 = assert.async();
var done2 = assert.async();
setTimeout(function() {
assert.ok( true, "test resumed from async operation 1" );
done1();
}, 500 );
setTimeout(function() {
assert.ok( true, "test resumed from async operation 2" );
done2();
}, 150);
}); QUnit.test( "expect test", function( assert ) {
assert.expect( 1 ); function calc( x, operation ) {
return operation( x );
} var result = calc( 2, function( x ) {
assert.ok( true, "calc() calls operation function" );
return x * x;
}); assert.equal( result, 4, "2 squared equals 4" );
});
</script>
</head> <body>
<h1 id="qunit-header">QUnit Report</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
看报告：
看起来不错， 有equal, deepEqual, strictEqual要区别下。
在看看dom的操作:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo1</title>
<link rel="stylesheet" href="../../qunit.css">
<script src="../../qunit.js"></script>
<script type="text/javascript">
function submit (argument) {
// body...
var Str = document.getElementById("userName").value + document.getElementById("password").value;
document.getElementById("result").innerText = Str;
}
function reset (argument) {
// body...
document.getElementById("userName").value = document.getElementById("password").value = "";
document.getElementById("result").innerText = "";
} test("Simple", function(assert) {
document.getElementById("userName").value = "username";
document.getElementById("password").value = "password";
submit();
assert.equal(document.getElementById("result").innerText,"username" + "password","test input");
reset();
assert.equal(document.getElementById("password").value,document.getElementById("userName").value,"reset");
});
</script>
</head>
<body>
<!-- <form > -->
<div>
<div>
<label for="userName">UserName:</label>
<input type="text" id="userName" name="userName">
</div>
<div>
<label for="password">password:</label>
<input type="text" id="password" name="password">
</div>
<div>
<input type="button" value="submit" onclick="submit()">
</div>
</div>
<!-- </form> -->
<div id="result"> </div> <div id="test">
<h1 id="qunit-header">QUnit Report</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
</div>
</body>
</html>
图：
运行还可以啊。
问题来了： 怎么把测试报告也页面分离，这样太丑了？ 继续研究。。。