模板
教程
環境
性能
功能
管理
單元測試101：你測試你的javascript嗎？(4)
如前所述，上面的測試用例對象是為JsTestDriver寫的，一個從谷歌出來的Javascript測試框架和測試運行器。把JsTestDriver從(產品)包中分離出來才是運行測試的正路。相比于標準的HTML文件加載源和測試，JsTestDriver運行一個可以幫你同時立即在多個瀏覽器上執行測試的服務器。理解它是如何工作的最有效的辦法就是看清的行動。
假設該jQuery插件在src/difference_in_words.jquery.js，測試用例在test/difference_in_words_test.js。為了運行這個測試，我們在項目的根目錄添加一個配置文件jsTestDriver.conf。它包括下面的內容：
[plain] view plaincopy1. server: http://localhost:4224
2.
3. load:
4. - src/*.js
5. - test/*.js
現在下載JsTestDriver.jar的最新版。同時需要安裝Java。然后在命令行中執行如下命令(如果是Windows，就是cmd.exe)：
1. java -jar JsTestDriver-1.2.2.jar --port 4224
現在你就已經在你機器上打開了一個JsTestDriver服務器。下一步是打開一個鏈接為http://localhost:4224/capture的瀏覽器，它讓瀏覽器轉入懶測試運行從屬(which will turn the browser into an idle test runningslave)。在你所有能用的瀏覽器上做同樣的事。然后打開一個命令行，cd進入項目目錄并鍵入：
java -jar JsTestDriver-1.2.2.jar --tests all
很快你應該能夠看到一些輸出：JsTestDriver在所有可用瀏覽器上運行的兩個測試，并顯示是否通過。恭喜你，你已經在多個瀏覽器上自動測試了!如果你的機器可以通過網絡使用其他設備訪問，你也可以使用這個服務器測試其他平臺(OS X, Windows,Linux)，你的iPhone, Android電話和其他移動設備。并且你只要在一個命令行就可以全部驗證它們。多么令人激動呀!
JsTestDriver不是你自動化測試的唯一選擇。如果你不喜歡它的斷言框架，你也可以運行用QUnit, YUI Test 和 Jasmine寫的測試。另外，雅虎YETI，一個只對YUI的類似的工具， Nicholas Zakas最近發布了YUI TestStandalone，包括了基于SeleniumWeb Driver的類似的運行器。
可測試性：用測試改善你的代碼
現在，你可能希望開始實現大量節省時間的單元測試就可以了，特別是對通常預期在多個環境運行得很好的JavaScript。單元測試不僅相比手工調試和猴子補丁(monkey patching)節省大量的時間，而且可以提高你的信心、快樂和生產力。
現在已經決定開始寫單元測試，你可能想知道如何開始。明顯的答案是為現有的代碼寫一些測試。不幸的是，那結果往往是現實很困難。部分原因是寫測試需要實踐，而且前幾個(測試)通常很難正確，甚至只是輸入(正確)。然而，為什么為現有的代碼寫測試很困難常常還有另外一個原因：代碼不是和測試思想一起寫的，通常不是很測試友好的。
可測試性的例子：計算時間差
“可測試性”是特定接口的測試友好方面的度量。一個測試友好的接口使所有對它關注的部分能方便的從外部存取，不需要為測試任何一個給定部分的API而建立無關的狀態。換句話說，可測試性是和良好設計有關的，松耦合、高內聚的，這只是花哨方法說對象不應該依賴于太多其他對象并且每個對象/函數只做好一件事。
作為一個可測試性的例子，我們再來看我們的jQuery插件。在前兩個單元測試中，我們希望確保對8天前的日期使用插件，結果是字符串“1 weekago”，并且另一個日期的結果是一個更詳細的字符串表示。注意，這兩個測試沒有任何DOM元素操作，雖然我們不得不創建一個對象以測試日期差計算和人類友好的描述字符串。
這個jQuery插件明顯比它本來難以測試，主要原因是它做了不止一件事情：計算日期差，生成兩個日期差的人類易讀的描述，并且從DOM節點的innerHTML抓取日期和更新它 。
要解決這個問題，考慮下面的代碼，它是同樣的插件的另一種實現：
[javascript] view plaincopy1. var dateUtil = {};
2.
3. (function () {
4. var units = {
5. second: 1000,
6. minute: 1000 * 60,
7. hour: 1000 * 60 * 60,
8. day: 1000 * 60 * 60 * 24,
9. week: 1000 * 60 * 60 * 24 * 7,
10. month: 1000 * 60 * 60 * 24 * 30
11. };
12.
13. function format(num, type) {
14. return num + " " + type + (num > 1 ? "s" : "");
15. }
16.
17. dateUtil.differenceInWords = function (date) {
18. // return correct string
19. };
20.
21. jQuery.fn.differenceInWords = function () {
22. this.each(function () {
23. var datetime = this.getAttribute("datetime");
24. this.innerHTML = dateUtil.differenceInWords(new Date(datetime));
25. });
26. };
27. }());
和前面的代碼相同，只是重新整理了?，F在有兩個公開函數：jQuery插件和新的接受一個日期并返回一個人類可讀的描述多長時間之前的一個字符串的dateUtil.differenceInWords。還不完美，但我們已經把它分成了兩個關注點?，F在jQuery插件只負責用人性化的字符串替換元素的innerHTML ，而新函數只負責計算成正確的字符串。雖然舊的測試仍然能通過，但測試應該針對新接口簡化。
[javascript] view plaincopy1. TestCase("TimeDifferenceInWordsTest", {
2. setUp: function () {
3. this.date8DaysAgo = new Date(new Date() - 8 * day);
4. var diff = 3 * day + 2 * hour + 16 * minute + 10 * second;
5. this.date3DaysAgo = new Date(new Date() - diff);
