How to mock $window.location.replace in AngularJS unit test?

Question

I've got the following service:

angular.module("services")
.factory("whatever", function($window) {
  return {
    redirect: function() {
      $window.location.replace("http://www.whatever.com");
    }
  };
});

How to mock $window object in unit test to prevent reloading the page when running tests?

I tried using

spyOn($window.location, 'replace').andReturn(true);

, but it didn't work (still got "Some of your tests did a full page reload!" error) and

$provide.value('$window', {location: {replace: jasmine.createSpy()}})

, but I was getting an error (Error: [ng:areq] Argument 'fn' is not a function, got Object) with stack trace pointing only to angular own source, so it wasn't very helpful...

Cross

I have been facing the same issue. Did you figure out a solution? – Separator

The solution provided by PaulL to wrap $window.location in a separate service actually works just fine. Haven't tried LostInComputer's solution yet. – Cross

Answer 1

In Chrome (didn't test inother browsers), location.replace is readonly so spyOn wasn't able to replace it.

$provide.value should work. Something must be wrong somewhere in your code.

Here is a working unit test

describe('whatever', function() {
    var $window, whatever;

    beforeEach(module('services'));

    beforeEach(function() {
      $window = {location: { replace: jasmine.createSpy()} };

      module(function($provide) {
        $provide.value('$window', $window);
      });

      inject(function($injector) {
        whatever = $injector.get('whatever');
      });
    });

    it('replace redirects to http://www.whatever.com', function() {
      whatever.redirect();
      expect($window.location.replace).toHaveBeenCalledWith('http://www.whatever.com');
    });
});

Letter

Angular still injects the actual window object to the services – Separator

Here is a working code demonstrating the answer I posted. To run, 1. you must have NodeJS 2. call 'npm install' 3. call 'grunt test' to run the tests – Letter

My apologies! I found out that I had a bug in my test code. – Separator

I also had to provide a scrollTo spy, otherwise angularjs complained: $window = { location: { replace: jasmine.createSpy() }, scrollTo: jasmine.createSpy() } – Hixon

Is this dependent on a newerish version of jasmine? I'm trying to do this and still unable to, perhaps my old version is a problem? – Darrin

@wdanda My answer was posted 2 years ago so I doubt that having an old version is the reason. – Letter

What is the global module that you are using? Is it angular.module? angular.mock.module? – Catercornered

Answer 2

I'm going with an easier but perhaps less elegant solution. I'm writing a wrapper for $window.location, which I can then mock. Relating that to your code, I'd be mocking the whatever.redirect function, rather than mocking $window (I'm assuming here that your real function is more complex).

So I'd end up with:

angular.module("services")
.factory("whatever", function($window) {
  return {
    do_stuff_that_redirects: function() {
      lots of code;
      this.redirect("http://www.whatever.com");
      maybe_more_code_maybe_not;
    },

    redirect: function(url) {
      $window.location.replace(url);
    }
  };
});

I can then directly mock the redirect method, and just trust that since it's only one line of code it can't really go wrong.

spyOn(whatever, 'redirect').andCallFake(function(){});
expect(whatever.redirect).toHaveBeenCalledWith('http:/my.expected/url');

This is sufficient for my purposes, and lets me validate the url called.

Wicked

Answer 3

I'll offer another approach that might work for you. I faced the same problem while unit testing a controller 'action' that ultimately redirects the user (full-page-load, but to a different page in the larger website/application). To give some context, the controller fires off an AJAX request, and if the response is OK, it will redirect the user to a different page via $window.location.replace():

$http.post('save', data)
        .success(function(responseData, status, headers, config) {
            if(responseData.redirect) {
                $window.location.replace(responseData.redirect);
            }
        })
        .error(function(responseData, status, headers, config) {
             console.error("ERROR while trying to create the Event!!");
        });

The test for this controller function caused the same "Some of your tests did a full page reload!" error. So I added the following to the beforeEach() function for the controller spec, to mock out the $window service:

mockWindow = { location: { replace: function(url) { console.log('redirecting to: ' + url); } } };
eventCtrl = $controller('EventCtrl', { $scope: scope, $window: mockWindow });

Of course, this solution prevents me from (cleanly) verifying that the replace function was called with an expected argument, but I don't really care about that right now.... Hope that helps.

Sarchet

This would work for controllers, but would fail if you want to inject $window into a service. – Separator

Answer 4

I think what you want is to use the $location service, rather then calling $window.location. There is also a whole page explaining this feature here: http://docs.angularjs.org/guide/dev_guide.services.$location.

Using this, it should be fairly simple to use a stubbed version of the $location service in you tests.

Namnama

Thanks, but according to the docs: "When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href." and that's exactly what I want - to redirect to an external URL. – Cross

Ah, I see. I don't think, this is possible, but the only thing I can image how that will work then, is to stub out the window.location object with an own one. – Namnama

Answer 5

$location.path('/someNewPath');

$location.replace(); // or you can chain these as: $location.path('/someNewPath').replace();

Shira