ember-cli-fake-server is an ember-cli addon that makes it extremely simple to stub ajax requests in your ember app. It uses Pretender internally. If you need a more comprehensive stubbing solution, consider ember-cli-mirage.
ember install ember-cli-fake-server- Call
FakeServer.start()to start stubbing, andFakeServer.stop()to stop stubbing or usesetupFakeServer(hooks)when using "new test api". - In tests, use
stubRequest(verb, path, callback)to stub ajax requests
This addon exposes a default FakeServer export and a named stubRequest export from 'ember-cli-fake-server'. In your ember code, you must call FakeServer.start() to start it intercepting ajax requests, and FakeServer.stop() to turn it back off. This should be done in your test suite's setup and teardown methods.
In your test, use stubRequest for each ajax request you would like to stub.
Here's an example ember test:
import { module, test } from 'qunit';
import jQuery from 'jquery';
import { stubRequest, setupFakeServer } from 'ember-cli-fake-server';
module('using ember-cli-fake-server', function(hooks) {
setupFakeServer(hooks);
test('some ajax', function(assert) {
const done = assert.async();
assert.expect(1);
let didCallAjax = false;
stubRequest('get', '/some-url', (request) => {
didCallAjax = true;
request.ok({}); // send empty response back
});
jQuery.ajax('/some-url', {
complete() {
assert.ok(didCallAjax, 'called ajax');
done();
}
});
});
});The stubRequest method takes 3 parameters: (verb, path, callback).
verbshould be one of the verbs that Pretender understands: 'get', 'put', 'post', 'delete', 'path' and 'head'pathis the url (without the scheme, protocol or domain) that you are stubbing out, e.g.'/api/users/1'- For more details on the
callbackparameter, see "Responding To Requests" below
The callback that you pass to stubRequest will be called with a request parameter that you can use to respond to the request and also read information about the request.
The request parameter has the following methods, corresponding to HTTP status codes:
ok— status code 200error— 422notFound— 404created— 201accepted- 202noContent— 204unauthorized— 401
Call the appropriate method on request with your JSON payload to make stubRequest respond with that status code and payload.
Examples:
stubRequest('post', '/users', (request) => {
// sends a "201 Created" response with the JSON for a user:
request.create({user: {id:1 , name: 'newly created user'}});
});
stubRequest('get', '/users/1', (request) => {
// send a "200 Ok" response with the JSON for a user:
request.ok({user: {id: 1, name: 'the user'}});
});
stubRequest('get', '/users/99', (request) => {
// send an empty "404 Not Found" response
request.notFound();
});
stubRequest('put', '/users/1', (request) => {
// send a "422 Unprocessable Entity" response back with the given JSON payload
request.error({error: {email: 'is invalid'}});
});The request parameter passed to your callback also has a json method that returns the incoming JSON payload.
Example:
stubRequest('post', '/users/1', (request) => {
alert(request.json().user.name); // alerts "Cory"
});
jQuery.ajax('/users/1', {
type: 'POST',
data: JSON.stringify({user: {id: 1, name: "Cory"}}),
dataType: 'json',
contentType: 'application/json; charset=utf-8'
});The request parameter passed to your callback function is the same one (albeit with some additional methods added on) that Pretender uses, so you can use the same properties it exposes for reading data such as request.params and request.queryParams.
ember-cli-fake-server is configured to intercept all ajax requests after you call FakeServer.start(). Any ajax request that was not stubbed before it was made will throw an error explaining the method and path of the unhandled request.
By default ember-cli-fake-server will log all requests that it handles. To enable/disable logging of successfully handled requests, provide an options object to FakeServer.start() that defines a logging attribute, for example:
FakeServer.start({ logging: false });or
setupFakeServer(hooks, { logging: false });Unhandled requests are always logged.
Use FakeServer.configure.afterResponse(fn) to specify an afterResponse
callback. This can be used to globally modify all requests in some specified
way. The function you pass to afterResponse will be called with two arguments:
response and request. It must return an array of [statusCode, headers, json|string].
Example:
FakeServer.configure.afterResponse(function(response /*, request */) {
// response === [200, {"content-type": "application/json"}, {foo: 'bar'}]
let [status, headers, json] = response;
if (json.foo) { // optionally modify json
json.foo = 'baz'
}
return [status, headers, json];
});
stubRequest('get', '/users/1', function(request) {
let response = this.ok({foo: 'bar'});
// `response` is passed as 1st argument to afterResponse hook,
// `request` is passed as 2nd argument.
return response;
});