[js][填坑] 单元测试 QUnit
ok( truthy [, message ] )
//truthy结果true则显示message信息
1 QUnit.test("ok test", function(assert) { 2 assert.ok(true, "true succeeds"); 3 assert.ok("non-empty", "non-empty string succeeds"); 4 assert.ok(false, "false fails"); 5 assert.ok(0, "0 fails"); 6 assert.ok(NaN, "NaN fails"); 7 assert.ok("", "empty string fails"); 8 assert.ok(null, "null fails"); 9 assert.ok(undefined, "undefined fails"); 10 });
equal( actual, expected [, message ] )
//actual结果与预测的结果expected相等则显示message信息
1 QUnit.test("equal test", function(assert) { 2 assert.equal(0, 0, "Zero, Zero; equal succeeds"); 3 assert.equal("", 0, "Empty, Zero; equal succeeds"); 4 assert.equal("", "", "Empty, Empty; equal succeeds"); 5 assert.equal(0, false, "Zero, false; equal succeeds"); 6 assert.equal("three", 3, "Three, 3; equal fails"); 7 assert.equal(null, false, "null, false; equal fails"); 8 });
deepEqual( actual, expected [, message ] )
//如果equal 是 ==的话，deepEqual就是===
1 QUnit.test("deepEqual test", function(assert) { 2 var obj = { 3 foo: "bar" 4 }; 5 assert.deepEqual(obj, { 6 foo: "bar" 7 }, "Two objects can be the same in value"); 8 });
回调测试 expect
1 QUnit.test("a test", function(assert) { 2 assert.expect(2);//这里写回调数 3 4 function calc(x, operation) { 5 return operation(x); 6 } 7 var result = calc(2, function(x) { 8 assert.ok(true, "calc() calls operation function"); 9 return x * x; 10 }); 11 assert.equal(result, 4, "2 square equals 4"); 12 }); 13 QUnit.test("a test", function(assert) { 14 assert.expect(1);//这里写回调数 15 var body = document.body; 16 body.addEventListener("click", function() { 17 assert.ok(true, "body was clicked!"); 18 }); 19 body.click(); 20 });
操作DOM
//最好不要在一个测试函数里连续操作DOM
1 //错误写法 2 QUnit.test("2 asserts", function(assert) { 3 var fixture = document.getElementById("qunit-fixture"); //DOM在这操作 4 var div = document.createElement('div'); 5 fixture.appendChild(div); 6 assert.equal(fixture.childNodes.length, 1, "div added successfully!"); 7 var span = document.createElement('span'); 8 fixture.appendChild(span); 9 assert.equal(fixture.childNodes.length, 1, "span added successfully!"); 10 }); 11 //正确写法 12 QUnit.test("Appends a div", function(assert) { 13 var fixture = document.getElementById("qunit-fixture"); //DOM在这操作 14 var div = document.createElement('div'); 15 fixture.appendChild(div); 16 assert.equal(fixture.childNodes.length, 1, "div added successfully!"); 17 }); 18 QUnit.test("Appends a span", function(assert) { 19 var fixture = document.getElementById("qunit-fixture"); //DOM在这操作 20 var span = document.createElement('span'); 21 fixture.appendChild(span); 22 assert.equal(fixture.childNodes.length, 1, "span added successfully!"); 23 });
demo
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <title>QUnit</title> 8 <link rel="stylesheet" href="./qunit-1.21.0.css"> 9 <style> 10 #qunit-testrunner-toolbar { 11 font-size: 25px; 12 } 13 14 #qunit-testresult { 15 font-size: 25px; 16 } 17 18 #qunit-tests li { 19 font-size: 25px; 20 } 21 </style> 22 </head> 23 24 <body> 25 <div id="qunit"></div> 26 <div id="qunit-fixture"></div> 27 <script src="./qunit-1.21.0.js"></script> 28 <script> 29 console.log(); 30 </script> 31 </body> 32 33 </html>
