How to unit test page navigation?

Question

Use case is this: I want to unit test (in browser, QUnit or something of the kind) a code run in a page. One of the things a page can do is to navigate away to another page. I have problem catching this event, because:

• beforeunload cannot stop the action (so the first navigation-away breaks my test)
• trying to redefine window.location or window.location.href with getter returning old value and spying setter is prohibited, too

I understand there are security reasons that disallow possibility to stop navigating away, but for development it is really useful to be able to do so.

Is there any possibility to do this (I have no direct control over test runner, so I can't just load the code in the iframe and let it navigate and then examine location of the iframe)?

EDIT: To be a little more specific: I want to test, whether, based on the logged/connected status from facebook (I use facebook-stub from github to mock fb), there is the right handler is installed on the login button (say, $('#login-btn')), which by clicking navigates the page to facebook oauth dialog, server-flow (the details here are not important).

So I would like to be able to do this kind of thing:

// set up fb mock to not be connected
fbAsyncInit(); // simulate the startup of app
$('#login-btn').click();
equal(document.location.href, "http://www.facebook.com/oauth/...", "OAuth dialog not started.");

but if course, without actual navigation. How to do the test?

Answer 1

What you are doing is really not unit testing, more like acceptance testing.

You should probably look into selenium web driver which can easily test stuff like page navigation.

Answer 2

I'm seeing now that you can't spy on a setter (which is what I'm recommending below). I've already written up the solution, so I think I'll post it in case someone without that restriction should visit this page...

Define a publicly-accessible function to navigate, for instance:

MyNameSpace.navigate = function( url ) {
    window.location.href = url;
};

Now, in your tests, you can stub out the call to MyNameSpace.navigate() and ensure it is invoked properly. Here's an example (not sure what testing framework you're using, so let me know if the implementation is unclear).

Set up and tear down:

setUp( function() {
    this._navigate = MyNameSpace.navigate;
    MyNameSpace.navigate = function( url ) {
        this.calledWith = url;
    };
});
tearDown( function() {
    MyNameSpace.navigate = this._navigate;
});

And your test, re-implemented:

test( function() {
    // set up fb mock to not be connected
    fbAsyncInit(); // simulate the startup of app
    $('#login-btn').click();
    equal(MyNameSpace.navigate.calledWith, "http://www.facebook.com/oauth/...", "OAuth dialog not started.");
});

Your idea to query window.location.href would not only test your application code, but the browser itself (i.e. does the browser redirect properly when my application sets window.location.href). A dedicated navigate method allows you to test that your application internals are operating as expected and simultaneously prevent the browser from responding.

Answer 3

You could check this How far can you go with JavaScript testing? question.

Selenium is indeed good and well-known, but I personally find it quite old and not so usable. I'd advise using Ghostbuster (see introduction), a headless Webkit running tests written in Javascript or Coffeescript.

Your given test-case would be written as follows:

phantom.test.root = "http://localhost/"     # or whatever your testing env's root

phantom.test.add "Facebook login", ->       # this adds a test
  @get '/yourLoginPage', ->                 # relative to the previous root
    @body.click '#login-btn'
    @assertLocation "http://www.facebook.com/oauth/..."
    @succeed()                              # all tests must succeed

:)