從JavaScriptMVC開始如何完成專案之建立測試程序

JavaScriptMVC放一個極大強調的​​重點在測試方面。 JavaScriptMVC框架是使用FuncUnit模組幫助我們更容易編寫功能和單元測試，且測試可以執行在瀏覽器或全自動化。

當你架構完食譜模組後，它會自動產生測試程式碼。以下這篇文章是指導我們如何完成下面5件事。

1、執行單元測試。
2、理解單元測驗。
3、執行功能測試。
4、理解功能測試。
5、測試是一個很好的功能。

1、執行單元測試

FuncUnit使用Jquery的QUnit工具進行測試像模組和基本插件。你可以在瀏覽器或Envjs中執行這些測試。

執行單元測試在瀏覽器中

打開cookbook/qunit.html，你將看到如下圖：

下面我們看看第二種方式是如何執行的。首先，要讓測試在Envjs環境中執行。

執行單元測試在Envjs環境中

Envjs是一個基本腳本瀏覽器。 FuncUnit可以在這個模擬的環境中執行你們的測驗。

在Window的DOC控制台輸入下面命令：
js funcunit/run envjs cookbook/qunit.html

它將讓qunit.html在一個模擬的瀏覽器環境中執行。輸入如下：

2、理解單元測試

FuncUnit使用QUnit工具的斷言來把測試功能組合到模組中。如果想更好的理解單元測試，我們可以透過閱讀QUnit的幫助文件。
cookbook/qunit.html載入steal模組並讓steal去載入cookbook/test/qunit/qunit.js檔案，而這個檔案就是去載入所有的單元測試檔案：
    cookbook/test/qunit/cookbook_test.js
    cookbook/test/qunit/cookbook_test.js？ test/qunit/recipe_test.js

一旦所有腳本載入完後測試的斷言將執行。

開啟cookbook/test/qunit/recipe_test.js文件，我們來看看findAll測試是如何運作的。
//creates a test
test("findAll", function(){
  //prevents the next test from running
  stop(2000);

  //requests recipes
. Cook. function(recipes){

    //makes sure we have something
    ok(recipes)

    //makes sure we havea 1 1
    //makes sure we havea 1 1

    // ure a recipe looks right

    ok (recipes[0].name)
    ok(recipes[0].description)

    //allows the next test to start

    start()
  });
);是用來測試模擬使用者與介面互動所產生的滑鼠和鍵盤事件。

廚師手冊的功能測試是測試食譜創建和列表介面的互動動作。

執行功能測試在瀏覽器 www.2cto.com

開啟cookbook/funcunit.html，你將看到如下圖：

執行功能測試在Selenium環境中。

Selenium能自動載入瀏覽器和封裝到FuncUnit模組中。

執行以下指令：

js funcunitrun selenium cookbookfuncunit.html

如果你是使用Window系統，它將開啟Firefox和IE瀏覽器。這個測試的​​結果如下：

如果在IE中執行這個測試出現異常，你需要修改IE瀏覽器的設定。詳情請參閱FuncUnit幫助文件。

4、理解功能測試

FuncUnit加上QUnit可以打開其它頁面，在這個例子中cookbook/cookbook.html，這個頁面上有交互動作和從上面獲取一些信息。

cookbook/funcunit.html頁面能像qunit.html一樣運作是因為FuncUnit模組載入了FuncUnit外掛。 FuncUnit像Jquery API一樣，用"S"別名來呼叫。

開啟cookbookrecipecreatecreate_test.js文件，我們看到以下程式碼：

test("create recipes", function(){

  //type Ice in the name field

type S("[name= type S("[name= type ("Ice")

  //type Cold Water in the description field

  S("[name=description]").type("Cold Water")

  //click the submit button

  S("[type= submit]").click()

  //wait until the 2nd recipe exists

  S('.recipe:nth-child(2)').exists()

  //Gets the text of the first Std

 ('.recipe:nth-child(2) td:first').text(function(text){

    //checks taht it has ice

    ok(text.match(/Ice/), "Typed

    ok(text.match(/Ice/), "Typedd Ice") ;
  });

})

從測試中可以很容易看出，這個測試案例是創建食譜，並且把食譜添加到列表中。

5、測試是一個很好的功能。

FuncUnit把Web測試可讀性和線性語法成為可能的。 JavaScriptMVC提供這個測試功能給我們Web開發很大的貢獻。