Ember.js：如何集成测试与Ember-data模型交互的组件

Question

我正在构建一个相对简单的“评论列表”组件。我希望传入可评论的模型（比如一个“文章”），并且让组件负责创建、编辑和删除评论。目前，我传递了所有各种操作，但这样非常脆弱。

在组件集成测试中，如何创建一个Ember Data模型的真实实例？

我的第一反应是导入该模型，然后使用“.create（{}）”，但会出现错误“请改用this.store.createRecord()”。

/* 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);
    });
  }
);

有人有任何想法吗？

- mattmcmanus

Answer 1

在所有的Ember测试帮助器中，store只能从moduleForModel中访问。

以下是这个测试帮助器的实现方式(源代码):

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

您可以在测试中执行相同操作。您还可以将其放入助手中，以便您不必大量复制粘贴。

请注意，它仅适用于集成测试。您可以通过使用与您的Ember CLI样板捆绑在一起的startApp测试助手启动应用程序，将任何测试转换为集成测试。

- Andrey Mikhaylov - lolmaus

Answer 2

新的ember mocha版本0.8.4中包含一种新的公共方式来注入服务，例如store。很快会有一个指南部分，其中包含一个示例（请参见https://github.com/emberjs/guides/blob/master/source/testing/testing-components.md）。

基本上，在beforeEach中，您需要添加以下行：this.inject.service('store');，使store在测试中可访问为this.get('store')。

这是有关新更改的pull request链接：https://github.com/switchfly/ember-test-helpers/pull/105。

- Todd Jordan

---

this.inject.service('store'); 让我抛出了一个错误，我无法创建'fo'的记录。 - SuperUberDuper

Answer 3

针对在集成测试中遇到类似问题的人们的一般性回答。

一切都取决于你的项目中使用的版本和解决方案。

当你在集成测试中使用module (import { module } from 'ember-qunit';)

你可以在测试中使用this.owner.lookup('service:store')

有关更多信息，请参考Dockyard的一篇很好的文章 https://dockyard.com/blog/2018/01/11/modern-ember-testing

- Hubert Olender