对JavaScript进行单元测试的工具

 
 
 
 

  
  
  
  
function addThreeToNumber(el){  
  
  
  
  
    return el + 3;  
  
  
  
  
} 
 
 
 
 

 
 
 
 

  
  
  
  
(function testAddThreeToNumber (){  
  
  
  
  
    var a = 5,  
  
  
  
  
        valueExpected= 8;  
  
  
  
  
   
  
  
  
  
    if (addThreeToNumber (a) === valueExpected) {  
  
  
  
  
        console.log("Passed!");  
  
  
  
  
    } else {  
  
  
  
  
        console.log("Failed!");  
  
  
  
  
    }  
  
  
  
  
}()); 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
         
  
  
  
  
         
  
  
  
  
         
  
  
  
  
         
  
  
  
  
     
  
  
  
  
     
  
  
  
  
        QUnit Test Suite 
  
  
  
  
         
  
  
  
  
        

假设您拥有两个函数分别负责将温度从摄氏转换为华氏，并转换回来。清单 5 显示了执行此转换的脚本。

清单 5. 转换 (qunit/js/script.js)

 
 
 
 

  
  
  
  
function convertFromCelsiusToFahrenheit(c){  
  
  
  
  
    var f = c * (9/5) + 32;  
  
  
  
  
    return f;  
  
  
  
  
}  
  
  
  
  
   
  
  
  
  
function convertFromFahrenheitToCelsius(f){  
  
  
  
  
    var c = (f - 32) * (5/9);  
  
  
  
  
    return c;  
  
  
  
  
} 
 
 
 
 

清单 6 显示了各自的测试用例。

清单 6. 测试用例 (qunit/js/test.js)

 
 
 
 

  
  
  
  
module ("Temperature conversion")  
  
  
  
  
   
  
  
  
  
test("conversion to F", function(){  
  
  
  
  
    var actual1 = convertFromCelsiusToFahrenheit(20);  
  
  
  
  
    equal(actual1, 68, ?Value not correct?);  
  
  
  
  
   
  
  
  
  
    var actual2 = convertFromCelsiusToFahrenheit(30);  
  
  
  
  
    equal(actual2, 86, ?Value not correct?);  
  
  
  
  
})  
  
  
  
  
   
  
  
  
  
test("conversion to C", function(){  
  
  
  
  
    var actual1 = convertFromFahrenheitToCelsius(68);  
  
  
  
  
    equal(actual1, 20, ?Value not correct?);  
  
  
  
  
   
  
  
  
  
    var actual2 = convertFromFahrenheitToCelsius(86);  
  
  
  
  
    equal(actual2, 30, ?Value not correct?);  
  
  
  
  
}) 
 
 
 
 

QUnit 中的测试用例由 test() 方法定义。逻辑是包含在传入函数的第二个参数中。在清单 6 中，两个测试分别名为 conversion to F和 conversion to C。每个测试包含两个断言。该测试中的断言使用了 equal() 方法。equal() 函数可以将预期值与测试函数的实际值相比较。 equal() 方法中的第三个参数是错误情况下显示的消息。

还可以通过 module() 函数将测试组织到模块中。在清单 6 中，Temperature conversion 模块含有这两个测试。

如果要运行测试：

1. 在 HTML 运行程序中包含源代码和测试文件，如清单 7 所示。

2. 在浏览器中打开页面。

清单 7. 在运行程序中包含 script.js 和 test.js

 
 
 
 

  
  
  
  
...  
  
  
  
  
  
  
  
  
  
... 
 
 
 
 

图 1 显示了 QUnit 如何在浏览器 (Firefox) 中显示结果。

图 1. QUnit 结果

清单 6 中的断言使用了 equal() 方法，但它不是 QUnit 提供的惟一断言。QUnit 提供的其他断言包括 ok() 或 strictEqual()。清单 8 显示了正在执行的方法。

#p#

清单 8. 更多的断言

 
 
 
 

  
  
  
  
module ("Other assertion");  
  
  
  
  
test("assertions", function(){  
  
  
  
  
    ok(true);  
  
  
  
  
    ok(3);  
  
  
  
  
    strictEqual("c", "c");  
  
  
  
  
    equal (3, "3");  
  
  
  
  
}); 
 
 
 
 

ok() 函数检查第一个参数为 true；strictEqual() 验证第一个参数严格等于第二个参数。在这些代码背后，strictEqual() 使用了=== 运算符，equal() 使用了 == 运算符。

如果测试失败，QUnit 还提供了有用的信息。将清单 8 中的代码改成清单 9 中的代码，让上一次断言执行失败。

清单 9. 上一次断言出现的错误

 
 
 
 

  
  
  
  
module ("Other assertion");  
  
  
  
  
test("assertions", function(){  
  
  
  
  
    ok(true);  
  
  
  
  
    ok(3);  
  
  
  
  
    strictEqual("c", "c");  
  
  
  
  
    strictEqual (3, "3");  
  
  
  
  
}); 
 
 
 
 

图 2 显示了 QUnit 执行清单 9 代码所返回的结果。

图 2. QUnit 结果：上次测试失败

结果非常详细，而且很容易查到上次断言的预期值与实际值有什么不同。

QUnit 另一项特性能让您在模块中的所有测试执行之前或之后执行命令。module() 函数接受 setup() 和 teardown() 回调作为第二个参数。使用 setup() 函数更新 清单 6 ，如清单 10 所示。

清单 10. setup() (qunit/js/test-setup.js)

 
 
 
 

  
  
  
  
module ("Temperature conversion", {  
  
  
  
  
    setup : function() {  
  
  
  
  
        this.celsius1 = 20;  
  
  
  
  
        this.celsius2 = 30;  
  
  
  
  
   
  
  
  
  
        this.fahrenheit1 = 68;  
  
  
  
  
        this.fahrenheit2 = 86;  
  
  
  
  
    }  
  
  
  
  
});  
  
  
  
  
test("conversion to F", function(){  
  
  
  
  
    var actual1 = convertFromCelsiusToFahrenheit(this.celsius1);  
  
  
  
  
    equal(actual1, this.fahrenheit1);  
  
  
  
  
   
  
  
  
  
    var actual2 = convertFromCelsiusToFahrenheit(this.celsius2);  
  
  
  
  
    equal(actual2, this.fahrenheit2);  
  
  
  
  
});  
  
  
  
  
test("conversion to C", function(){  
  
  
  
  
    var actual1 = convertFromFahrenheitToCelsius(this.fahrenheit1);  
  
  
  
  
    equal(actual1, this.celsius1);  
  
  
  
  
   
  
  
  
  
    var actual2 = convertFromFahrenheitToCelsius(this.fahrenheit2);  
  
  
  
  
    equal(actual2, this.celsius2);  
  
  
  
  
}); 
 
 
 
 

该示例移动了设置部分的断言所使用的值，以避免在测试的逻辑中使用这些值。

QUnit 还通过 asyncTest() 函数提供对异步测试的支持，如果您使用 Asynchronous JavaScript and XML (Ajax)，这是非常有用的特性。在这样的环境中，expect() 函数可以让你轻松地验证测试中运行的断言数量。

YUI Test：独立的单元测试模块

YUI Test 是 YUI 库（Yahoo!）的一个组件，是一个可扩展而完整的单元测试框架。如果要使用 YUI Test，需要：

1. 将 YUI 导入 HTML 运行程序，如下所示。

如以上代码所示，此样例使用了 YUI Test 第 3 版本。

2. 在测试脚本文件中，实例化 YUI 函数。加载所需的模块，test 和 console，如清单 11 所示。

#p#

清单 11.下载 test 和 console YUI 模块

 
 
 
 

  
  
  
  
YUI().use("test", "console", function (Y) {  
  
  
  
  
     // Test cases go here  
  
  
  
  
}); 
 
 
 
 

test 模块显然是用于测试的。console 模块并不是强制性的，但本示例将用它来打印结果。测试用例将会进入回调中，并以全局的 Y实例作为参数。

YUI Test 使用 Y.Test.Case() 构造函数实例化新测试用例，使用 Y.Test.Suite() 构造函数来实例化测试套件。测试套件与 JUnit 类似，包含若干个测试用例。可以使用 add() 方法将测试用例添加到测试套件中。

我们使用 YUI test 重新测试 清单 5 中的源代码。清单 12 显示了如何创建测试用的套件和测试用例。

清单 12. 测试套件和用例

 
 
 
 

  
  
  
  
YUI().use("test", "console", function (Y) {  
  
  
  
  
   
  
  
  
  
     var suite = new Y.Test.Suite("Temperature conversion suite");  
  
  
  
  
   
  
  
  
  
     //add a test case  
  
  
  
  
     suite.add(new Y.Test.Case({  
  
  
  
  
         name:"Temperature conversion?  
  
  
  
  
     ));  
  
  
  
  
}); 
 
 
 
 

清单 12 生成了一个名为 Temperature conversion suite 的套件和一个名为 Temperature conversion 的测试用例。现在，可以将测试方法写入对象文本中，作为参数传递给 Y.Test.Case 构造函数，如清单 13 所示。

清单 13. 测试用例与测试方法

 
 
 
 

  
  
  
  
suite.add(new Y.Test.Case({  
  
  
  
  
    name:"Temperature conversion",  
  
  
  
  
   
  
  
  
  
    setUp : function () {  
  
  
  
  
        this.celsius1 = 20;  
  
  
  
  
        this.celsius2 = 30;  
  
  
  
  
   
  
  
  
  
        this.fahrenheit1 = 68;  
  
  
  
  
        this.fahrenheit2 = 86;  
  
  
  
  
    },  
  
  
  
  
   
  
  
  
  
    testConversionCtoF: function () {  
  
  
  
  
        Y.Assert.areEqual(this.fahrenheit1,          
  
  
  
  
convertFromCelsiusToFahrenheit(this.celsius1));  
  
  
  
  
   
  
  
  
  
        Y.Assert.areEqual(this.fahrenheit2,  
  
  
  
  
convertFromCelsiusToFahrenheit(this.celsius2));  
  
  
  
  
    },  
  
  
  
  
   
  
  
  
  
    testConversionFtoC: function () {  
  
  
  
  
        Y.Assert.areEqual(this.celsius1,  
  
  
  
  
convertFromFahrenheitToCelsius(this.fahrenheit1));  
  
  
  
  
   
  
  
  
  
        Y.Assert.areEqual(this.celsius2,  
  
  
  
  
convertFromFahrenheitToCelsius(this.fahrenheit2));  
  
  
  
  
    }  
  
  
  
  
})); 
 
 
 
 

您可能注意到，在清单 13 中：

1. 可使用 setUp() 方法。YUI Test 在测试用例和测试套件层提供了 setUp() 和 tearDown() 方法。

2. 测试方法名以 test 单词开头，它们包含断言。

3. 本示例使用 Y.Assert.areEqual() 断言类型，它与 QUnit 中的 equal() 函数类似。YUI Test 为断言提供了多种方法，如：

1). Y.Assert.areSame()，它类似于 QUnit 中的 strictEqual()。

2). 数据类型断言（Y.Assert.isArray()、Y.Assert.isBoolean()、Y.Assert.isNumber() 等等）。

3). 特殊值断言（Y.Assert.isFalse()、Y.Assert.isNaN()、Y.Assert.isNull() 等等）。

要启动 YUI 中的测试，需要使用 Y.Test.Runner 对象。还需要将套件或测试用例添加到对象中，然后调用 run() 方法来运行测试。清单 14 显示了如何运行 清单 13 中创建的测试。

清单 14. 运行 YUI test

 
 
 
 

  
  
  
  
Y.Test.Runner.add(suite);  
  
  
  
  
Y.Test.Runner.run(); 
 
 
 
 

在默认情况下，结果会打印在浏览器的控制台中（如果浏览器支持控制台的话）。更好的方法是使用 Yahoo! Console 组件来打印结果。如果要使用 Yahoo! Console 组件，需要采用 Y.Console 构造函数将控制台绑定到 HTML 运行程序的 DOM 元素中，如清单 15 所示。

#p#

清单 15. Yahoo! Console

 
 
 
 

  
  
  
  
var console = new Y.Console({  
  
  
  
  
    verbose: true,  
  
  
  
  
    newestOnTop: false,  
  
  
  
  
    width:"600px" 
  
  
  
  
});  
  
  
  
  
   
  
  
  
  
console.render('#testLogger'); 
 
 
 
 

清单 15 显示了如何使用几个参数配置控制台。该控制台会在 DOM 元素内部呈现，其 id 为 testLogger。

需要更新 HTML 运行程序。添加该控制台所引用的 DOM 元素，如清单 16 所示。