程序博客网 > 在线生成数据统计图表

如何进行高效JavaScript单元测试

来源：互联网 发布：在线生成数据统计图表 编辑：程序博客网 时间：2024/04/30 12:59

导读：能在一个浏览器上运行的JavaScript并不一定能在其他浏览器上运行。如果没有对代码进行单元测试，那么在决定升级或支持新浏览器的时候，组织就需要花钱测试或重新测试Web应用程序。在本文中，了解JavaScript单元测试如何帮助您降低测试成本，轻松支持更多浏览器。

一个损坏的JavaScript代码示例

Web应用程序面临的一个最大挑战是支持不同版本的Web浏览器。能在Safari上运行的JavaScript代码不一定能在Windows® Internet Explorer (IE)、Firefox或Google Chrome上运行。这个挑战的根源是呈现层中的JavaScript代码从一开始就没有进行测试。如果没有对代码进行单元测试，那么在升级或支持新浏览器后，组织可能需要花钱反复测试Web应用程序。本文将展示如何通过高效的JavaScript代码单元测试降低测试成本。

一个常见用例是登录表单JavaScript验证。考虑清单1中的表单。

清单 1.登录表单

  1. <FORM> 
  2.     <table> 
  3.         <tr> 
  4.             <td>Username</td> 
  5.             <td><input type="text" id="username"/></td> 
  6.             <td><span id="usernameMessage"></span></td> 
  7.         </tr> 
  8.         <tr> 
  9.             <td>Password</td> 
  10.             <td><input type="password" id="password"/></td> 
  11.             <td><span id="passwordMessage"></span></td> 
  12.         </tr>     
  13.         <tr> 
  14.             <td><input type="button" onclick="new appnamespace.  
  15.             ApplicationUtil().validateLoginForm()" value="Submit"/></td> 
  16.         </tr> 
  17.     </table> 
  18. </FORM> 

这个表单很简单，仅包含用户名和密码字段。单击提交按钮时，将通过ApplicationUtil执行一个特定的表单验证。以下是负责验证HTML表单的JavaScript对象。清单2显示了ApplicationUtil对象的代码。

清单 2.损坏的ApplicationUtil对象代

  1. appnamespace = {};  
  2.  
  3. appnamespace.ApplicationUtil = function() {};  
  4.  
  5. appnamespace.ApplicationUtil.prototype.validateLoginForm =  function(){  
  6.     var error = true;  
  7.     document.getElementById("usernameMessage").innerText = "";  
  8.     document.getElementById("passwordMessage").innerText = "";    
  9.  
  10.     if (!document.getElementById("username").value) {  
  11.         document.getElementById("usernameMessage").innerText =   
  12.         "This field is required";  
  13.         error = false;  
  14.     }  
  15.       
  16.     if (!document.getElementById("password").value) {  
  17.         document.getElementById("passwordMessage").innerText =   
  18.         "This field is required";  
  19.         error = false;  
  20.     }         
  21.  
  22.     return error;         
  23. }; 

在清单 2中，ApplicationUtil对象提供一个简单验证：用户名和密码字段都已填充。如果某个字段为空，就会显示一条错误消息：This field is required。

上面的代码能够在Internet Explorer 8和Safari 5.1上工作，但无法在 Firefox 3.6 上工作，原因是Firefox不支持innerText属性。通常，（上述代码和其他类似JavaScript代码中的）主要问题是不容易发现编写的JavaScript代码是不是跨浏览器兼容的。

这个问题的一个解决方案是进行自动化单元测试，检查代码是不是跨浏览器兼容。

JsTestDriver

JsTestDriver library是最好的JavaScript单元测试框架之一，它为JavaScript代码提供了跨浏览器测试。图 1展示了JsTestDriver的架构。

图 1.JsTestDriver架构

JsTestDriver 架构

捕获不同的浏览器之后，服务器会负责将JavaScript测试用例运行程序代码加载到浏览器中。可以通过命令行捕获浏览器，也可以通过将浏览器指向服务器URL来捕获浏览器。一旦捕获到浏览器，该浏览器就被称为从属浏览器。服务器可以加载JavaScript代码，在每个浏览器上执行测试用例，然后将结果返回给客户端。

客户端（命令行）需要以下两个主要项目：

  1. JavaScript文件，即源文件和测试文件
  2. 配置文件，用于组织源文件和测试文件的加载

这个架构比较灵活，允许单个服务器从网络中的其他机器捕获任意数量的浏览器。例如，如果您的代码在Linux上运行但您想针对另一个Windows机器上的Microsoft Internet Explorer运行您的测试用例，那么这个架构很有用。

要使用JsTestDriver库，请先下载最新版的JsTestDriver 1.3.2。

jsTestDriver是开源项目

jsTestDriver是Apache 2.0 许可下的一个开源项目，托管在Google Code上，后者是一个类似于SourceForge的项目存储库。只要使用Open Source Initiative批准的许可，开发人员就能在这个存储库中创建和管理公共项目。

还有许多其他JavaScript单元测试工具，请参见下面的参考资料部分中的其他工具，比如Dojo Objective Harness (DOH)。

编写单元测试代码

现在开始编写JavaScript测试用例。为简单起见，我将测试以下用例：

  • 用户名和密码字段均为空。
  • 用户名为空，密码不为空。
  • 用户名不为空，密码为空。

清单 3显示了表示TestCase对象的ApplicationUtilTest对象的部分代码。

清单 3.ApplicationUtilTest 对象代码的一部分

  1. ApplicationUtilTest = TestCase("ApplicationUtilTest");  
  2.  
  3. ApplicationUtilTest.prototype.setUp = function () {  
  4. /*:DOC += <FORM action=""><table><tr><td>Username</td><td> 
  5. <input type="text" id="username"/></td><td><span id="usernameMessage"> 
  6. </span></td></tr><tr><td>Password</td><td> 
  7. <input type="password" id="password"/></td><td><span id="passwordMessage" 
  8. ></span></td></tr></table></FORM>*/  
  9. };  
  10.  
  11. ApplicationUtilTest.prototype.testValidateLoginFormBothEmpty = function () {  
  12.     var applicationUtil = new appnamespace.ApplicationUtil();  
  13.       
  14.     /* Simulate empty user name and password */  
  15.     document.getElementById("username").value = "";  
  16.     document.getElementById("password").value = "";   
  17.       
  18.     applicationUtil.validateLoginForm();  
  19.       
  20.     assertEquals("Username is not validated correctly!", "This field is required",   
  21.     document.getElementById("usernameMessage").innerHTML);  
  22.     assertEquals("Password is not validated correctly!", "This field is required",   
  23.     document.getElementById("passwordMessage").innerHTML);    
  24. }; 

ApplicationUtilTest对象通过JsTestDriver TestCase对象创建。如果您熟悉JUnit框架，那么您肯定熟悉setUp和testXXX方法。setUp方法用于初始化测试用例。对于本例，我使用该方法来声明一个HTML片段，该片段将用于其他测试用例方法。

DOC注释是一个JsTestDriver惯用语，可以用于轻松声明一个HTML片段。

在testValidateLoginFormBothEmpty方法中，创建了一个ApplicationUtil对象，并在测试用例方法中使用该对象。然后，代码通过检索用户名和密码的DOM元素并将它们的值设置为空值来模拟输入空用户名和密码。可以调用validateLoginForm方法来执行实际表单验证。最后，将调用assertEquals来确保usernameMessage 和passwordMessage span元素中的消息是正确的，即：This field is required。

在JsTestDriver中，可以使用以下构件：

  • fail ("msg")：表明测试一定会失败，消息参数将显示为一条错误消息。
  • assertTrue ("msg"， actual)：断定实际参数正确。否则，消息参数将显示为一条错误消息。
  • assertFalse ("msg"， actual)：断定实际参数错误。否则，消息参数将显示为一条错误消息。
  • assertSame ("msg"， expected, actual)：断定实际参数与预期参数相同。否则，消息参数将显示为一条错误消息。
  • assertNotSame ("msg"， expected, actual)：断定实际参数与预期参数不相同。否则，消息参数将显示为一条错误消息。
  • assertNull ("msg"， actual)：断定参数为空。否则，消息参数将显示为一条错误消息。
  • assertNotNull ("msg"， actual)：断定实际参数不为空。否则，消息参数将显示为一条错误消息。

其他方法的代码包含其他测试用例。清单 4 显示了测试用例对象的完整代码。

清单 4. ApplicationUtil 对象完整代码

  1. ApplicationUtilTest = TestCase("ApplicationUtilTest");  
  2.  
  3. ApplicationUtilTest.prototype.setUp = function () {  
  4. /*:DOC += <FORM action=""><table><tr><td>Username</td><td> 
  5. <input type="text" id="username"/></td><td><span id="usernameMessage"> 
  6. </span></td></tr><tr><td>Password</td><td> 
  7. <input type="password" id="password"/></td><td><span id="passwordMessage" 
  8. ></span></td></tr></table></FORM>*/  
  9. };  
  10.  
  11. ApplicationUtilTest.prototype.testValidateLoginFormBothEmpty = function () {  
  12.     var applicationUtil = new appnamespace.ApplicationUtil();  
  13.       
  14.     /* Simulate empty user name and password */  
  15.     document.getElementById("username").value = "";  
  16.     document.getElementById("password").value = "";   
  17.       
  18.     applicationUtil.validateLoginForm();  
  19.       
  20.     assertEquals("Username is not validated correctly!", "This field is required",   
  21.     document.getElementById("usernameMessage").innerHTML);  
  22.     assertEquals("Password is not validated correctly!", "This field is required",   
  23.     document.getElementById("passwordMessage").innerHTML);    
  24. };  
  25.  
  26. ApplicationUtilTest.prototype.testValidateLoginFormWithEmptyUserName = function () {  
  27.     var applicationUtil = new appnamespace.ApplicationUtil();  
  28.       
  29.     /* Simulate empty user name and password */  
  30.     document.getElementById("username").value = "";  
  31.     document.getElementById("password").value = "anyPassword";    
  32.       
  33.     applicationUtil.validateLoginForm();  
  34.       
  35.     assertEquals("Username is not validated correctly!",   
  36.     "This field is required", document.getElementById("usernameMessage").innerHTML);  
  37.     assertEquals("Password is not validated correctly!",   
  38.     "", document.getElementById("passwordMessage").innerHTML);    
  39. };  
  40.  
  41. ApplicationUtilTest.prototype.testValidateLoginFormWithEmptyPassword = function () {  
  42.     var applicationUtil = new appnamespace.ApplicationUtil();  
  43.       
  44.     document.getElementById("username").value = "anyUserName";  
  45.     document.getElementById("password").value = "";   
  46.       
  47.     applicationUtil.validateLoginForm();  
  48.       
  49.     assertEquals("Username is not validated correctly!",   
  50.     "", document.getElementById("usernameMessage").innerHTML);  
  51.     assertEquals("Password is not validated correctly!",   
  52.     "This field is required", document.getElementById("passwordMessage").  
  53.     innerHTML);   
  54. }; 

配置用于测试的不同浏览器

测试JavaScript代码的一个推荐实践是将JavaScript源代码和测试代码放置在不同的文件夹中。对于图 2中的示例，我将JavaScript源文件夹命名为“js-src”，将JavaScript测试文件夹命名为“js-test”，它们都位于“js”父文件夹下。

图 2. JavaScript测试文件夹结构

JavaScript 测试文件夹结构

组织好源和测试文件夹后，必须提供配置文件。默认情况下，JsTestDriver运行程序会寻找名为jsTestDriver.conf的配置文件。您可以从命令行更改配置文件名称。清单 5显示了JsTestDriver配置文件的内容。

清单 5.JsTestDriver配置文件内容

  1. server: http://localhost:9876  
  2.  
  3. load:  
  4.   - js-src/*.js  
  5.   - js-test/*.js 

配置文件采用YAML格式。server指令指定测试服务器的地址，load指令指出了将哪些JavaScript文件加载到浏览器中以及加载它们的顺序。

现在，我们将在IE、Firefox和Safari浏览器上运行测试用例类。

要运行测试用例类，需要启动服务器。您可以使用以下命令行启动JsTestDriver服务器：

  1. java -jar JsTestDriver-1.3.2.jar --port 9876 --browser "[Firefox Path]",  
  2.           "[IE Path]","[Safari Path]" 

使用这个命令行，服务器将以Port 9876启动，捕获您的机器上的Firefox、IE和Safari浏览器。

启动并捕获浏览器后，可以通过以下命令行运行测试用例类：

  1. java -jar JsTestDriver-1.3.2.jar --tests all 

运行命令后，您将看到第一轮结果，如清单 6 所示。

清单 6.第一轮结果

  1. Total 9 tests (Passed: 6; Fails: 3; Errors: 0) (16.00 ms)  
  2.   Firefox 3.6.18 Windows: Run 3 tests (Passed: 0; Fails: 3; Errors 0) (8.00 ms)  
  3.     ApplicationUtilTest.testValidateLoginFormBothEmpty failed (3.00 ms):   
  4.     AssertError: Username is not validated correctly! expected "This field   
  5.     is required" but was "" Error("Username is not validated correctly!   
  6.     expected \"This field is required\" but was \"\"")@:0()@http://localhost  
  7.     :9876/test/js-test/TestApplicationUtil.js:16  
  8.  
  9.     ApplicationUtilTest.testValidateLoginFormWithEmptyUserName failed (3.00 ms):   
  10.     AssertError: Username is not validated correctly! expected "This field is   
  11.     required" but was "" Error("Username is not validated correctly! expected   
  12.     \"This field is required\" but was \"\"")@:0()@http://localhost:9876/test  
  13.     /js-test/TestApplicationUtil.js:29  
  14.  
  15.     ApplicationUtilTest.testValidateLoginFormWithEmptyPassword failed (2.00 ms):   
  16.     AssertError: Password is not validated correctly! expected "This field is   
  17.     required" but was "" Error("Password is not validated correctly! expected   
  18.     \"This field is required\" but was \"\"")@:0()@http://localhost:9876/test/  
  19.     js-test/TestApplicationUtil.js:42  
  20.       
  21.   Safari 534.50 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (2.00 ms)  
  22.   Microsoft Internet Explorer 8.0 Windows: Run 3 tests (Passed: 3; Fails: 0;   
  23.   Errors 0) (16.00 ms)  
  24. Tests failed: Tests failed. See log for details. 

注意，在清单 6 中，主要问题出在 Firefox 上。测试在 Internet Explorer 和 Safari 上均可顺利运行。

修复JavaScript代码并重新运行测试用例

我们来修复损坏的JavaScript代码。我们将使用innerHTML替代innerText。清单 7显示了修复后的ApplicationUtil对象代码。

清单 7.修复后的ApplicationUtil对象代码

  1. appnamespace = {};  
  2.  
  3. appnamespace.ApplicationUtil = function() {};  
  4.  
  5. appnamespace.ApplicationUtil.prototype.validateLoginForm =  function(){  
  6.     var error = true;  
  7.     document.getElementById("usernameMessage").innerHTML = "";  
  8.     document.getElementById("passwordMessage").innerHTML = "";    
  9.  
  10.     if (!document.getElementById("username").value) {  
  11.         document.getElementById("usernameMessage").innerHTML =   
  12.         "This field is required";  
  13.         error = false;  
  14.     }  
  15.       
  16.     if (!document.getElementById("password").value) {  
  17.         document.getElementById("passwordMessage").innerHTML =   
  18.         "This field is required";  
  19.         error = false;  
  20.     }         
  21.  
  22.     return error;         
  23. }; 

使用 --test all 命令行参数重新运行测试用例对象。清单 8 显示了第二轮运行结果。

清单 8.第二轮运行结果

  1. Total 9 tests (Passed: 9; Fails: 0; Errors: 0) (9.00 ms)  
  2.   Firefox 3.6.18 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (9.00 ms)  
  3.   Safari 534.50 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)  
  4.   Microsoft Internet Explorer 8.0 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0)   
  5.   (0.00 ms) 

如清单 8所示，JavaScript代码现在在IE、Firefox和Safari上都能正常运行。


在线生成数据统计图表 在线生成数据统计图表
原创粉丝点击
热门IT博客
曲面显示器优缺点知乎曲面显示器优缺点知乎
成都青年旅舍 知乎成都青年旅舍 知乎
microsoft网络是什么
小t娱乐网源码
友价房产源码
origin点显示数据
爱是软肋也是铠甲知乎
数据恢复实验室
淘宝网双十一怎么报名
华娱无线java游戏大全
白人至上主义 知乎
手机淘宝申请信用卡
仓位在线软件
网络机柜扎线
java软件下载平台
papi 酱变声软件
vscode 插件开发语言
快消品行业数据分析
陕师大网络教育官网
yii2源码
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 如何挂沙袋 沙袋挂哪 沙袋架 自制沙袋架 立式沙袋架 杀西米 大西米煮法 角沙鲨烯鱼油软胶囊 沙谷米 沙影贝利特 古贝沙连衣裙 砂轮机型号 电动螺丝刀价格 电动螺丝刀品牌排行 博世螺丝刀 博士电动螺丝刀 电动螺丝刀什么牌子好 电动砂轮机 手摇砂轮机 砂轮机厂家 立式砂轮机 小型砂轮机 落地式砂轮机 手动砂轮机 阿联酋沙迦 沙迪克 松下沙荣子中文字幕 松下沙荣子在线播放 松下沙荣子在线 筛沙筛子 竹内沙里 竹内沙里奈 亨利沙里埃 沙里宾 沙里趴鱼 沙里趴 沙里瓦 沙里瓦沙里瓦是什么歌 竹内沙里纳奈 竹内沙里在线播放 像鱼在沙里游

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里