Intern - JavaScript 自动化测试也可以如此便捷（2）

look_w

编写单元测试用例 FirstUnitTestModule在清单 6 中，已经指定了执行名为 FirstUnitTestModule 的单元测试模块。因此我们需要在 myproject/tests/文件夹下创建 unit 文件夹，新建 FirstFunctionalTestModule.js 文件。在 FirstUnitTestModule.js 中我们将添加测试用例来测试 dojo/base/_lang 模块的 isArray 和 isFunction 方法。
Intern 的测试模块是基于 AMD 的，首先引入测试模块的依赖项。
清单 7. 引入依赖项

1 2 3 4 5 6 7

define([     'intern!object',     'intern/chai!assert',     'myDojo/_base/lang' ], function (registerSuite, assert, lang) { });

其中 intern!object 定义了测试用例的接口形式。除了 intern!object 之外还有 intern!tdd 和 intern!bdd 可选。该模块定义了之后将以何种形式注册测试用例。
intern/chai!assert 为使用的断言 API。也可以选择 intern/chai!expect 或 intern/chai!should 来编写 BDD（Behavior Drive Development）风格的测试用例。
myDojo/_base/lang 为我们的待测模块。
接下来使用 intern!object 来注册测试用例。
清单 8. 单元测试用例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

define([     'intern!object',     'intern/chai!assert',     'myDojo/_base/lang' ], function (registerSuite, assert, lang) {     registerSuite({         name: 'lang',         isArray: function () {             var array1 = [1, 2, 3];             var array2 = new Array(1, 2, 3);             var array3 = {                 "length": 5             };             assert.equal(lang.isArray(array1), true);             assert.equal(lang.isArray(array2), true);             assert.equal(lang.isArray(array3), false);         },                   isFunction: function () {             var function1 = function(){                 // dummy function             };             var function2 = new Function('');             var function3 = {};             assert.equal(lang.isFunction(function1), true);             assert.equal(lang.isFunction(function2), true);             assert.equal(lang.isFunction(function3), false);         }     }); });

如清单 8 所示，我们注册了名为 lang 的 Test Suite，其中包含了两个分别名为 isArray 和 isFunction 的 Test Case。在这两个 Test Case 之中我们使用了 chai 的断言 API（chai API 细节请参见 ）来判断 dojo/base/_lang 模块提供的 isArray 和 isFunction 方法能否正确判断变量的类型。
编写 Functional 测试用例 FirstFunctionalTestModule接下来编写清单 6 中指定的 FirstFunctionalTestModule 的 Functional 测试模块。在 myproject/tests/文件夹下创建 functoinal 文件夹，新建 FirstFunctionalTestModule.js 文件。在 FirstFunctionalTestModule.js 中我们将模拟用户的点击来测试 dijit/form/Select 控件是否会正确改变值。
首先引入测试模块的依赖项。
清单 9. 引入依赖项

1 2 3 4 5 6

define([     'intern!object', 'intern/chai!assert' ], function (registerSuite, assert) { });

然后注册测试用例。
清单 10. Functional 测试用例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

define([     'intern!object',     'intern/chai!assert', ], function (registerSuite, assert) {     registerSuite({         name: 'Test dijit/form/Select',         'Click Menu Item': function () {             return this.remote                 .get('http://localhost/myproject/dojo/dijit/tests/form/test_Select.html')                 .setFindTimeout(5000)                 .findByCssSelector('body.claro')                     .findById('s1')                         .findByCssSelector('.dijitArrowButtonContainer')                             .click()                         .end()                     .end()                 .end()                 .findById('dijit_MenuItem_3_text')                     .click()                 .end()                 .findByName('s1')                     .getAttribute("value")                 .then(function (value) {                     assert.equal(value, 'FL');                 });         }     }); });

如清单 10 所示，我们注册了一个名为 Click Menu Item 的测试用例。在该测试用例中 this.remote 是一个 Leadfoot 命令对象。该对象提供了与 Selenium WebDriver API 一致的 API 来操作浏览器。
首先我们通过 this.remote 的 get 方法在浏览器中打开待测试的页面（该页面已包含在下载的 DojoToolkit 包中）。然后通过 setFindTimeout 方法来设置每次操作的时限。
紧接着通过三句 find 语句定位到 id 为 s1 的 dijit/form/Select 控件的下拉菜单键并调用 click 方法模拟用户点击。
注意，click 方法之后的三个 end 方法调用在于将之后 find 操作范围回溯到上一级以确保节点查找的正确性。
之后 findById('dijit_MenuItem_3_text')语句定位到选项值为 FL 的下拉菜单项，并通过 click 方法模拟点击。最后通过.findByName('s1')语句查找到该控件的 input 节点获取它的 value 属性，并使用断言判断其是否为 FL。
执行测试用例现在我们的测试用例已经准备好了，由于我们同时需要在本地执行普通单元测试与 Functional 测试用例，因此在执行之前还需要准备本地的 Selenium Server。
首先下载


新建 myproject/webdriver/文件夹并将下载的 selenium-server-standalone-x.x.x.jar(x 为版本号)文件以及 chromedriver 执行文件放到其中。
在命令行中，进入该文件夹并执行以下命令启动 Selenium Server （以 Windows 平台为例）。
清单 11. 启动 Selenium Server

1	java -jar selenium-server-standalone-2.37.0.jar -Dwebdriver.chrome.driver=chromedriver.exe

回到 myproject 文件夹，执行以下命令启动测试用例。
清单 12. 执行测试用例

1	node_modules\.bin\intern-runner config=tests\local_profile reporters=lcovhtml

清单 12 中的 config 参数为之前配置好的 local_profile.js 配置文件，reporter 参数指定了最终测试用例执行结果及测试覆盖率的输出格式（更多输出格式，参见 ）。
在测试用例执行完毕后，myproject 文件夹下会自动生成 html-report 文件夹。打开 myproject\html-report\index.html 文件即可看到最终的测试报告。
图 2. 测试报告总结通过以上简单的几步我们就在 Intern 框架的帮助下编写了普通单元测试与 Functional 测试用例,并在本地搭建起了 JavaScript 自动化测试环境，最终得到了包含测试覆盖率的测试结果报告。
由于 Intern 框架的可插拔性，在实际项目中我们还可以将其与 Jenkins、Tarvis 等持续集成工具整合在一起，来确保整个项目的代码质量。