從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/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
  Cookbook.Models.Recipe.findAll({}, function(recipes){

    //makes sure we have something
    ok(recipes)

    //makes sure we have at least 1 recipe
    ok(recipes.length)

    //makes sure a recipe looks right
    ok(recipes[0].name)
    ok(recipes[0].description)

    //allows the next test to start
    start()
  });
})

3、執行功能測試

功能測試是用來測試類比使用者與介面互動所產生的滑鼠和鍵盤事件。

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

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

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

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

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

執行如下命令：
js funcunit\run selenium cookbook\funcunit.html

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

如果在IE中執行這個測試出現異常，你需要修改IE瀏覽器的配置。詳情請看FuncUnit協助文檔。

4、理解功能測試

FuncUnit加上QUnit可以開啟其它頁面，在這個例子中cookbook/cookbook.html，這個頁面上有互動動作和從上面擷取一些資訊。

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

開啟cookbook\recipe\create\create_test.js檔案，我們看到如下代碼：

test("create recipes", function(){

  //type Ice in the name field
  S("[name=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 td
  S('.recipe:nth-child(2) td:first').text(function(text){

    //checks taht it has ice
    ok(text.match(/Ice/), "Typed Ice");
  });

})

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

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

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

摘自 xpp02