使用TDD在JavaScript中開發用戶界面原理

我在嘗試提出在JavaScript中開發UI時正確遵循TDD原則的最佳方法時遇到了很多麻煩。什麼是最好的方式去做這件事？使用TDD在JavaScript中開發用戶界面原理

最好是將視覺與功能分開嗎？你是否首先開發視覺元素，然後編寫測試，然後編寫功能代碼？

2008-09-18 Chris MacDonald

我已經做了一些TDD使用JavaScript的過去，以及我所要做的就是區分單元測試和集成測試。Selenium會測試你的整個站點，包括服務器的輸出，post-back，ajax調用，所有這些。但對於單元測試而言，這些都不重要。

你想要的只是你要與之交互的UI和你的腳本。您將使用的工具基本上是JsUnit，它採用HTML文檔，在頁面上具有一些Javascript功能，並在頁面上下文中執行它們。所以你要做的是在你的函數頁面中包含Stubbed HTML。從那裏，您可以測試腳本與模擬HTML的獨立單元中的UI組件，腳本和測試之間的交互。

這可能有點混亂，所以讓我們看看我們是否可以做一些測試。讓一些TDD假設在加載一個組件之後，根據LI的內容對元素列表進行着色。

tests.html

<html> 
<head> 
<script src="jsunit.js"></script> 
<script src="mootools.js"></script> 
<script src="yourcontrol.js"></script> 
</head> 
<body> 
    <ul id="mockList"> 
     <li>red</li> 
     <li>green</li> 
    </ul> 
</body> 
<script> 
    function testListColor() { 
     assertNotEqual($$("#mockList li")[0].getStyle("background-color", "red")); 

     var colorInst = new ColorCtrl("mockList"); 

     assertEqual($$("#mockList li")[0].getStyle("background-color", "red")); 
    } 
</script> 


</html>

顯然TDD是一個多步驟的過程，所以我們的控制，我們需要多個例子。

yourcontrol.js（步驟1）

function ColorCtrl(id) { 
/* Fail! */  
}

yourcontrol.js（第二步）

function ColorCtrl(id) { 
    $$("#mockList li").forEach(function(item, index) { 
     item.setStyle("backgrond-color", item.getText()); 
    }); 
    /* Success! */ 
}

你或許可以看到這裏的痛點，你必須保持你的模擬HTML這裏的頁面與您的服務器控件的結構同步。但它確實爲您提供了一個用JavaScript進行TDD的好系統。

來源

2008-09-19 00:54:02

這是我切換到Google Web Toolkit的主要原因......我使用Java進行開發和測試，並且有合理的預期，即編譯後的JavaScript將在各種瀏覽器上正常運行。由於TDD主要是單元測試功能，因此大多數項目都可以在編譯和部署之前開發和測試。

集成和功能測試套件在將代碼部署到測試服務器後，驗證結果代碼是否按預期運行。

來源

2008-09-18 19:49:15

我從來沒有成功TDDed UI代碼。我們最接近的確是儘可能地將UI代碼與應用程序邏輯分開。這就是爲什麼模型 - 視圖 - 控制器模式很有用的原因之一 - 模型和控制器可以在沒有太多麻煩並且沒有太複雜的情況下進行TDD。根據我的經驗，這個視圖總是留給我們的用戶驗收測試（我們編寫的Web應用程序和我們的UAT使用Java的HttpUnit）。但是，在這個級別上，它確實是一個集成測試，沒有我們對TDD所期望的隔離測試屬性。由於這種設置，我們必須先編寫我們的控制器/模型測試/代碼，然後編寫UI和相應的UAT。然而，在最近我寫的Swing GUI代碼中，我一直在用GUI編寫GUI代碼，以便在添加到控制器/模型/ API之前探索我的前端設計。 YMMV雖然在這裏。

所以要重申，我能給出的唯一建議就是您已經懷疑的 - 儘可能將您的UI代碼從邏輯中分離出來，然後對它們進行TDD。

來源

2008-09-18 20:35:43 Desty

我剛剛開始在我正在開發的一個新項目上開發Javascript TDD。我目前的計劃是使用qunit來進行單元測試。開發測試可以通過在瀏覽器中刷新測試頁面來運行。

爲了持續集成（並確保測試在所有瀏覽器中運行），我將使用Selenium自動加載每個瀏覽器中的測試工具並讀取結果。這些測試將在每次簽入源代碼控制時運行。

我也打算使用JSCoverage來獲得測試的代碼覆蓋率分析。這也將通過Selenium實現自動化。

我目前正在設置這個。一旦我將設置敲定出來，我會更新這個答案並提供更詳細的信息。

測試工具：

來源

2008-09-18 20:38:37 Karl