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

General answer for people who are struggled with similar things related to injecting in integration tests.

Everything depends on which version and solutions you have in your project.

When you have an integration test with module (import { module } from 'ember-qunit';)

you can use this.owner.lookup('service:store') inside your test

for more information, there is a great article from Dockyard https://dockyard.com/blog/2018/01/11/modern-ember-testing