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