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>