Unit test for window.location.href within an AJAX request using mocha/chai

Question

I need to test whether or not window.location.href = data.redirect_path ever happens. How would I mock this in Sinon without it redirecting me away from my test runner? I'm using chai/mocha.js with teaspoon as my test runner.

$.ajax({
    type: 'PUT',
    url: $url,
    dataType: 'json',
    data: { user: $userData },
    success: function(data) {
      if (data.success == true) {
        window.location.href = data.redirect_path
      } else {
        $errorsContainer.html(data.html);
        $codeInput.select();
        if (typeof data.redirect_path !== 'undefined') {
          window.location.href = data.redirect_path
        }              
      }
    }
  });

score 1 · Answer 1 · answered Feb 03 '18 at 23:16

I have been pulling my hair out for the last 2-3 hours over a similar issue. Unfortunately, navigating away by using the window.location = href was a very important behaviour in my plugin so I couldn't just take it on faith. Above using window.location.assign(href) did not work for me - maybe due to jsdom, not sure.

Finally I've came up with a (fairly) simple solution that works in my case.

it('reloads the page when using the browsers back button', (done) => {
    let stub = sinon.stub(window, 'location').set(() => { done() });

    // do whatever you need to here to trigger
    // window.location = href in your application
});

I know that it operates on the long timeout, so when it fails you've got to wait for it but that's a much better trade-off for me than having no tests proving my plugin behaves as expected.

NOTE jsdom does not have a setter for window.location originally but sinon lets you create one.

score 0 · Answer 2 · answered Jan 09 '17 at 07:32

You can stub on the $ for ajax as shown below. This needs some refactoring on your code so that it is easily testable.

Your success callback needs to be like this,

success: function(data) {
      if (data.success == true) {
        window.location.assign(data.redirect_path)
      } else {
        $errorsContainer.html(data.html);
        $codeInput.select();
        if (typeof data.redirect_path !== 'undefined') {
          window.location.assign(data.redirect_path);
        }              
      }
    }

Refer the doc how location.assign is working.

it("should fake successful ajax request", function () {
    sinon.stub($, "ajax").yieldsTo("success", {redirect_path: '/home', success: true});
    sinon.stub(window.location, 'assign'); // stubbing the assign. so that it wont redirect to the given url.

    //here you call the function which invokes $.ajax();
     someFunction();

    // assert here 

     // manually restoring the stubs.
     $.ajax.restore();
     window.location.assign.restore();
})

Unit test for window.location.href within an AJAX request using mocha/chai

2 Answers2