Question

我想使用qunit为以下函数成功模拟window.location.reload对象：

function Test() {
    $.ajax({
        type: 'POST',
        url: /Test/TestMethod,
        data: 1,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8;',
        success: function (response) {
            if (response.Successful)
                window.location.reload();
        },
        error: function (response) {
        }
    });
}

任何人都可以帮我嘲笑这种代码的和平。提前谢谢。

Answer 1

由于它是JavaScript，您可以覆盖所有功能和对象。为了简化操作，我将向您的函数传递要使用的window对象。这样你就可以注入一个模拟的窗口用于你的测试。如果您在生产中使用代码，则可以传递真实的window对象，也可以只调用不带第二个参数的函数。当您省略参数时，行var currentWindow = currentWindow || window;可确保使用全局窗口。对于回调也是如此，如果你没有指定它，它就会被一个空函数替换。

因为您要测试异步调用，所以应该使用QUnit的asyncTest()。这使您能够在AJAX调用返回时运行测试代码。您所要做的就是在代码中添加一个回调参数。对于您的测试，您只需传递一个带有测试代码和模拟窗口的回调方法。通过定义预期断言的数量（expect(2)），可以确保检查两个断言，即如果代码没有运行success方法，则会出现错误，模拟的reload()方法是没有执行。

测试功能：

function ajaxCall(callback, currentWindow) {
    var callback = callback || function() {};
    var currentWindow = currentWindow || window;
    $.ajax({
        type: 'GET',
        url: '/',
        data: 1,
        dataType: 'html',
        success: function (response, statusCode) {
            if (statusCode === "success") {
                currentWindow.location.reload();
            }
            callback(statusCode);
        },
        error: function (response, statusCode) {
            callback(statusCode);
        }
    });
}

window模拟：

module("AjaxTests", {
  setup: function() {
      this.mockWindow = {
          location: {
              reload: function() {
                  ok(true, "This mock function should be called");
              }
          }
      };
  }
});

测试：

asyncTest("ajaxCall with mock window", function () {
    expect(2);
    var testCallback = function(statusCode) {
        ok(statusCode === "success", "Response should be successful");
        start();
    }
    ajaxCall(testCallback, this.mockWindow);
});

您可以看到this code on jsFiddle（这就是为什么我必须稍微调整您的代码）。

使用Qunit模拟window.location.reload

1 个答案: