javascriptMVC入門 — 12.FuncUnit

　　FuncUnit整合了 Selenium 和 PhantomJS，使用類似於jquery的語言實現對web工程的自動化測試。FuncUnit使用QUnit來組織測試和斷言，但他擴充了QUnit，你可以實現下面的工作：

1.[FuncUnit.open]開啟一個頁面。

2.查詢元素。

3.類比使用者操作。

4.狀態等待，直到他為true。

5.得到你頁面的資訊，運行斷言。

6.在瀏覽器中運行測試。

7.整合了瀏覽器自動化測試盒build工具。

 

　　建立測試

　　QUnit提供了基本的寫單元和功能測試的基本結構。

　　1.Module

　　module包含setup和teardown方法，這些方法將會在每次測試的時候運行。

module("Contacts", {  // 每次測試之前運行  setup: function(){    // setup 代碼  },  // 每次測試之後運行  teardown: function(){    // cleanup 代碼  }})

 　　2.Test

test("findOne", function(){  // define a test})

　　3.Assertions

test("counter", function() {  ok(Conctacts.first().name, "there is a name property");  equal(Contacts.counter(), 5, "there are 5 contacts");});

 

　　開啟一個頁面

　　下面的代碼使用S.open( URL )在每次測試的時候開啟autocomplete.html頁面。

module("autosuggest",{  setup: function() {    S.open('autosuggest.html')  }});

 

　　查詢元素

　　使用FuncUnit寫測試就像使用jquery一樣，S方法是jquery的一個拷貝，用來查詢程式頁面中的元素。就像$，S返回的結果，FuncUnit的方法可是使用鏈式的方式使用。

// 獲得 #description,等待他變為 visible, 輸入資訊S("#description").visible().type("Test Framework")

 

　　類比使用者操作

　　當你測試一個外掛程式的時候，你需要類比使用者的操作。FuncUnit使用[syn]庫準確的類比底層事件，如mouseup 和keypress 。也可以類比高層操作，如click和type。下面的例子類比了一般的使用者操作。

　　1.click

// click 按鈕S('#submit_button').click()

　　2.type

// 在文字框輸入資料S('#task_name').type("Learn FuncUnit")

　　3.drag

// 拖拽 task item 到 trash 地區S('.task').drag(".trash");

 

　　等待頁麵條件

　　使用者操作之後，測試頁面會觸發相應事件，頁面會發生改變。等待命令用來等待頁麵條件，然後運行測試代碼。等待方法重寫了jquery的getter方法。S.fn.text( textVal, callback )方法等待頁面元素$.fn.text的內容為textVal。

// 等待內容變為 "task complete"S("#result").text("task complete")

visible：

// 等待第一個元素可見S('#autocomplete_results:first-child').visible()

width：

// 等待寬度變為200pxS('#horizontal_menu_item').width(200)

val：

// 等待輸入框的值S('#language_input').val("JavaScript")

size：

// 等待有相同數量的html元素S('.contact').size(5)

　　可以用過下面的串連瞭解更多的等待方法，http://www.javascriptmvc.com/docs.html#!funcunit.waits。

 

　　擷取資訊和運行斷言

　　在類比了使用者操作之後，你需要等待頁面發生改變，你經常是想去擷取元素的值然後運行斷言。你可以把jquery的getter方法和QUnit 斷言結合在一起。這些方法將會作為等待函數的回呼函數執行。

// 等待，直到我們有了結果，然後運行回呼函數S('.autocomplete_item').visible(function(){  equal( S('.autocomplete_item').size(), 5, "there are 5 results")})

 

　　在瀏覽器中運行

　　測試可以用任何瀏覽器運行，應用程式去開啟一個獨立的視窗，運行結果會顯示在QUnit頁面中。

test("JavaScript results",function(){  S('input').click().type("JavaScript")  // 等待，直到我們有了結果  S('.autocomplete_item').visible(function(){    equal( S('.autocomplete_item').size(), 5, "there are 5 results")  })});

 

　　整合了瀏覽器自動化測試盒build工具

　　相同的測試代碼可以在瀏覽器自動化測試載入器Selenium, PhantomJS, 和 Envjs 中運行。那些工具藉助命令列工具啟動。

js funcunit/run phantomjs path/to/funcunit.html

　　結果會顯示在命令列工作上，如果測試失敗可以藉助 Maven 中斷你代碼的build工作，或者整合到CI工具中，如Jenkins。