FuncUnit 和 Cucumber —— 前端測試的最佳搭檔
這周我花了些時間研究FuncUnit 和Cucumber. 本文中我將說明為啥要聯合使用這兩個框架及使用它們進行前端測試.
Cucumber
這是 Cucumber wiki:
Cucumber 可以執行基于文本描述的功能自動化測試
Cucumber 可以運行根據基于文本定義的自動化測試.它是基于BDD開發模式的，他方面了非技術人員的測試用例開發.
我一開始定義了一些功能實現。這是一個多選功能，就涉及選中和取消選中：
功能點: 取消選擇場景: 取消全部選項 使用多選控件和選項 當用戶點擊取消全部按鈕時，全部選中的選項就從選項卡上移除了，并恢復到未選項目單中。...
場景定義好了，就開始寫測試用例。 FuncUnit 使用簡潔的語法來描述用戶行為場景.
FuncUnit
FuncUnit的描述:
FuncUnit增強了 QUnit 和Jasmine庫, 借以描述用戶行為進一步進行黑盒測試.
FuncUnit 有兩點:
-
Actions - 描述動作，點擊，移動，滑動等.
-
Waits - 當判定條件為真后執行相應函數，要么超時或是測試失敗.
舉例如下:
F('#login').click();
F('#login-modal').exists("Login modal appeared"); FuncUnit 使用了 jQuery - like語法，意思就是:
-
點擊login id
-
在等到 id#login-modal出現在頁面上, 之后出現 "Login modal appeared" 提示信息
FuncUnit + Cucumber
我加了一些代碼來使用Funcunit和Cucumber ( QUnit 作為斷言的庫文件), 這樣就能這樣寫下測試用例:
...this.Given('A multiselect widget with selected items', function(next){
F('.selected-items-wrap li').size(1, function(){
ok(true, self.getCurrentStepName());
next();
});
})this.When('User clicks on the selected item checkbox', function(next){
selectedItem = can.trim($('.selected-items-wrap li:first').text());
F('.selected-items-wrap input[type=checkbox]:first').click(function(){
ok(true, self.getCurrentStepName());
next();
})
})
... 每一步都有 Given/When/Then 塊, 這只是少部分滿足了需求.
接著把回調函數參數傳遞給 action 或wait, FuncUnit 接著會在 action or wait 成功調用后被使用.
我們使用回到函數檢測測試的成功狀態，接著調用next函數完成下一步動作.
這些斷言都在 QUnit's 測試里和目標數字比對.
聚合代碼 i沒多少(~100 行), 但卻是很好的 API.
測試結果
測試擴展
完成上面的所有工作后，我突然冒出了一個想法：如果我們把這種文檔形式的測試重用會出現怎么樣的效果呢？
用非技術人員可以理解的語言書寫了功能定義，現在唯一要做的事情就是以某種方式演示某人使用此測試的時候所看到的結果。
最終證明完成這些任務非常簡單 。我已經對FuncUnit的動作函數進行了擴展，這樣，每次運行它的時候它就會模擬進行點擊或者輸入（或者其他用戶動作），它將首先將指向元素的虛擬光標移動到div處。我覺得這樣的結果是令人十分滿意的：
點擊側欄的場景，運行場景演示
你可以用這種方法向客戶演示功能，以及演示測試的文檔。你可以在GitHub上找到這個演示例子的代碼。
如果你有任何意見或者問題，請在下面留言或者直接發送給我的郵箱發送郵件。