JavaScript的單元測試工具

引言

單元測試致力于驗證一個模塊或一個代碼單元是按照設計或是如預期那樣運作的。一些開發者寧愿花時間來實現一些新的模塊，卻把編寫測試用例看成是浪費時間的事情。然而，在應付大型應用時，單元測試實際上是節省了時間；其幫助你追蹤問題，讓你能夠安全地進行代碼更新。

在過去，單元測試只是應用在服務器端語言上。但是，隨著前端組件中的復雜性的不斷提升，編寫JavaScript代碼的測試單元的這種需要就增加了。如果你通常都不為客戶端腳本編寫測試代碼的話，則學習曲線可能會很陡峭，對用戶界面的測試可能會要求你調整一下思維過程。（而且，一些開發者可能一時還難以認可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!。為了運行這一測試，你需要：

1. 在某個充當測試運行器的HTML頁面中導入兩個腳本文件，如清單3所示。

2. 在瀏覽器中打開該頁面。

清單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" kesrc="js/script.js">< /script> 
  < script type="text/javascript" src="js/test.js" kesrc="js/test.js">< /script> 
  < /head> 
  < body>< /body> 
  < /html> 

一種替代使用瀏覽器控制臺的做法是，在頁面中或是在由alert()方法生成的彈出窗口中輸出結果。

斷言（assertion），測試用例中的核心要素，被用來驗證某個條件的滿足。例如，在清單2中，addThreeToNumber (a) === valueExpected就是一個斷言。

如果大量的測試用例都有很多斷言的話，框架就派上用場了，接下來的幾節內容重點說明一些最受歡迎的JavaScript單元測試框架：QUnit、YUI Test和JSTestDriver。

QUnit入門

QUnit是一個類似于JUnit（Java編程）的單元測試框架，其被JQuery團隊用來測試jQuery庫。若要使用QUnit，你需要：

1. 下載qunit.css和qunit.js文件（參見參考資料）。

2. 創建一個HTML頁面，該頁面包含了一些導入你剛下載的那些CSS和JavsScript文件的特定標簽。

清單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" kesrc="css/qunit.css" type="text/css" media="screen"> 
  < script type="text/javascript" src="js/lib/qunit.js" kesrc="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> 

原文轉自：http://www.uml.org.cn/Test/201301152.asp