kadamwhite/twentyfourteen-enhanced-image-nav — pull request #3 by kadamwhite (2013-11-30 07:23:45+00:00)
Title: Load images via AJAX on keyboard navigation

We're used to left/right keyboard navigation being a seamless experience—it's a bit of a disconnect when it triggers a full page re-load, even if we do anchor to the relevant part of the content. In this PR, we enhance our image navigation plugin to fetch the requested image using a jQuery `.load` request then inject the retrieved content into the existing page.

In order to do this, we create a new test module that defines a "mock" server in its `setup` method:

```javascript
module( 'Async content loading', {
setup: function() {
// Mock out a server backend to test the async content loading
this.xhr = sinon.useFakeXMLHttpRequest();
var requests = this.requests = [];

// Every time a fake XMLHttpRequest is created, add it to requests
this.xhr.onCreate = function( xhr ) {
requests.push( xhr );
};
}
});
```

With this in place, we can flush any pending server requests with full control over how and what the response should be:

```javascript
TwentyFourteen.navigate( 'some/url/' );
this.requests[0].respond( 200, {
'Content-Type': 'text/html'
}, '

Subtitle

' );
```

Using Sinon.js mocks for AJAX interactions gives us a powerful toolkit for testing complex client/server applications.