Not fully understanding ember-cli-mirage

Testing
1

Background:

  • ember-cli: version 2.18.2
  • ember-cli-mirage: version 0.4.10

I’ve been diving into acceptance tests and using Mirage to implement my JSON-API back-end. Everything seemed to be going in the right direction until I ran into an issue where it seems an Mirage endpoint is not getting called, as expected.

As a contrived example, I have two models: house and bathroom. And their app/models definitions are:

// app/models/house.js
export default DS.Model.extend({
  bathrooms: DS.hasMany("bathroom")
});

// app/models/bathroom.js
export default DS.Model.extend({
  house DS.belongsTo("house")
});

And, running locally, and debugging with the Ember Inspector, I can see the following snippet resolve as expected:

bathrooms = house.get("bathrooms");

I can see the network request generated is GET /houses/:id/bathrooms. However, when I’m running my acceptance test, and trying to debug the same code path bathrooms does not get populated as expected even though I have a Mirage endpoint api.get("/houses/:id/bathrooms", (db, request)...

I know my bathrooms are getting generated because in my house Mirage factory I have the following:

afterCreate(house, server) {

  server.create("bathroom", { house });
  server.create("bathroom", { house });

}

And I verified their existence in the test:

const bathroomRecords = server.db.bathrooms;
console.log(bathroomRecords[0]);
expect(bathroomRecords.length).to.equal(2);

Even the output looked correct, especially the houseId.

I can’t help but to think I’m missing something, but what that is currently escapes me.

Any assistance will be greatly appreciated. I don’t need the answer, per se, just a location where I can find the answer.

Thank you for your time.

2

If you haven’t already, you’ll need to call setupMirage() in your acceptance tests:

  import { setupApplicationTest } from 'ember-qunit';
+ import { setupMirage } from 'ember-cli-mirage/test-support';


  module('Acceptance | Homepage test', function(hooks) {
    setupApplicationTest(hooks);
+   setupMirage(hooks);

    test('my first test', async function(assert) {
      // test code
    });
  });

Check out the docs for more info.

In the future if you find Mirage not seeming to work, you can always drop a console.log in your mirage/config.js or even a route handler to verify that code is getting run.

1 Like
3

@samselikoff Thank you for your suggestions. I will double-check Mirage is setup and I’ll add console.log statements.

Does it matter that we’re using mocha in this project? I don’t think it does since, using my examples, the API call for GET /houses/:id appears to be working.

I’ll report back…

4

Another thing I’d look it is whether the links of the house record is correct in the Mirage response. If it doesn’t match the one of your actual back-end, this might be the problem you’re facing.

I recommend adding this.server.logging = true in the test you’re debugging to see the responses from Mirage handlers. You can then check links.bathrooms of the house.

1 Like
5

@melriffe This is actually done in the Query params chapter of the Rock and Roll book and I know you’re a reader :slight_smile: so you can check out an example there.

1 Like
6

:grin: Thanks for the feedback. I’ll definitely have a look at the book. However, as changing priorities are ever a challenge, I’ve had to table this current situation for the moment.