標記檔案: Qunit

如何: 配置單元測試和測試覆蓋率與 QUnit.js 和 Blanket.js 辦公室 365 SharePoint 應用程式

發表評論

簡介

我都一直在探索單元測試和測試覆蓋率的 JavaScript 作為我為 SharePoint 線上在辦公室工作一個新的 SharePoint 應用程式 365 套房。  明顯的研究路徑帶我去 Qunit.js 在那之後的權利, 自 Blanket.js.

QUnit 讓我設置了單元測試，並將其組合為模組。  一個模組只是簡單方式組織相關的測試. (我用它作為不肯定, 但它為我工作到目前為止與迄今定義了的測試的小集).

Blanket.js 與 Qunit 集成，它將顯示我的實際行的 JavaScript 是 — — 和更重要的是 — — 不實際執行過程中運行測試。  這是"覆蓋"— — 執行的行測試覆蓋的，有些則不.

設置好的測試案例和查看覆蓋範圍之間, 我們可以減少我們的代碼已隱藏缺陷的風險。  好的時候.

Qunit

假設你有你的 Visual Studio 專案設置, 通過下載從 JavaScript 包開始 http://qunitjs.com.  向解決方案中添加的 JavaScript 和 CSS 相應。  我的看起來像這樣:

image

圖 1

如您所見, 我正在使用 1.13.0 當時我寫了這篇博客. 別忘了下載和添加的 CSS 檔.

這讓開, 下一步是創建某些種類的測試控管和參考的 Qunit 位。  我在一個叫"QuizUtil.js"，所以，創造了一個叫"QuizUtil_test.html"，如圖所示的 HTML 頁面的指令檔中測試一堆函數:

image 圖 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 類 =&quot;此處將有機可乘&quot;&gt;一些文本&這是;/div&gt;", "更複雜的測試字串。");
        });

        模組("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>

有幾個這裡發生的事:

  1. 引用我的代碼 (QuizUtil.js)
  2. 引用 Qunity.js
  3. 定義某些模組 (getIDFromLookup, 餅乾, 和其他人)
  4. 放置 <div> 其 ID 是"qunit".

然後, 我只是把這頁和你這樣的東西:

image

圖 3

如果你看的頂部, 你有幾個選項, 其中兩個是有趣:

  • 隱藏通過的測試: 很明顯。  可以説明您的眼睛只看到問題的範圍和不多的雜波.
  • 模組: (下拉清單): 這將篩選到測試你想要的只是那些組測試.

至於測試本身 — — 幾個評論:

  • 不用說您需要編寫代碼，它是可測試的放在第一位。  使用該工具可以説明執行的紀律. 例如, 我有一個稱為"getTodayAsCaml 函數()”.  這並不是非常可測試因為它需要沒有輸入的參數，並測試是否相等, 我們將需要不斷更新的測試代碼，以反映當前的日期。  我重構它通過添加資料輸入的參數，然後傳遞時我想今天的日期加楓格式的當前日期.
  • 它看起來非常堅固和 Qunit 框架檔自行測試。  它可以做簡單的事情，像相等性測試，並還提供了對支援 ajax 樣式調用 ("真正"或嘲笑使用您最喜愛的褻).
  • 經歷過程也會迫使你想通過邊緣情況 — — 發生了什麼"未定義"或 null 傳遞到一個函數。  它使死了簡單的測試了這些方案。  好的東西.

覆蓋面 Blanket.js

Blanket.js 是 Qunit 補充通過跟蹤代碼的執行過程中運行測試的實際行數。  它集成右 Qunit 即使它是整個單獨的應用程式, 它很好地扮演 — — 它看起來真的像它是一個無縫的應用程式.

這是 blanket.js 在行動:

image 圖 4

image

圖 5

(你實際上必須按一下頂部的"啟用覆蓋範圍"核取方塊 [見圖 3] 要啟用此功能。)

在圖中突出顯示的行 5 我的測試中的任何沒有執行過, 所以我需要設計一種測試不會導致他們能夠執行如果我想要全覆蓋.

獲取 blanket.js 工作按照下面的步驟:

  1. 它從下載 http://blanketjs.org/.
  2. 將它添加到您的專案
  3. 更新您的測試線束頁 (在我的案子中 QuizUtil_test.html) 如下所示:
    1. 引用的代碼
    2. 裝飾你 <腳本> 像這樣的引用: 
    <腳本 類型="文本/javascript" src="QuizUtil.js" 資料覆蓋></腳本>

Blanket.js 拾取"的資料覆蓋"屬性並不會它的魔力。  它的掛接 Qunit, 更新的使用者介面，若要添加"啟用覆蓋範圍"選項和瞧!

摘要 (TL; 博士)

使用 Qunit 來編寫測試案例.

  • 下載
  • 將它添加到您的專案
  • 寫測試線束頁
  • 創建您的測試
    • 重構您的代碼可測試的一些
    • 有創意!  瘋狂的想, 不可能的情況下，無論如何進行測試.

使用 blanket.js，以確保覆蓋範圍

  • 確保工作 Qunit
  • 下載 blanket.js 並將其添加到您的專案
  • 將它添加到您的測試線束頁:
    • 將引用添加到 blanket.js
    • "資料-蓋"將屬性添加到您 <腳本> 標記
  • 運行 Qunit 測試.

我從來沒有做之前，有一些基本的東西，在少數幾個小時的工作。 

幸福測試!

</結束>

undefined訂閱我的博客.

跟我在 Twitter 上 http://www.twitter.com/pagalvin