Ember.js: How to integration test components that interact with ember-data models

Question

I'm building a relatively straight-foward comment-list component. I want to pass in the commentable model (say a Post) and have the component take care of creating, editing, deleting comments. Right now I pass around all the various actions and it's been extremely brittle.

How do I create a true instance of an Ember Data model in a component integration test?

My immediate thought was to import the model then .create({}) it but that errors with use this.store.createRecord() instead

/* jshint expr:true */
import { assert } from 'chai';
import { describeComponent, it } from 'ember-mocha';
import hbs from 'htmlbars-inline-precompile';
import Post from 'ownersup-client/post/model';

describeComponent( 'comment-list', 'Integration: CommentListComponent', {
    integration: true
  },
  function() {
    it('renders all of the comments', function() {
      const model = Post.create({ title: 'title' });
      model.get('comments').createRecord({ body: 'One Comment' })

      this.render(hbs`{{comment-list model=model}}`);

      assert.lengthOf(this.$('.comment-list-item'), 1);
    });
  }
);

Anyone have any thoughts?

Answer 1

Among all Ember test helpers, the store is only available from moduleForModel.

Here's how this test helper does it (source):

  var container = this.container;
  var store = container.lookup('service:store') || container.lookup('store:main');

You can do the same inside your test. You can also put it into a helper so that you don't have to copy-paste a lot.

Note that it will only work for an integration test. You can turn any test into integration one by starting the app using the startApp test helper that is bundled with your Ember CLI boilerplate.

Answer 2

The new ember mocha release 0.8.4 contains a new, public way to inject services such as the store. There's a guides section coming soon with an example (see https://github.com/emberjs/guides/blob/master/source/testing/testing-components.md)

essentially, in your beforeEach you want add the following line: this.inject.service('store');, making the store accessible as this.get('store') in your tests.

Here's a link to the pull request for the new change: https://github.com/switchfly/ember-test-helpers/pull/105