7

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?

3 Answers 3

7

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.

5

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

1
  • 1
    this.inject.service('store'); let model = this.get('store').createRecord('fo'); just throws an error for me Commented Jun 23, 2017 at 16:16
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.