高效 JavaScript 单元测试.docxVIP

高效 JavaScript 单元测试一个损坏的 JavaScript 代码示例　　Web 应用程序面临的一个最大挑战是支持不同版本的 Web 浏览器。能在 Safari 上运行的 JavaScript 代码不一定能在 Windows? Internet Explorer (IE)、Firefox 或 Google Chrome 上运行。这个挑战的根源是呈现层中的 JavaScript 代码从一开始就没有进行测试。如果没有对代码进行单元测试，那么在升级或支持新浏览器后，组织可能需要花钱反复测试 Web 应用程序。本文将展示如何通过高效的 JavaScript 代码单元测试降低测试成本。　　一个常见用例是登录表单 JavaScript 验证。考虑清单 1 中的表单。　　清单 1. 登录表单FORMtabletrtdUsername/tdtdinput type=text id=username//tdtdspan id=usernameMessage/span/td/trtrtdPassword/tdtdinput type=password id=password//tdtdspan id=passwordMessage/span/td/trtrtdinput type=button onclick=new appnamespace.ApplicationUtil().validateLoginForm() value=Submit//td/tr/table/FORM　　这个表单很简单，仅包含用户名和密码字段。单击提交按钮时，将通过?ApplicationUtil?执行一个特定的表单验证。以下是负责验证 HTML 表单的 JavaScript 对象。清单 2 显示了?ApplicationUtil?对象的代码。　　清单 2. 损坏的 ApplicationUtil 对象代码appnamespace = {};appnamespace.ApplicationUtil = function() {};appnamespace.ApplicationUtotype.validateLoginForm = function(){var error = true; document.getElementById (usernameMessage).innerText = ; document.getElementById (passwordMessage).innerText = ; if (!document.getElementById (username).value) { document.getElementById (usernameMessage).innerText = This field is required; error = false; }if (!document.getElementById (password).value) { document.getElementById (passwordMessage).innerText = This field is required; error = false; } return error; };　　在清单 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 架构　　捕获不同的浏览器之后，服务器会负责将 JavaScript 测试用例运行程序代码加载到浏览器中。可以通过命令行捕获浏览器，也可以通过将浏览器指向服务器 URL 来捕获浏览器。一旦捕获到浏览器，该浏览器就被称为从属浏览器。服务器可以加载 Java