mocking window.location.href in Javascript

javascript mocking jasmine
wmitchell picture wmitchell · Jan 25, 2011 · Viewed 91k times · Source

I have some unit tests for a function that makes use of the window.location.href -- not ideal I would far rather have passed this in but its not possible in the implementation. I'm just wondering if its possible to mock this value without actually causing my test runner page to actually go to the URL.

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

I'm using jasmine for my unit testing framework.

Answer

Kurt Harriger picture Kurt Harriger · Aug 13, 2011

The best way to do this is to create a helper function somewhere and then mock that:

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

Now instead of using window.location.href directly in your code simply use this instead. Then you can replace this method whenever you need to return a mocked value: 

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

If you want a specific part of the window location such as a query string parameter then create helper methods for that too and keep the parsing out of your main code. Some frameworks such as jasmine have test spies that can not only mock the function to return desired values, but can also verified it was called:

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

Related questions

How do I mock a service that returns promise in AngularJS Jasmine unit test?

I have myService that uses myOtherService, which makes a remote call, returning promise: angular.module('app.myService', ['app.myOtherService']) .factory('myService', [ myOtherService, function(myOtherService) { function makeRemoteCall() { return myOtherService.makeRemoteCallReturningPromise(); } return { makeRemoteCall: makeRemoteCall }; } ]) To make a unit test for myService I …

Read More
How to spyOn a value property (rather than a method) with Jasmine

Jasmine's spyOn is good to change a method's behavior, but is there any way to change a value property (rather than a method) for an object? the code could be like below: spyOn(myObj, 'valueA').andReturn(1); expect(myObj.valueA).toBe(1);

Read More
Injecting a mock into an AngularJS service

I have an AngularJS service written and I would like to unit test it. angular.module('myServiceProvider', ['fooServiceProvider', 'barServiceProvider']). factory('myService', function ($http, fooService, barService) { this.something = function() { // Do something with the injected services }; return this; }); My app.js file …

Read More