簡介
我都一直在探索單元測試和測試覆蓋率的 JavaScript 作為我為 SharePoint 線上在辦公室工作一個新的 SharePoint 應用程式 365 套房。 明顯的研究路徑帶我去 Qunit.js 在那之後的權利, 自 Blanket.js.
QUnit 讓我設置了單元測試，並將其組合為模組。 一個模組只是簡單方式組織相關的測試. (我用它作為不肯定, 但它為我工作到目前為止與迄今定義了的測試的小集).
Blanket.js 與 Qunit 集成，它將顯示我的實際行的 JavaScript 是 — — 和更重要的是 — — 不實際執行過程中運行測試。 這是"覆蓋"— — 執行的行測試覆蓋的，有些則不.
設置好的測試案例和查看覆蓋範圍之間, 我們可以減少我們的代碼已隱藏缺陷的風險。 好的時候.
Qunit
假設你有你的 Visual Studio 專案設置, 通過下載從 JavaScript 包開始 http://qunitjs.com. 向解決方案中添加的 JavaScript 和 CSS 相應。 我的看起來像這樣:
圖 1
如您所見, 我正在使用 1.13.0 當時我寫了這篇博客. 別忘了下載和添加的 CSS 檔.
這讓開, 下一步是創建某些種類的測試控管和參考的 Qunit 位。 我在一個叫"QuizUtil.js"，所以，創造了一個叫"QuizUtil_test.html"，如圖所示的 HTML 頁面的指令檔中測試一堆函數:
圖 2
下面是代碼:
<!DOCTYPE html>
<html xmlns="HTTP://www.w3.org/ 1999/xhtml">
<頭>
<標題>QuizUtil 試驗與 Qunit</標題>
<連結 區域快線="樣式表" href="../CSS/qunit-1.13.0.css" />
<腳本 類型="文本/javascript" src="QuizUtil.js" 資料覆蓋></腳本>
<腳本類型 ="文本 javascript" src ="qunit 1.13.0.js"></腳本>
<腳本類型 ="文本 javascript" src ="blanket.min.js"></腳本>
<腳本>
模組("getIDFromLookup");
測試("QuizUtil getIDFromLookupField", 功能 () {
var goodValue = "1;#保羅 · 高爾文";
平等(getIDFromLookupField(goodValue) + 1, 2), "ID 的 [" + goodValue + "] + 1 應該是 2";
平等(getIDFromLookupField(未定義), 未定義, "未定義輸入的參數應返回未定義的結果。");
平等(getIDFromLookupField(""), 未定義, "空輸入的參數應返回未定義的值。");
平等(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), 未定義,"應始終返回結果可轉換為整數");
平等(getIDFromLookupField("2;#一些其他人"), "2", "檢查 [2;#一些其他人].");
平等(getIDFromLookupField("9834524;#長整型值"), "9834524", "大值測試。");
notEqual(getIDFromLookupField("5;#任何人", 6), 6, "測試 notEqual (5 不等於 6 對於此示例: [5;#任何人]");
});
模組("htmlEscape");
測試("QuizUtil htmlEscape()", 功能 () {
平等(htmlEscape("<"), "&這是;", "逃離小於運算子 ('<')");
平等(htmlEscape("<div 類 = "someclass">一些文本</div>"), "&這是;div 類 ="此處將有機可乘">一些文本&這是;/div>", "更複雜的測試字串。");
});
模組("getDateAsCaml");
測試("QuizUtil getDateAsCaml()", 功能 () {
平等(getDateAsCaml(新增功能 日期("2013/12/31")), "2013年-12-31T:00:00:00", "測試硬式編碼日期: [12/31/2013]");
平等(getDateAsCaml(新增功能 日期("01/05/2014")), "2014年-01-05T:00:00:00", "測試硬式編碼日期: [01/05/2014]");
平等(getDateAsCaml(新增功能 日期("01/31/2014")), "2014年-01-31T:00:00:00", "測試硬式編碼日期: [01/31/2014]");
平等(getTodayAsCaml(), getDateAsCaml(新增功能 日期()), "getTodayAsCaml() 應等於 getDateAsCaml(新的日期())");
平等(getDateAsCaml("一派胡言價值"), 未定義, "嘗試獲取一個廢話值的日期。");
平等(getDateAsCaml(未定義), 未定義, "嘗試獲取的日期 [未定義] 日期。");
});
模組("getParameterByName");
測試("QuizUtil getParameterByName (從查詢字串)", 功能 () {
平等(getParameterByName(未定義), 未定義, "嘗試獲取未定義的參數應返回未定義。");
平等(getParameterByName("不存在"), 未定義, "嘗試獲取參數值，當我們知道該參數不存在。");
});
模組("Cookie");
測試("QuizUtil 各種 cookie 功能。", 功能 () {
平等(setCookie("測試", "1", -1), getCookieValue("測試"), "讓我設置一個 cookie 應該工作。");
平等(setCookie("anycookie", "1", -1), 真正的, "設置有效的烹飪應返回 '真正的'。");
平等(setCookie("瘋狂的 cookie 名稱 !@#$%"%\^&*(()?/><.,", "1", -1), 真正的, "設置壞 cookie 的名稱應返回 false。");
平等(setCookie(未定義, "1", -1), 未定義, "傳遞作為該 cookie 的名稱未定義。");
平等(getCookieValue("不存在"), "", "Cookie 不存在測試。");
});
</腳本>
</頭>
<正文>
<div id="qunit"></div>
<div id="qunit 夾具"></div>
</正文>
</html>
有幾個這裡發生的事:
- 引用我的代碼 (QuizUtil.js)
- 引用 Qunity.js
- 定義某些模組 (getIDFromLookup, 餅乾, 和其他人)
- 放置 <div> 其 ID 是"qunit".
然後, 我只是把這頁和你這樣的東西:
圖 3
如果你看的頂部, 你有幾個選項, 其中兩個是有趣:
- 隱藏通過的測試: 很明顯。 可以説明您的眼睛只看到問題的範圍和不多的雜波.
- 模組: (下拉清單): 這將篩選到測試你想要的只是那些組測試.
至於測試本身 — — 幾個評論:
- 不用說您需要編寫代碼，它是可測試的放在第一位。 使用該工具可以説明執行的紀律. 例如, 我有一個稱為"getTodayAsCaml 函數()”. 這並不是非常可測試因為它需要沒有輸入的參數，並測試是否相等, 我們將需要不斷更新的測試代碼，以反映當前的日期。 我重構它通過添加資料輸入的參數，然後傳遞時我想今天的日期加楓格式的當前日期.
- 它看起來非常堅固和 Qunit 框架檔自行測試。 它可以做簡單的事情，像相等性測試，並還提供了對支援 ajax 樣式調用 ("真正"或嘲笑使用您最喜愛的褻).
- 經歷過程也會迫使你想通過邊緣情況 — — 發生了什麼"未定義"或 null 傳遞到一個函數。 它使死了簡單的測試了這些方案。 好的東西.
覆蓋面 Blanket.js
Blanket.js 是 Qunit 補充通過跟蹤代碼的執行過程中運行測試的實際行數。 它集成右 Qunit 即使它是整個單獨的應用程式, 它很好地扮演 — — 它看起來真的像它是一個無縫的應用程式.
這是 blanket.js 在行動:
圖 4
圖 5
(你實際上必須按一下頂部的"啟用覆蓋範圍"核取方塊 [見圖 3] 要啟用此功能。)
在圖中突出顯示的行 5 我的測試中的任何沒有執行過, 所以我需要設計一種測試不會導致他們能夠執行如果我想要全覆蓋.
獲取 blanket.js 工作按照下面的步驟:
- 它從下載 http://blanketjs.org/.
- 將它添加到您的專案
- 更新您的測試線束頁 (在我的案子中 QuizUtil_test.html) 如下所示:
- 引用的代碼
- 裝飾你 <腳本> 像這樣的引用:
<腳本 類型="文本/javascript" src="QuizUtil.js" 資料覆蓋></腳本>
Blanket.js 拾取"的資料覆蓋"屬性並不會它的魔力。 它的掛接 Qunit, 更新的使用者介面，若要添加"啟用覆蓋範圍"選項和瞧!
摘要 (TL; 博士)
使用 Qunit 來編寫測試案例.
- 下載
- 將它添加到您的專案
- 寫測試線束頁
- 創建您的測試
- 重構您的代碼可測試的一些
- 有創意! 瘋狂的想, 不可能的情況下，無論如何進行測試.
使用 blanket.js，以確保覆蓋範圍
- 確保工作 Qunit
- 下載 blanket.js 並將其添加到您的專案
- 將它添加到您的測試線束頁:
- 將引用添加到 blanket.js
- "資料-蓋"將屬性添加到您 <腳本> 標記
- 運行 Qunit 測試.
我從來沒有做之前，有一些基本的東西，在少數幾個小時的工作。
幸福測試!
</結束>
訂閱我的博客.
跟我在 Twitter 上 http://www.twitter.com/pagalvin
