<!DOCTYPE html>
<html>
<head>
<link data-require="jasmine@2.0.0" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
<script data-require="jasmine@2.0.0" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
<script data-require="jasmine@2.0.0" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
<script data-require="jasmine@2.0.0" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
<script src="mock-ajax.js"></script>
<script src="attendee.js"></script>
<script src="checkInRecorder.js"></script>
<!-- These *_01.js files demonstrate a naive unit test and an
equally naive subject . -->
<script src="checkInService_01.js"></script>
<script src="checkInService_01_tests.js"></script>
<!-- These corrected versions show a unit test that uses the done()
mechanism and a subject that correctly returns a Promise. -->
<!--
<script src="checkInService_02.js"></script>
<script src="checkInService_02_tests.js"></script>
-->
</head>
<body>
</body>
</html>
Demonstrates how to use Jasmine 2.0's async support to unit-test a Promise-based function.
This is part of my presentation at Boston Code Camp 22, and is excerpted from the book, *Reliable JavaScript*, co-authored by Lawrence D. Spencer (yours truly) and Seth H. Richards, to be published by Wiley in the spring of 2015.
If you want to play with the code, check out the comments in index.html.
var Conference = Conference || {};
Conference.checkInRecorder = function(){
var messages = {
mustBeCheckedIn: 'The attendee must be marked as checked in.',
httpFailure: 'The HTTP request failed.'
};
return {
getMessages: function() {
return messages;
},
recordCheckIn: function(attendee) {
return new Promise( function(resolve, reject) {
if (attendee.isCheckedIn()) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function onreadystatechange() {
if (xhr.readyState==4) {
if (xhr.status==200) {
resolve(xhr.responseText);
} else {
reject(new Error(messages.httpFailure));
}
}
};
xhr.open("POST","/checkin/" + attendee.getId(),true);
xhr.send();
} else {
reject(new Error(messages.mustBeCheckedIn));
}
});
}
};
};
var Conference = Conference || {};
Conference.checkInService = function(checkInRecorder){
// retain a reference to the injected checkInRecorder
var recorder = checkInRecorder;
return {
checkIn: function(attendee){
attendee.checkIn();
return recorder.recordCheckIn(attendee).then(
function onRecordCheckInSucceeded(checkInNumber) {
attendee.setCheckInNumber(checkInNumber);
return Promise.resolve(checkInNumber);
},
function onRecordCheckInFailed(reason) {
attendee.undoCheckIn();
return Promise.reject(reason);
});
}
};
};
describe('Conference.checkInService', function(){
var checkInService,
checkInRecorder,
attendee;
beforeEach(function(){
checkInRecorder = Conference.checkInRecorder();
checkInService = Conference.checkInService(checkInRecorder);
attendee = Conference.attendee('Sam', 'Wells');
});
describe('checkInService.checkIn(attendee)', function(){
// Now the test "follows" the Promise and also uses the done() mechanism.
it("sets the attendee's checkInNumber", function(done) {
var checkInNumber = 1234;
spyOn(checkInRecorder,'recordCheckIn').and.callFake(function() {
return Promise.resolve(checkInNumber);
});
checkInService.checkIn(attendee).then(
function promiseResolved() {
expect(attendee.getCheckInNumber()).toBe(checkInNumber);
done();
},
function promiseRejected() {
expect('This failure branch was executed').toBe(false);
done();
});
});
});
});
var Conference = Conference || {};
Conference.attendee = function(firstName, lastName){
var attendeeId,
checkedIn = false,
first = firstName || 'None',
last = lastName || 'None',
checkInNumber;
return {
setId: function(id) {
attendeeId = id;
},
getId: function() {
return attendeeId;
},
getFullName: function(){
return first + ' ' + last;
},
isCheckedIn: function(){
return checkedIn;
},
checkIn: function(){
checkedIn = true;
},
undoCheckIn: function() {
checkedIn = false;
checkInNumber = undefined;
},
setCheckInNumber: function(number) {
checkInNumber = number;
},
getCheckInNumber: function() {
return checkInNumber;
}
};
};
describe('Conference.checkInService', function(){
var checkInService,
checkInRecorder,
attendee;
beforeEach(function(){
checkInRecorder = Conference.checkInRecorder();
checkInService = Conference.checkInService(checkInRecorder);
attendee = Conference.attendee('Sam', 'Wells');
});
describe('checkInService.checkIn(attendee)', function(){
// Naive unit teste of a Promise
it("sets the attendee's checkInNumber", function(done) {
var checkInNumber = 1234;
spyOn(checkInRecorder,'recordCheckIn').and.callFake(function() {
return Promise.resolve(checkInNumber);
});
checkInService.checkIn(attendee);
expect(attendee.getCheckInNumber()).toBe(checkInNumber);
});
});
});
/*
Jasmine-Ajax : a set of helpers for testing AJAX requests under the Jasmine
BDD framework for JavaScript.
http://github.com/pivotal/jasmine-ajax
Jasmine Home page: http://pivotal.github.com/jasmine
Copyright (c) 2008-2013 Pivotal Labs
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
getJasmineRequireObj().ajax = function(jRequire) {
var $ajax = {};
$ajax.RequestStub = jRequire.AjaxRequestStub();
$ajax.RequestTracker = jRequire.AjaxRequestTracker();
$ajax.StubTracker = jRequire.AjaxStubTracker();
$ajax.ParamParser = jRequire.AjaxParamParser();
$ajax.fakeRequest = jRequire.AjaxFakeRequest();
$ajax.MockAjax = jRequire.MockAjax($ajax);
return $ajax.MockAjax;
};
getJasmineRequireObj().AjaxFakeRequest = function() {
function extend(destination, source, propertiesToSkip) {
propertiesToSkip = propertiesToSkip || [];
for (var property in source) {
if (!arrayContains(propertiesToSkip, property)) {
destination[property] = source[property];
}
}
return destination;
}
function arrayContains(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === item) {
return true;
}
}
return false;
}
function fakeRequest(global, requestTracker, stubTracker, paramParser) {
function FakeXMLHttpRequest() {
requestTracker.track(this);
this.requestHeaders = {};
this.overriddenMimeType = null;
}
function findHeader(name, headers) {
name = name.toLowerCase();
for (var header in headers) {
if (header.toLowerCase() === name) {
return headers[header];
}
}
}
function normalizeHeaders(rawHeaders, contentType) {
var headers = [];
if (rawHeaders) {
if (rawHeaders instanceof Array) {
headers = rawHeaders;
} else {
for (var headerName in rawHeaders) {
if (rawHeaders.hasOwnProperty(headerName)) {
headers.push({ name: headerName, value: rawHeaders[headerName] });
}
}
}
} else {
headers.push({ name: "Content-Type", value: contentType || "application/json" });
}
return headers;
}
var iePropertiesThatCannotBeCopied = ['responseBody', 'responseText', 'responseXML', 'status', 'statusText', 'responseTimeout'];
extend(FakeXMLHttpRequest.prototype, new global.XMLHttpRequest(), iePropertiesThatCannotBeCopied);
extend(FakeXMLHttpRequest.prototype, {
open: function() {
this.method = arguments[0];
this.url = arguments[1];
this.username = arguments[3];
this.password = arguments[4];
this.readyState = 1;
this.onreadystatechange();
},
setRequestHeader: function(header, value) {
if(this.requestHeaders.hasOwnProperty(header)) {
this.requestHeaders[header] = [this.requestHeaders[header], value].join(', ');
} else {
this.requestHeaders[header] = value;
}
},
overrideMimeType: function(mime) {
this.overriddenMimeType = mime;
},
abort: function() {
this.readyState = 0;
this.status = 0;
this.statusText = "abort";
this.onreadystatechange();
},
readyState: 0,
onload: function() {
},
onreadystatechange: function(isTimeout) {
},
status: null,
send: function(data) {
this.params = data;
this.readyState = 2;
this.onreadystatechange();
var stub = stubTracker.findStub(this.url, data, this.method);
if (stub) {
this.response(stub);
}
},
contentType: function() {
return findHeader('content-type', this.requestHeaders);
},
data: function() {
if (!this.params) {
return {};
}
return paramParser.findParser(this).parse(this.params);
},
getResponseHeader: function(name) {
name = name.toLowerCase();
var resultHeader;
for(var i = 0; i < this.responseHeaders.length; i++) {
var header = this.responseHeaders[i];
if (name === header.name.toLowerCase()) {
if (resultHeader) {
resultHeader = [resultHeader, header.value].join(', ');
} else {
resultHeader = header.value;
}
}
}
return resultHeader;
},
getAllResponseHeaders: function() {
var responseHeaders = [];
for (var i = 0; i < this.responseHeaders.length; i++) {
responseHeaders.push(this.responseHeaders[i].name + ': ' +
this.responseHeaders[i].value);
}
return responseHeaders.join('\r\n');
},
responseText: null,
response: function(response) {
if (this.readyState === 4) {
throw new Error("FakeXMLHttpRequest already completed");
}
this.status = response.status;
this.statusText = response.statusText || "";
this.responseText = response.responseText || "";
this.readyState = 4;
this.responseHeaders = normalizeHeaders(response.responseHeaders, response.contentType);
this.onload();
this.onreadystatechange();
},
responseTimeout: function() {
if (this.readyState === 4) {
throw new Error("FakeXMLHttpRequest already completed");
}
this.readyState = 4;
jasmine.clock().tick(30000);
this.onreadystatechange('timeout');
}
});
return FakeXMLHttpRequest;
}
return fakeRequest;
};
getJasmineRequireObj().MockAjax = function($ajax) {
function MockAjax(global) {
var requestTracker = new $ajax.RequestTracker(),
stubTracker = new $ajax.StubTracker(),
paramParser = new $ajax.ParamParser(),
realAjaxFunction = global.XMLHttpRequest,
mockAjaxFunction = $ajax.fakeRequest(global, requestTracker, stubTracker, paramParser);
this.install = function() {
global.XMLHttpRequest = mockAjaxFunction;
};
this.uninstall = function() {
global.XMLHttpRequest = realAjaxFunction;
this.stubs.reset();
this.requests.reset();
paramParser.reset();
};
this.stubRequest = function(url, data, method) {
var stub = new $ajax.RequestStub(url, data, method);
stubTracker.addStub(stub);
return stub;
};
this.withMock = function(closure) {
this.install();
try {
closure();
} finally {
this.uninstall();
}
};
this.addCustomParamParser = function(parser) {
paramParser.add(parser);
};
this.requests = requestTracker;
this.stubs = stubTracker;
}
return MockAjax;
};
getJasmineRequireObj().AjaxParamParser = function() {
function ParamParser() {
var defaults = [
{
test: function(xhr) {
return (/^application\/json/).test(xhr.contentType());
},
parse: function jsonParser(paramString) {
return JSON.parse(paramString);
}
},
{
test: function(xhr) {
return true;
},
parse: function naiveParser(paramString) {
var data = {};
var params = paramString.split('&');
for (var i = 0; i < params.length; ++i) {
var kv = params[i].replace(/\+/g, ' ').split('=');
var key = decodeURIComponent(kv[0]);
data[key] = data[key] || [];
data[key].push(decodeURIComponent(kv[1]));
}
return data;
}
}
];
var paramParsers = [];
this.add = function(parser) {
paramParsers.unshift(parser);
};
this.findParser = function(xhr) {
for(var i in paramParsers) {
var parser = paramParsers[i];
if (parser.test(xhr)) {
return parser;
}
}
};
this.reset = function() {
paramParsers = [];
for(var i in defaults) {
paramParsers.push(defaults[i]);
}
};
this.reset();
}
return ParamParser;
};
getJasmineRequireObj().AjaxRequestStub = function() {
function RequestStub(url, stubData, method) {
var normalizeQuery = function(query) {
return query ? query.split('&').sort().join('&') : undefined;
};
if (url instanceof RegExp) {
this.url = url;
this.query = undefined;
} else {
var split = url.split('?');
this.url = split[0];
this.query = split.length > 1 ? normalizeQuery(split[1]) : undefined;
}
this.data = normalizeQuery(stubData);
this.method = method;
this.andReturn = function(options) {
this.status = options.status || 200;
this.contentType = options.contentType;
this.responseText = options.responseText;
};
this.matches = function(fullUrl, data, method) {
var matches = false;
fullUrl = fullUrl.toString();
if (this.url instanceof RegExp) {
matches = this.url.test(fullUrl);
} else {
var urlSplit = fullUrl.split('?'),
url = urlSplit[0],
query = urlSplit[1];
matches = this.url === url && this.query === normalizeQuery(query);
}
return matches && (!this.data || this.data === normalizeQuery(data)) && (!this.method || this.method === method);
};
}
return RequestStub;
};
getJasmineRequireObj().AjaxRequestTracker = function() {
function RequestTracker() {
var requests = [];
this.track = function(request) {
requests.push(request);
};
this.first = function() {
return requests[0];
};
this.count = function() {
return requests.length;
};
this.reset = function() {
requests = [];
};
this.mostRecent = function() {
return requests[requests.length - 1];
};
this.at = function(index) {
return requests[index];
};
this.filter = function(url_to_match) {
var matching_requests = [];
for (var i = 0; i < requests.length; i++) {
if (url_to_match instanceof RegExp &&
url_to_match.test(requests[i].url)) {
matching_requests.push(requests[i]);
} else if (url_to_match instanceof Function &&
url_to_match(requests[i])) {
matching_requests.push(requests[i]);
} else {
if (requests[i].url === url_to_match) {
matching_requests.push(requests[i]);
}
}
}
return matching_requests;
};
}
return RequestTracker;
};
getJasmineRequireObj().AjaxStubTracker = function() {
function StubTracker() {
var stubs = [];
this.addStub = function(stub) {
stubs.push(stub);
};
this.reset = function() {
stubs = [];
};
this.findStub = function(url, data, method) {
for (var i = stubs.length - 1; i >= 0; i--) {
var stub = stubs[i];
if (stub.matches(url, data, method)) {
return stub;
}
}
};
}
return StubTracker;
};
(function() {
var jRequire = getJasmineRequireObj(),
MockAjax = jRequire.ajax(jRequire);
if (typeof window === "undefined" && typeof exports === "object") {
exports.MockAjax = MockAjax;
jasmine.Ajax = new MockAjax(exports);
} else {
window.MockAjax = MockAjax;
jasmine.Ajax = new MockAjax(window);
}
}());
var Conference = Conference || {};
Conference.checkInService = function(checkInRecorder){
// retain a reference to the injected checkInRecorder
var recorder = checkInRecorder;
return {
checkIn: function(attendee){
attendee.checkIn();
recorder.recordCheckIn(attendee).then(
// Success
attendee.setCheckInNumber,
// Failure
attendee.undoCheckIn);
}
};
};