模板
教程
環境
性能
功能
管理
對JavaScript進行單元測試的工具
簡介
單元測試關注的是驗證一個模塊或一段代碼的執行效果是否和設計或預期一樣。有些開發人員認為，編寫測試用例浪費時間而寧愿去編寫新的模塊。然而，在處理大型應用程序時，單元測試實際上會節省時間;它能幫助您跟蹤問題并安全地更新代碼。
常用縮略語
DOM：文檔對象模型
HTML：超文本標記語言
JSTD：JSTestDriver
YUI：Yahoo! User Interface
在過去，只對服務器端語言進行單元測試。但前端組件越來越復雜，使得編寫 JavaScript 代碼測試用例的需求日益提高。如果您不經常編寫客戶端腳本的測試，學習進度可能非常難。測試用戶界面可能需要在思路上做一些調整。(有些程序開發人員一時半會還不能相信 JavaScript 是合適的編程語言。)
在本文中，您將學習如何使用 QUnit、YUI Test 和 JSTestDriver 對 JavaScript 進行單元測試。
下載 本文的源代碼。
回頁首
JavaScript 單元測試
為了演示 JavaScript 測試，這一節將分析 JavaScript 中一個基本函數測試用例。清單 1 顯示了要測試的函數：將 3(作為一個數)添加到傳遞的變量中。
清單 1. 源代碼 (example1/script.js)
function addThreeToNumber(el){
return el + 3;
}
|
清單 2 在自執行的函數中包含了測試用例。
清單 2.測試用例 (example1/test.js)
(function testAddThreeToNumber (){
var a = 5,
valueExpected= 8;
if (addThreeToNumber (a) === valueExpected) {
console.log("Passed!");
} else {
console.log("Failed!");
}
}());
|
將 5 傳遞給測試的函數之后，測試檢查返回值是 8。如果測試成功，就會在一個現有瀏覽器的控制臺中打印出 Passed!;否則就會出現 Failed!。如果要運行測試，需要按照以下步驟進行操作：
將兩個腳本文件導入作為測試運行程序的 HTML 頁面中，如清單 3 所示。
在瀏覽器中打開頁面。
清單 3. HTML 頁面 (example1/runner.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Example 1</title>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body></body>
</html>
|
您可以不使用瀏覽器控制臺，而是將結果打印在頁面或由 alert() 方法生成的彈出窗口中。
斷言是測試用例中的核心元素，用來驗證某一條件是否滿足。例如，在 清單 2 中，addThreeToNumber (a) === valueExpected 就是一個斷言。
如果您擁有很多用例并帶有很多斷言，那么使用框架就會方便很多。下面的內容將會重點介紹一些最流行的 JavaScript 單元測試框架：QUnit、YUI Test 和 JSTestDriver。
回頁首
QUnit 入門
QUnit 是與 JUnit(Java 編程)類似的單元測試框架，jQuery 團隊用它來對 jQuery 庫進行單元測試。要使用 QUnit，需要按照以下方法：
下載 qunit.css 文件和 qunit.js 文件(參閱 參考資料)。
創建一個 HTML 頁面，其中包含導入剛下載的 CSS 和 JavaScript 文件的特定標簽。
清單 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>
|
假設您擁有兩個函數分別負責將溫度從攝氏轉換為華氏，并轉換回來。清單 5 顯示了執行此轉換的腳本。
