FuncUnit 和 Cucumber —— 前端测试的最佳搭档

这周我花了些时间研究FuncUnit 和Cucumber. 本文中我将说明为啥要联合使用这两个框架及使用它们进行前端测试.

Cucumber

这是 Cucumber wiki:

Cucumber 可以执行基于文本描述的功能自动化测试

Cucumber 可以运行根据基于文本定义的自动化测试.它是基于BDD开发模式的，他方面了非技术人员的测试用例开发.

我一开始定义了一些功能实现。这是一个多选功能，就涉及选中和取消选中：

功能点: 取消选择场景: 取消全部选项   使用多选控件和选项     当用户点击取消全部按钮时，全部选中的选项就从选项卡上移除了，并恢复到未选项目单中。...

场景定义好了，就开始写测试用例。 FuncUnit 使用简洁的语法来描述用户行为场景.

FuncUnit

 FuncUnit的描述:

FuncUnit增强了 QUnit 和Jasmine库, 借以描述用户行为进一步进行黑盒测试.

FuncUnit 有两点:

1. Actions - 描述动作，点击，移动，滑动等.

2. Waits - 当判定条件为真后执行相应函数，要么超时或是测试失败.

举例如下:

F('#login').click();  F('#login-modal').exists("Login modal appeared");

FuncUnit 使用了 jQuery - like语法，意思就是:

1. 点击login id

2. 在等到 id#login-modal出现在页面上, 之后出现 "Login modal appeared" 提示信息

FuncUnit + Cucumber

我加了一些代码来使用Funcunit和Cucumber ( QUnit 作为断言的库文件), 这样就能这样写下测试用例:

...this.Given('A multiselect widget with selected items', function(next){      F('.selected-items-wrap li').size(1, function(){          ok(true, self.getCurrentStepName());          next();      });  })this.When('User clicks on the selected item checkbox', function(next){          selectedItem = can.trim($('.selected-items-wrap li:first').text());          F('.selected-items-wrap input[type=checkbox]:first').click(function(){              ok(true, self.getCurrentStepName());              next();          })      })  ...

每一步都有 Given/When/Then 块, 这只是少部分满足了需求.

接着把回调函数参数传递给 action 或wait, FuncUnit 接着会在 action or wait 成功调用后被使用.

我们使用回到函数检测测试的成功状态，接着调用next函数完成下一步动作.

这些断言都在 QUnit's 测试里和目标数字比对.

 聚合代码 i没多少(~100 行), 但却是很好的 API.

测试结果

测试扩展

完成上面的所有工作后，我突然冒出了一个想法：如果我们把这种文档形式的测试重用会出现怎么样的效果呢？

用非技术人员可以理解的语言书写了功能定义，现在唯一要做的事情就是以某种方式演示某人使用此测试的时候所看到的结果。

最终证明完成这些任务非常简单 。我已经对FuncUnit的动作函数进行了扩展，这样，每次运行它的时候它就会模拟进行点击或者输入（或者其他用户动作），它将首先将指向元素的虚拟光标移动到div处。我觉得这样的结果是令人十分满意的：

点击侧栏的场景，运行场景演示

你可以用这种方法向客户演示功能，以及演示测试的文档。你可以在GitHub上找到这个演示例子的代码。

如果你有任何意见或者问题，请在下面留言或者直接发送给我的邮箱发送邮件。