Ember.js + Mirage：在集成测试中建立模拟关系

问题描述

我有一个使用 this.get（'model.property'）的组件，它可以按预期工作。

I have a component that makes use of this.get('model.property'), and it works as intended.

对于我的集成测试，我使用的是Mirage，它已用于所有其他测试（包括集成测试），但是当我测试此特定组件时，我得到：

For my integration tests I'm using Mirage, which has worked for all my other tests (integration tests included), however when I test this specific component I get:

TypeError：无法读取未定义的属性'then'

这就是我的测试结果：

import { moduleForComponent, test } from 'ember-qunit'
import hbs from 'htmlbars-inline-precompile'
import { startMirage } from 'app/initializers/ember-cli-mirage'
import Ember from 'ember'

moduleForComponent('summary-card', 'Integration | Component | summary card', {
  integration: true,
  beforeEach() {
    this.server = startMirage()
  },
  afterEach() {
    this.server.shutdown()
  }
})

test('it renders', function(assert) {
  const customer = this.server.create('customer')
  const location = this.server.create('location', { customer })
  const manufacturer = this.server.create('manufacturer')
  const model = this.server.create('device-model', { manufacturer })
  this.server.createList('device', 5, { model, customer, location })

  const loc = Ember.Object.create(location)
  this.set('model', loc)
  this.render(hbs`{{summary-card model=model model-name=model.name tag='location' belongs-to='customer' has-many='device'}}`);

  assert.equal(this.$('h1').text().trim(), 'Location 0', 'should be titled Location 0')

});

基本上，我的 summary-card.js 具有这样的内容：

And basically, my summary-card.js has something like this:

this.get('model.' + belongs).then(relationship => {...})

其中属于 属于的值设置为在调用组件时的值。

where belongs is simply the value of whatever belongs-to is set to when the component is invoked.

我有点困惑，因为我传递给测试的模拟模型似乎并没有像运行 ember s 时一样代表模型（我正在使用出于开发目的的Mirage）。有什么地方我可以找到更多有关那里发生的事情的信息吗？

I'm a bit puzzled, as it seems like the mock model I'm passing to my test isn't really representing the model in the same way it does when running ember s (I'm using Mirage for development purposes as well). Is there anywhere where I can find out more about what's exactly going on there?

谢谢！

PS我还尝试使用 server.create（）提供的 location 对象，我得到一个略有不同的错误：

P.S. I've also tried to use the location object as is provided by server.create(), and I get a slightly different error:

TypeError：_this.get（...）。然后不是函数

推荐答案

好吧，通过阅读，我设法找到了自己的解决方案，该解决方案非常有效：

Well, by reading this answer, I managed to find my own solution, which works really well:

import { moduleForComponent, test } from 'ember-qunit'
import hbs from 'htmlbars-inline-precompile'
import Ember from 'ember'

moduleForComponent('summary-card', 'Integration | Component | summary card', {
  integration: true
})

test('it renders', function(assert) {
  this.inject.service('store', {as: 'store'})
  let location

  Ember.run(() => {
    location = this.store.createRecord('location', {
      id: 0,
      name: 'Location 0',
      customer: this.store.createRecord('customer', {
        id: 1,
        name: 'Customer 0'
      }),
      devices: [this.store.createRecord('device', {id: 1})]
    })
  })

  this.set('model', location)
  this.render(hbs`
    {{#summary-card model=model model-name=model.name tag='location' belongs-to='customer' has-many='device'}}
      <div class='test-content'>Test Content</div>
    {{/summary-card}}
  `)

基本上，我已经选择直接使用商店，而不是使用Mirage，而且效果很好！

Basically, I have opted for using the store directly, rather than using Mirage, and it works!

这篇关于Ember.js + Mirage：在集成测试中建立模拟关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！