This document discusses using Ember CLI Mirage to mock API data for testing and development of single-page applications. Ember CLI Mirage allows defining API endpoints and associated data models to mimic backend services. It provides features like factories for generating mock data, associations between models, and serializers to customize API responses. Mirage can be used to seed test data and override responses to test error handling. It integrates with Ember's testing framework and provides shortcuts for common CRUD operations to simplify API mocking.

1. Rapid prototyping and
easy testing with Ember
CLI Mirage
1

2. Me
• Name: Krzysztof Białek
• Github:
github.com/krzysztofbialek
• Twitter: drwrum
• Company: Rebased

3. SPA and dynamic server
data
• No backend api present yet
• Backend api not yet stable
• Mocking api in acceptance testing

4. Dealing with it - testing
with sinon
let project = JSON.stringify({
project: {
id: 1000,
links: {
devices: '/web_api/projects/1000/devices'
}
}
});
server.respondWith('GET', '/web_api/projects/1000', [200,
{"Content-Type":"application/json"}, project]);

5. Dealing with it - testing
with sinon
/* global server */
import Ember from 'ember';
export default Ember.Test.registerHelper('respondGET', function(app,
url, payload) {
let data = JSON.stringify(payload);
server.respondWith('GET', url, [200, {"Content-
Type":"application/json"}, data]);
});
respondGET('/web_api/projects/1000/devices', {
devices: [
{id: 1, name: "ipad"}
]
});

6. Dealing with it - Mocking with
ember cli http mocks
//server/mocks/author.js
module.exports = function(app) {
var express = require('express');
var authorRouter = express.Router();
var AUTHORS = [
{
id: 1,
name: 'Bad Motha Goose'
},
{
id: 2,
name: 'Concrete Octopus'
}
];
authorRouter.get('/', function(req, res) {
var ids = req.query.ids;
var authors;
if (ids) {
authors = authors.filter(function(b) {
return ids.indexOf(b.id.toString()) > -1;
});
}
else {
authors = authors;
}
res.send({"authors": authors});
});
app.use('/authors', authorRouter);
};

7. Dealing with it - the right
way

8. What can Ember CLI
Mirage do for you?
• Mocking of api in development
• Mocking endpoints in testing
• With it’s own ORM it can mimic ember-data
behaviour
• Bundled into application
• wraps around pretender.js

9. Define simple route
// mirage/config.js
export default function() {
this.namespace = 'api';
this.get('/authors', () => {
return {
authors: [
{id: 1, name: 'Zelda'},
{id: 2, name: 'Link'},
{id: 3, name: 'Epona'},
]
};
});
};

10. Define simple route
this.get('/events', () => {
let events = [];
for (let i = 1; i < 1000; i++) {
events.push({id: i, value: Math.random()});
};
return events;
});
this.get('/users/current', () => {
return {
name: 'Zelda',
email: 'z@hyrule.org'
};
});

11. Why so verbose?
// mirage/config.js
export default function() {
this.get('/authors', () => {
return {
authors: [
{id: 1, name: 'Zelda'},
{id: 2, name: 'Link'},
{id: 3, name: 'Epona'},
]
};
});
};
// mirage/config.js
export default function() {
this.get('/authors', (schema) => {
return schema.authors.all;
});
};

12. Data layer
• In memory database
• Models
• Factories
• Serializers

13. Going flexible with
models
// mirage/models/author.js
import { Model } from 'ember-cli-mirage';
export default Model;
// and use it in the route
// mirage/config.js
export default function() {
this.get('/authors', (schema) => {
return schema.authros.all;
});
}

14. Going flexible with
models
// app/routes/some-route
Ember.createObject('author', { name: 'Link', age: 123 })
// payload send with the request to ‘authors’ route
author: {
name: 'Link',
age: 123
}
// mirage/config.js
this.post('/authors', (schema, request) => {
let attrs = JSON.parse(request.requestBody).author;
return schema.authors.create(attrs);
});

15. Model associations
// mirage/models/author.js
import { Model, hasMany } from 'ember-cli-mirage';
export default Model.extend({
posts: hasMany()
});
// mirage/config.js
this.del('/authors/:id', (schema, request) => {
let author = schema.authors.find(request.params.id);
author.posts.delete();
author.delete();
});

16. Dynamic routes and
query params
this.get('/authors/:id', (schema, request) => {
let id = request.params.id;
return schema.authors.find(id);
});
this.get('/authors', (schema, request) => {
let someQuery = request.queryParams[‘some_query’];
return schema.authors.where({name: someQuery});
});

17. What if API is weird?

18. // mirage/serializers/application.js
import { Serializer } from 'ember-cli-mirage';
import Ember from 'ember';
const { dasherize } = Ember.String;
export default Serializer.extend({
keyForAttribute(key) {
return dasherize(key);
}
});
GET /authors/1
{
author: {
id: 1,
'first-name': 'Keyser',
'last-name': 'Soze',
age: 145
}
}
Taming API with
serialiser

19. Lets fake some data!
• Fixtures
• Factories

20. Fixtures - quick and rigid
// /mirage/fixtures/authors.js
export default [
{id: 1, firstName: 'Link'},
{id: 2, firstName: 'Zelda'}
];
// /mirage/fixtures/blog-posts.js
export default [
{id: 1, title: 'Lorem', authorId: 1},
{id: 2, title: 'Ipsum', authorId: 1},
{id: 3, title: 'Dolor', authorId: 2}
];
// mirage/scenarios/default.js
export default function(server) {
server.loadFixtures();
};

21. But…

22. Factories - also quick
but flexible
// mirage/factories/author.js
import { Factory } from 'ember-cli-mirage';
export default Factory.extend({
name(i) {
return `Author ${i}`;
},
age: 20,
admin: false
});
server.createList('author', 3);
{id: 1, name: "Author 1", age: 20, admin: false}
{id: 2, name: "Author 2", age: 20, admin: false}
{id: 3, name: "Author 3", age: 20, admin: false}

23. Factories - making data up
since… not so long ago
// mirage/factories/author.js
import { Factory, faker } from 'ember-cli-mirage';
export default Factory.extend({
firstName() {
return faker.name.firstName();
},
lastName() {
return faker.name.lastName();
},
age() {
// list method added by Mirage
return faker.list.random(18, 20, 28, 32, 45, 60)();
},
});

24. Factories - seeding data
in development
// mirage/scenarios/default.js
export default function(server) {
server.createList('blog-post', 10);
let author = server.create('author', {name: 'Zelda'});
server.createList('blog-post', 20, { author });
};

25. Factories - seeding data
in tests
test('I can view the photos', assert => {
server.createList('photo', 10);
visit('/');
andThen(function() {
assert.equal( find('img').length, 10 );
});
});

26. Acceptance testing -
overriding defaults
// mirage/factories/photo.js
import Mirage from 'ember-cli-mirage';
export default Mirage.Factory.extend({
title(i) {
// Photo 1, Photo 2 etc.
return `Photo ${i}`;
}
});
test("I can view the photos", assert => {
server.createList('photo', 10);
visit('/');
andThen(() => {
assert.equal( find('img').length, 10 );
});
});

27. Acceptance testing -
overriding defaults
test("I see the photo's title on a detail route", assert => {
let photo = server.create('photo', {title: 'Sunset over
Hyrule'});
visit('/' + photo.id);
andThen(() => {
assert.equal( find('h1:contains(Sunset over
Hyrule)').length, 1 );
});
});

28. Acceptance testing - make
sure server was called
test("I can change the lesson's title", assert => {
server.create('lesson', {title: 'My First Lesson'})
visit('/');
click('.Edit')
fillIn('input', 'Updated lesson');
click('.Save');
andThen(() => {
// Assert against our app's UI
assert.equal( find('h1:contains(Updated lesson)').length, 1
);
// Also check that the data was "persisted" to our backend
assert.equal( server.db.lessons[0].title, 'Updated
lesson');
});
});

29. Acceptance testing -
testing errors
test('the user sees an error if the save attempt fails',
function(assert) {
server.post('/questions', {errors: ['There was an error']},
500);
visit('/');
click('.new');
fillIn('input', 'New question');
click('.save');
andThen(() => {
assert.equals(find('p:contains(There was an
error)').length, 1);
});
});

30. That could be enough to
start…

32. Shorthands
// Expanded
this.get('/contacts', ({ contacts }) => {
return contacts.all(); // users in the second case
});
// Shorthand
this.get('/contacts'); // finds type by singularizing url
this.get('/contacts', 'users'); // optionally specify the collection as
second param
// Expanded
this.del('/contacts/:id', ({ contacts }, request) => {
let id = request.params.id;
let contact = contacts.find(id);
contact.addresses.destroy();
contact.destroy();
});
// Shorthand
this.del('/contacts/:id', ['contact', 'addresses']);

33. Easy peasy crud
// Resource
this.resource('contacts'); // available in 0.2.2+
// Equivalent shorthands
this.get('/contacts');
this.get('/contacts/:id');
this.post('/contacts');
this.put('/contacts/:id');
this.patch('/contacts/:id');
this.del('/contacts/:id');

34. Mix real api with fake
endpoints
this.passthrough('/addresses', '/contacts');
this.passthrough('/something');
this.passthrough('/else');
// just some verbs
this.passthrough('/addresses', ['post']);
this.passthrough('/contacts', '/photos', ['get']);
// other-origin
this.passthrough('http://api.foo.bar/**');
this.passthrough('http://api.twitter.com/v1/cards/**');

35. Happy faking!!!
• http://www.ember-cli-mirage.com
• https://github.com/pretenderjs/pretender