是否可以模拟window.location对象进行qUnit测试？

Question

假设我有一个实用函数，为了简单起见（真实的东西很复杂且无关紧要），返回当前窗口的查询字符串。

var someUtilityFunction = () {
    return window.location.search.substring(1);
};

现在我想在qUnit中对此函数进行单元测试（不确定测试工具是否相关）：

test('#1 someUtilityFunction works', function () {
    // setup
    var oldQS = window.location.search;
    window.location.search = '?key1=value1&key2=value2&key3=value3';

    var expectedOutput = 'key1=value1&key2=value2&key3=value3';

    // test
    equals(someUtilityFunction(),
        expectedOutput,
        'someUtilityFunction works as expected.');

    // teardown
    window.location.search = oldQS;
});

这里的问题是将window.location.search设置为不同的查询字符串会导致页面重新加载，实质上是进入无限请求循环。有没有办法模拟window.location对象没有对someUtilityFunction函数进行任何更改？

Answer 1

我们几天前遇到了同样的问题。主要有两种方法：

重写您的代码

这可能不是最好的（如果有的话）解决方案，但考虑将window对象传递给您的函数以使模拟更容易。更好的是，使用闭包并封装您的代码。这有一些优点：

• 您可以影响全局变量
• 您可以使用私人本地邮政
• 您可以避免命名冲突
• 阴影让嘲弄变得非常简单，只是传递其他东西

包裹您的代码

您可以将所有代码包装在将窗口对象模拟为局部变量的函数中。你基本上有两种可能性：

假设这是模拟：

var customWindow = {
    location: {
        search: "",
        hash: ""
    }
};

使用闭包

var someUtilityFunction;

(function(window) {
    // window is now shadowed by your local variable
    someUtilityFunction = () {
        return window.location.search.substring(1);
    };
})(customWindow);

这会使全局window影响到本地window。

使用with声明

虽然我经常强烈反对，但它可以解决很多问题。由于它基本上重新映射了您的范围，因此您可以非常轻松地模拟您的环境。

// first some more preparation for our mock
customWindow.window = customWindow;

with(customWindow) {

    // this still creates the var in the global scope
    var someUtilityFunction = () {
        // window is a property of customWindow
        return window.location.search.substring(1);
    };

    // since customWindow is our scope now
    // this will work also
    someUtilityFunction = () {
        // location is a property of customWindow too
        return location.search.substring(1);
    };

}

顺便说一句：我不知道search属性是否有与hash属性相同的症状 - 即有时包括问号，有时不包括。但您可能需要考虑使用

window.location.search.replace(/^\?/, "");

而不是

window.location.substr(1);

Answer 2

我使用window.history.pushState取得了一些成功。见this StackOverflow answer。对于每个单元测试，我调用一个函数setQueryString('var=something')然后我实现如下：

function setQueryString(queryString) {
  window.history.pushState({}, '', '?' + queryString);
}

您需要使用QUnit.module的afterEach方法清除查询字符串，否则您将查询字符串设置为最终测试的值，您将获得奇怪的结果。