[size=0.76em]QUnit 入门 [size=0.76em]QUnit 是与 JUnit(Java 编程)类似的单元测试框架,jQuery 团队用它来对 jQuery 库进行单元测试。要使用 QUnit,需要按照以下方法: - 下载 qunit.css 文件和 qunit.js 文件(参阅 参考资料)。
- 创建一个 HTML 页面,其中包含导入刚下载的 CSS 和 JavaScript 文件的特定标签。
[size=0.76em]清单 4 显示了适用于 QUnit 的标准的 HTML 运行程序。
清单 4. HTML 运行程序 (qunit/runner.html)
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>QUnit Test Suite</title> <link rel="stylesheet" href="css/qunit.css" type="text/css" media="screen"> <script type="text/javascript" src="js/lib/qunit.js"></script> </head> <body> <h1 id="qunit-header">QUnit Test Suite</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> <div id="qunit-fixture">test markup</div> </body></html> |
[size=0.76em]假设您拥有两个函数分别负责将温度从摄氏转换为华氏,并转换回来。清单 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;} |
[size=0.76em]清单 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?);}) |
[size=0.76em]QUnit 中的测试用例由 test() 方法定义。逻辑是包含在传入函数的第二个参数中。在清单 6 中,两个测试分别名为 conversion to F 和 conversion to C。每个测试包含两个断言。该测试中的断言使用了 equal() 方法。equal() 函数可以将预期值与测试函数的实际值相比较。equal() 方法中的第三个参数是错误情况下显示的消息。 [size=0.76em]还可以通过 module() 函数将测试组织到模块中。在清单 6 中,Temperature conversion 模块含有这两个测试。 [size=0.76em]如果要运行测试: - 在 HTML 运行程序中包含源代码和测试文件,如清单 7 所示。
- 在浏览器中打开页面。
清单 7. 在运行程序中包含 script.js 和 test.js
...<script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/test.js"></script>... |
[size=0.76em]图 1 显示了 QUnit 如何在浏览器 (Firefox) 中显示结果。
图 1. QUnit 结果
[size=0.76em]清单 6 中的断言使用了 equal() 方法,但它不是 QUnit 提供的惟一断言。QUnit 提供的其他断言包括 ok() 或 strictEqual()。清单 8 显示了正在执行的方法。
清单 8. 更多的断言
module ("Other assertion");test("assertions", function(){ ok(true); ok(3); strictEqual("c", "c"); equal (3, "3");}); |
[size=0.76em]ok() 函数检查第一个参数为 true;strictEqual() 验证第一个参数严格等于第二个参数。在这些代码背后,strictEqual() 使用了 === 运算符,equal() 使用了 == 运算符。 [size=0.76em]如果测试失败,QUnit 还提供了有用的信息。将清单 8 中的代码改成清单 9 中的代码,让上一次断言执行失败。
清单 9. 上一次断言出现的错误
module ("Other assertion");test("assertions", function(){ ok(true); ok(3); strictEqual("c", "c"); strictEqual (3, "3");}); |
[size=0.76em]图 2 显示了 QUnit 执行清单 9 代码所返回的结果。
图 2. QUnit 结果:上次测试失败
[size=0.76em]结果非常详细,而且很容易查到上次断言的预期值与实际值有什么不同。 [size=0.76em]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);}); |
[size=0.76em]该示例移动了设置部分的断言所使用的值,以避免在测试的逻辑中使用这些值。 [size=0.76em]QUnit 还通过 asyncTest() 函数提供对异步测试的支持,如果您使用 Asynchronous JavaScript and XML (Ajax),这是非常有用的特性。在这样的环境中,expect() 函数可以让你轻松地验证测试中运行的断言数量。
|