从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、执行功能测试

功能测试是用来测试模拟用户与界面交互所产生的鼠标和键盘事件。

厨师手册的功能测试是测试食谱创建和列表界面的交互动作。

执行功能测试在浏览器

打开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开发很大的贡献。