任何使用qunit测试异步jquery插件的方法,避免嵌入"start()"并保持异步

Any way to test asynchronous jquery plugin with qunit that avoids embedded "start()" and keeps it asynchronous?

本文关键字:异步 quot start jquery 测试 qunit 插件 方法 任何使      更新时间:2023-09-26

我正在编写我的第一个jquery插件。它严重依赖于对服务器的ajax调用。通常,插件中的ajax调用将按照标准异步运行。

我用qunit进行测试。我的第一次尝试以经典的方式失败了:

test ('check asynchronous call', function ()
{
    stop();
    $.my_plugin('do asynchronous call');
    start();
    equal('expected val', var_set_after_async_call_finishes, 
      'async var set as expected?');
})

也就是说,"equal"在异步调用结束之前运行。

似乎我可以用两种方式修改插件代码:

  1. 直接在插件中嵌入"start()"(但这会使它与不应该在生产环境中运行的代码混淆)
  2. 给my_plugin添加一个可选参数,强制使用$。

我采用了第二种方法,向my_plugin添加一个可选参数,当该参数设置为false时,将同步运行ajax函数。然后我将测试修改为:

test ('check asynchronous call', function ()
{
    async = false;
    $.my_plugin('do asynchronous call', async);
    equal('expected val', var_set_after_async_call_finishes, 
      'async var set as expected?');
})

这工作。

但是有没有一种方法可以可靠地测试插件而不以任何方式修改其代码?

您可以做类似mock $。Ajax,以便它返回您想要的数据并同步运行。然后,您可以为来自服务器的不同返回编写不同的用例。

 (function ($) {
    var originalAjax;
    var mockData = { whatever: "server returns" };
    module("Testing plugin with mock ajax", {
        setup: function () {
            var mockAjax = function (options) {
                start();
                options.success(mockData);
            };
            originalAjax = $.ajax;
            $.ajax = mockAjax;
        },
        teardown: function () {
            $.ajax = originalAjax;
        }
    });
    test("Your test", function () {
        stop();
        $.my_plugin('do asynchronous call');
        ok(true, "your assertion, whatever your plugin changes or returns");
    });
})(jQuery);