CODEWITHSUNDEEP
ember.jsember-cli-mirage
a7omiton
a7omiton

Reputation: 1617

Ember Mirage not passing model as an ember object

Using the latest Ember (3.2), ember-cli-mirage 0.4.7, ember-cli-qunit 4.3.2, ember-qunit 3.4.1

I'm using ember-cli-mirage to try out frontend testing, I can't get around this error:

Uncaught TypeError: template.getProperties is not a function

I'm running this in a component test:

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';

module('Integration | Component | template-editor', function(hooks) {
  setupRenderingTest(hooks);
  setupMirage(hooks);

  test('it renders', async function(assert) {
    const mockTemplate = server.create('template');
    this.set('mockTemplate', mockTemplate);
    await render(hbs`{{template-editor template=mockTemplate}}`);
    assert.equal(this.get('template.name'), 1);
  });
});

And the relevant part of my components JS file is this:

export default Component.extend({
    init () {
        this._super(...arguments);
        let template = this.get('template');
        if ( template ) {
            let oldProperties = template.getProperties('body','subject');
            this.set('oldProperties',oldProperties);
        }
    }
});

It would appear that the mirage model is not the object my real life code expects, which is an Ember model.

I seem to have followed the docs so far as this is pretty basic, is there something I'm missing here?

The way I've setup mirage is simply to create a mirage factory for the template and add routes for it in the config:

// mirage/config.js
this.get('/templates');
this.get('/templates/:id');

// mirage/factories/template.js
import { Factory, faker } from 'ember-cli-mirage';

export default Factory.extend({
    subject: faker.lorem.sentence,
    insertDatetime: faker.date.past,
    body: faker.lorem.paragraphs
});

Upvotes: 3

Views: 1271

Answers (1)

Sam Selikoff
Sam Selikoff

Reputation: 12694

There is no easy way to get data/models from Mirage directly into your Ember app.

Because Mirage was designed to mock out your server layer, the typical way you get Mirage data into Ember is when your Ember app makes Ajax requests. This works well in Acceptance testing, since these tests execute your full Ember app (which in production will make network requests when loading up data).

In Integration tests, it's convenient to be able to work with models local to your Ember app, without going through the network layer.

Mirage models should never be passed directly into an Ember component, as they are completely separate from Ember and its object model. Mirage's models and relationships are only designed to work in its own "fake" server context.

So, instead of adding actual network requests to your integration tests to fetch Mirage data, you can create a helper that will let you server.create Mirage data, then force push that into Ember Data's store. You can then use store.peekRecord to grab models from the local store and pass those into your components:

let mockTemplate = server.create('template');
this.pushMirageDbIntoStore();

this.set('mockTemplate', this.store.peekRecord('template', mockTemplate.id));

I know it's confusing and you are certainly not the first person to ask about this. We will eventually add something like this helper to Mirage, but for now this is the best approach.

Upvotes: 6

Related Questions