QUnit 实践一
项目准备启用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>
图：
运行还可以啊。
问题来了： 怎么把测试报告也页面分离，这样太丑了？ 继续研究。。。
MSN: 20045912@163.com