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

问题

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?

回答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

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/32895518/ember-js-how-to-integration-test-components-that-interact-with-ember-data-model