当前位置: 首页 > 工具软件 > qunit-dom > 使用案例 >

[js][填坑] 单元测试 QUnit

周麒
2023-12-01

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>

 

转载于:https://www.cnblogs.com/qingmingsang/articles/5210455.html

 类似资料: