Skip to content

Instantly share code, notes, and snippets.

@jonnyreeves
Last active July 2, 2020 21:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jonnyreeves/d8ebad4aaaa7d9c7ae15 to your computer and use it in GitHub Desktop.
Save jonnyreeves/d8ebad4aaaa7d9c7ae15 to your computer and use it in GitHub Desktop.
Stubbing XHRs in QUnit with SinonJS Fake Server
QUnit.module("my-module",
{
setup: function () {
// Configure Sinon's FakeServer instance. `autoRespond` ensures that any incoming requests
// will automatically be replied to, otherwise you *must* invoke `this.server.respond` to
// start processing.
this.server = sinon.fakeServer.create();
this.server.autoRespond = true;
// Tells the FakeServer's XHR request factory that we don't want to respond to every
// request (ie: some requests should be allowed to pass through unmodified)
this.server.xhr.useFilters = true;
var requestUrisOrRegexes = this.requestUrisOrRegexes = [];
// Add an XHR filter which looks at for any matching URIs which were added using `this.stubXhrRequest`.
this.server.xhr.addFilter(function (method, uri) {
var matched = false;
// Deal with the fact `this.stubRequest` accepts both a string and a regex.
function isMatch (matcher) {
return (typeof matcher === "string") ? matcher === uri : matcher.exec(uri) !== null;
}
// Check all matchers to see if one matches the incoming URI.
for (var i = 0; i < requestUrisOrRegexes.length; i++) {
matched = isMatch(requestUrisOrRegexes[i]);
if (matched) break;
}
// Sinon FakeXHR filters need to return `false` if the request should be stubbed and
// `true` if it should be allowed to pass through.
return !matched;
});
},
teardown: function () {
this.server.restore();
},
// Return a pre-canned response object for a given URI.
stubXhrRequest: function (uriOrRegex, responseObject) {
// Store the uriOrRegex value so the FakeXHR filter can indicate this request
// should be faked.
this.requestUrisOrRegexes.push(uriOrRegex);
var responseCode = 200;
var responseHeaders = { "Content-Type": "application/json" };
var responseBody = JSON.stringify(responseObject);
this.server.respondWith(uriOrRegex,
[ responseCode, responseHeaders, responseBody ]
);
}
});
QUnit.asyncTest("When a request to `/foo/bar` is made, the `id` should be extracted from the response", function (assert) {
var expectedId = 303;
// First arg is a regex or a string which will be used to determine if the supplied response
// should be served. Second argument is an Object which will be marshalled into JSON by the
// `stubXhrRequest` method.
this.stubXhrRequest(/^\/foo\/bar/, { id: expectedId, body: "hello world!" });
// Kick off our example integration test.
myModule.getId("/foo/bar", function (id) {
// Example assertion assuming `myModule.getId` will invoke this callback when the XHR compeltes.
assert.equal(id, expectedId, "id was extracted from the response object");
// Complete this async test.
QUnit.start();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment