测试 jQuery 代码的最先进方法是什么？答案

【问题标题】：What is the state-of-the-art approach to testing jQuery code?测试 jQuery 代码的最先进方法是什么？
【发布时间】：2015-06-25 13:48:51
【问题描述】：

我是 JavaScript 新手。想象一下，我有以下代码：

$(document).ready(function() {
  $('#nights').on('keyup', function() {
    var nights = +$(this).val();
    var dailyPrice = +$(this).closest(".tour").data("daily-price");
    $('#total').text(nights * dailyPrice);
    $('#nights-count').text($(this).val());
  });
});

如何对匿名函数进行单元测试

检索当前元素的值，
从+$(this).closest(".tour").data("daily-price") 中检索数据并
然后在$('#total') 和$('#nights-count') 上调用text(...)

请注意，我对 unit 测试很感兴趣（因此创建一个成熟的 Selenium 测试套件，它输入一些内容然后检查元素的值不适合我），这不需要我添加新的抽象层。

抽象层我的意思是：我可以创建类 JQueryAbstraction，然后创建 2 个子类 - 一个调用真正的 jQuery 方法，另一个只计算调用次数。

【问题讨论】：

标签： javascript jquery unit-testing

【解决方案1】：

您可以尝试引入 Jasmine、Mocha、QUnit 等流行的单元测试轻量级框架

所有这些框架都可以与AngularJS、JQuery....等共存

从您尝试使用匿名函数的示例中，您可以将该函数转换为非匿名函数并将其传递给测试工具

为了确保到达最后一行，我引入了一个简单的全局变量并为其赋值，比如 done = true 或 done = false

例子：

var done = false;
var onReady = function() {
  $('#nights').on('keyup', function() {
    var nights = +$(this).val();
    var dailyPrice = +$(this).closest(".tour").data("daily-price");
    $('#total').text(nights * dailyPrice);
    $('#nights-count').text($(this).val());
  });
  done = true;
}

$(document).ready(onReady);

所以现在您可以像在 Jasmine 中一样使用单元测试来测试您的 onReady 代码，您可以评论实际文档就绪

//$(document).ready(onReady);

并通过单元测试调用函数

describe("Document Ready Unit Testing", function() {
  it("call the function ", function() {
     done = false;
     onReady() ;
     expect(done).toEqual(true);//this will print the unit testing passed or failed
  });
});

但是：如果您对单独声明匿名函数不感兴趣，那么您可以遍历 document 对象并获取就绪事件函数。

【讨论】：