Question

我对一个使用window.location.href的函数进行了一些单元测试 - 不太理想我宁愿通过它，但它在实现中是不可能的。我只是想知道是否可以模拟这个值而不会实际导致我的测试运行器页面实际转到URL。

  window.location.href = "http://www.website.com?varName=foo";    
  expect(actions.paramToVar(test_Data)).toEqual("bar");

我正在使用jasmine作为我的单元测试框架。

Answer 1

执行此操作的最佳方法是在某处创建辅助函数，然后模拟：

 var mynamespace = mynamespace || {};
    mynamespace.util = (function() {
      function getWindowLocationHRef() {
          return window.location.href;
      }
      return { 
        getWindowLocationHRef: getWindowLocationHRef
      }
    })();

现在，不要直接在代码中使用window.location.href，而只需使用它。然后，只要需要返回模拟值，就可以替换此方法：

mynamespace.util.getWindowLocationHRef = function() {
  return "http://mockhost/mockingpath" 
};

如果您想要窗口位置的特定部分（例如查询字符串参数），那么也要为其创建辅助方法，并保持解析不受主代码的影响。一些框架如茉莉有测试间谍，不仅可以模拟函数返回所需的值，还可以验证它被称为：

spyOn(mynamespace.util, 'getQueryStringParameterByName').andReturn("desc");
//...
expect(mynamespace.util.getQueryStringParameterByName).toHaveBeenCalledWith("sort");

Answer 2

我会提出两个解决方案，这些解决方案已经在之前的帖子中暗示过：

围绕访问创建一个函数，在生产代码中使用它，并在测试中使用Jasmine将其存根：

var actions = {
    getCurrentURL: function () {
        return window.location.href;
    },
    paramToVar: function (testData) {
        ...
        var url = getCurrentURL();
        ...
    }
};
// Test
var urlSpy = spyOn(actions, "getCurrentURL").andReturn("http://my/fake?param");
expect(actions.paramToVar(test_Data)).toEqual("bar");

使用dependency injection并在测试中注入假货：

var _actions = function (window) {
    return {
        paramToVar: function (testData) {
            ...
            var url = window.location.href;
            ...
        }
    };
};
var actions = _actions(window);
// Test
var fakeWindow = {
   location: { href: "http://my/fake?param" }
};
var fakeActions = _actions(fakeWindow);
expect(fakeActions.paramToVar(test_Data)).toEqual("bar");

Answer 3

您需要模拟本地环境并创建自己的window和window.location个对象版本

var localContext = {
    "window":{
        location:{
            href: "http://www.website.com?varName=foo"
        }
    }
}

// simulated context
with(localContext){
    console.log(window.location.href);
    // http://www.website.com?varName=foo
}

//actual context
console.log(window.location.href);
// http://www.actual.page.url/...

如果您使用with，则首先从上下文对象中查找所有变量（包括window！），如果不存在则从实际上下文中查找。

Answer 4

有时您可能有一个修改window.location的库，并且您希望允许它正常运行但也要进行测试。如果是这种情况，您可以使用闭包将所需的引用传递给您的库。

/* in mylib.js */
(function(view){
    view.location.href = "foo";
}(self || window));

然后在测试中，在包含您的库之前，您可以全局重新定义self，并且库将使用mock self作为视图。

var self = {
   location: { href: location.href }
};

在您的图书馆中，您也可以执行以下操作，因此您可以在测试中的任何时候重新定义自己：

/* in mylib.js */
var mylib = (function(href) {
    function go ( href ) {
       var view = self || window;
       view.location.href = href;
    }
    return {go: go}
}());

在大多数（如果不是全部）现代浏览器中，默认情况下，self已经是对窗口的引用。在实现Worker API的平台中，Worker self是对全局范围的引用。在node.js中，self和window都没有定义，所以如果你想要你也可以这样做：

self || window || global

如果node.js确实实现了Worker API，那么这可能会改变。

Answer 5

下面是我采用的方法来模拟window.location.href和/或可能在全局对象上的任何其他内容。

首先，不是直接访问它，而是将其封装在使用getter和setter保存对象的模块中。以下是我的例子。我正在使用require，但这里没有必要。

define(["exports"], function(exports){

  var win = window;

  exports.getWindow = function(){
    return win;
  };

  exports.setWindow = function(x){
    win = x;
  }

});

现在，您通常在代码中完成window.location.href之类的操作，现在您可以执行以下操作：

var window = global_window.getWindow();
var hrefString = window.location.href;

最后，设置完成后，您可以通过将窗口对象替换为您想要的伪对象来测试代码。

fakeWindow = {
  location: {
    href: "http://google.com?x=y"
  }
}
w = require("helpers/global_window");
w.setWindow(fakeWindow);

这将更改窗口模块中的win变量。它最初设置为全局window对象，但它没有设置为您放入的伪窗口对象。所以现在在您更换它之后，代码将获取您的假窗口对象及其放置的假的href它。

Answer 6

这对我有用：

delete window.location;
window.location = Object.create(window);
window.location.href = 'my-url';

Answer 7

IMO，这个解决方案是对cburgmer的一个小改进，因为它允许你用源代码中的$ window.location.href替换window.location.href。虽然我使用的是Karma而不是Jasmine，但我相信这种方法可以同时使用。而且我已经加入了对sinon的依赖。

首先是服务/单身：

function setHref(theHref) {
    window.location.href = theHref;
}
function getHref(theHref) {
    return window.location.href;
}

var $$window = {
        location: {
            setHref: setHref,
            getHref: getHref,
            get href() {
                return this.getHref();
            },
            set href(v) {
                this.setHref(v);
            }
        }
    };
function windowInjectable() {  return $$window; }

现在我可以通过将windowInjectable（）注入$ window来在代码中设置location.href：

function($window) {
  $window.location.href = "http://www.website.com?varName=foo";
}

并在单元测试中嘲笑它看起来像：

sinon.stub($window.location, 'setHref');  // this prevents the true window.location.href from being hit.
expect($window.location.setHref.args[0][0]).to.contain('varName=foo');
$window.location.setHref.restore();

getter / setter语法可以追溯到IE 9，并且根据https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

获得广泛支持

Answer 8

这是我的通用解决方案，需要在生产代码中额外导入，但不需要依赖注入或编写单独的包装函数，如 getHref()。

基本上，我们将窗口扔到一个单独的文件中，然后我们的 prod 代码从该文件中间接导入窗口。

在生产中，windowProxy === window。在测试中，我们可以改变导出 windowProxy 的模块并使用新的临时值模拟它。

// windowProxy.js

/*
 * This file exists solely as proxied reference to the window object
 * so you can mock the window object during unit tests.
 */
export default window;

// prod/someCode.js
import windowProxy from 'path/to/windowProxy.js';

export function changeUrl() {
  windowProxy.location.href = 'https://coolsite.com';
}

// tests/someCode.spec.js
import { changeUrl } from '../prod/someCode.js';
import * as windowProxy from '../prod/path/to/windowProxy.js';

describe('changeUrl', () => {
  let mockWindow;
  beforeEach(() => {
    mockWindow = {};
    windowProxy.default = myMockWindow;
  });

  afterEach(() => {
    windowProxy.default = window;
  });

  it('changes the url', () => {
    changeUrl();
    expect(mockWindow.location.href).toEqual('https://coolsite.com');
  });
});

Answer 9

您需要在同一页面上伪造window.location.href。就我而言，这段剪辑完美无缺：

$window.history.push(null, null, 'http://server/#/YOUR_ROUTE');
$location.$$absUrl = $window.location.href;
$location.replace();

// now, $location.path() will return YOUR_ROUTE even if there's no such route

在Javascript中模拟window.location.href

9 个答案: