编写“unit testable”;jQuery代码

Writing "unit testable" jQuery code?

本文关键字：jQuery 代码 testable unit 编写      更新时间：2023-09-26

到目前为止，我习惯在ready()函数中编写所有代码，如:

$(document).ready(function() {
  // all my code
});

现在我看到，使用这种方法，我的代码不是"单元可测试的"，例如我不能从QUnit访问ready()里面的东西。

什么是正确的方式来构建jQuery代码兼容使用ready()函数，并能够被测试?

是否有一个好的开源代码库或项目来研究和学习?

让你的代码在ready处理程序中只调用ready处理程序之外的函数:

$(document).ready(function() {
  // call some functions outside of handler
});
// most of my code

这样，你也可以调用这些函数进行单元测试。

注意，$(document).ready有一个捷径:

$(function() {
  // call some functions outside of handler
});
// most of my code

我看到两种方法。

  1. 将QUnit代码放入文档中，以便在您自己的代码之后运行。

  2. 把你的代码放到一个模块中

选项#2看起来像这样:

var MyModule = (function() {
    // Your code
}());
$(document).ready(function() {
    // Quit tests, referring to MyModule.xxx
});

在选项#2中，你不能访问模块中的私有元素。

Ben Cherry不久前在http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript上谈到了这个问题，他实际上对基于闭包的隐私做了一个有争议的评论，因为它对单元测试有影响。

最有效的方法之一是使用JS的"命名空间"来构建你的代码，实际上你可以从jQuery核心中得到一个很好的例子。

对于不可测试的jQuery脚本，我采用了这样一种奇怪的方法:

  • 安装业力
  • 包含所有不能在karma include文件中进行单元测试的脚本
    • 例如，在核心脚本中引入的语法错误将无法通过karma测试，即使它没有经过单元测试
  • 另外，如果脚本确实创建了任何全局变量，请在karma
    • 中测试这些全局变量的存在
  • 最终重构脚本，使其具有更多可调用单元，并在karma
    • 中运行测试

所以从运行浏览器开始，至少要检查一下完整性!

相关文章：