Debugging Ember CLI Mirage in an acceptance test

Question

I'm trying to setup a mock server in for my Ember CLI (1.13.1) acceptance test with Ember CLI Mirage . I'm stuck on how to debug the setup and actually test the model data available in the view.

I tried adding a console log statement inside my mirage route:

this.get('/users', function(db){
  console.log(db.users);
  return db.users;
});

Which tells me that the mirage route is called and there should be three users present. But my test is still failing. How do I check what is in the store in my acceptance test or in my template?

tests/acceptance/users/index-test.js

/* jshint expr:true */
import {
  describe,
  it,
  beforeEach,
  afterEach
} from 'mocha';
import { expect } from 'chai';
import Ember from 'ember';
import startApp from 'tagged/tests/helpers/start-app';

describe('Acceptance: UsersIndex', function() {
  var application;
  var users;

  beforeEach(function() {
    application = startApp();
    users = server.createList('user', 3);
  });

  afterEach(function() {
    Ember.run(application, 'destroy');
  });

  it('can visit /users/index', function() {
    visit('/users');
    andThen(function() {
      expect(currentPath()).to.equal('users.index');
    });
  });

  it('lists the users', function(){
    visit('/users');
    andThen(function() {
      users = server.createList('user', 3);
      expect(find('.user').length).to.equal(3); // fails
    });
  });
});

AssertionError: expected 0 to equal 3

app/mirage/config.js

export default function() {
  /*
    Config (with defaults).

    Note: these only affect routes defined *after* them!
  */
  this.namespace = '/api/v1';    // make this `api`, for example, if your API is namespaced
  // this.timing = 400;      // delay for each request, automatically set to 0 during testing

  this.get('/users');
}


// You can optionally export a config that is only loaded during tests
export function testConfig() {
  this.timing = 1;
}

app/mirage/factories/user.js

import Mirage, {faker} from 'ember-cli-mirage';
export default Mirage.Factory.extend({
  email: function(){ return faker.internet.email(); }
});

app/routes/users/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.findAll('user');
  }
});

app/templates/users/index.hbs

<h2>Users</h2>

<table>
  <thead>
    <tr>
      <th>Actions</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>

  {{#each model as |user|}}
    <tr class="user">
      <td class="actions"><a href="#">Show</a></td>
      <td class="email">{{ user.email }}</td>
    </tr>
  {{/each}}
  </tbody>
</table>

Answer 1

I usually start by looking in the Data tab of the Ember Inspector to see if any models were added to the store.

If you're on 1.13 you're probably using the JSON API adapter and will need to do just a bit more work in your mirage route handler, like returning the object under a data key with a type.

For example, it might look like this:

this.get('/users', function(db){
  return {
    data: db.users.map(u => ({
      id: u.id,
      type: u.type,
      attributes: _.omit(u, ['id', 'type'])
     }))
  };
});

Note that your factories are only for seeding Mirage's db. So with the route above, you'd now be able to use a factory like the one you have defined in your question

// mirage/scenarios/default.js
export default function(server) {
  server.createList('user', 10);
});

and then when you booted your app and it made a GET request to /users , the data should be returned and properly deserialized by Ember Data.