Ember Mirage没有将模型作为余烬对象传递

Question

使用最新的Ember(3.2),ember-cli-mirage 0.4.7,ember-cli-qunit 4.3.2,ember-qunit 3.4.1

我正在使用ember-cli-mirage来尝试前端测试,我无法解决这个错误:

Uncaught TypeError: template.getProperties is not a function

我在组件测试中运行它:

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';

module('Integration | Component | template-editor', function(hooks) {
  setupRenderingTest(hooks);
  setupMirage(hooks);

  test('it renders', async function(assert) {
    const mockTemplate = server.create('template');
    this.set('mockTemplate', mockTemplate);
    await render(hbs`{{template-editor template=mockTemplate}}`);
    assert.equal(this.get('template.name'), 1);
  });
});

我的组件JS文件的相关部分是这样的:

export default Component.extend({
    init () {
        this._super(...arguments);
        let template = this.get('template');
        if ( template ) {
            let oldProperties = template.getProperties('body','subject');
            this.set('oldProperties',oldProperties);
        }
    }
});

海市蜃楼模型似乎不是我现实生活中代码所期望的对象,这是一个Ember模型.

到目前为止,我似乎已经按照文档进行了,这是非常基本的,这里有什么我想念的吗？

我设置海市蜃楼的方法只是为模板创建海市蜃楼工厂并在配置中为其添加路线:

// mirage/config.js
this.get('/templates');
this.get('/templates/:id');

// mirage/factories/template.js
import { Factory, faker } from 'ember-cli-mirage';

export default Factory.extend({
    subject: faker.lorem.sentence,
    insertDatetime: faker.date.past,
    body: faker.lorem.paragraphs
});

Answer 1

没有简单的方法可以将Mirage中的数据/模型直接导入您的Ember应用程序.

因为Mirage旨在模拟您的服务器层,所以将Mirage数据导入Ember的典型方式是当您的Ember应用程序发出Ajax请求时.这在验收测试中很有效,因为这些测试执行完整的Ember应用程序(生产中将在加载数据时发出网络请求).

在集成测试中,可以方便地使用Ember应用程序本地模型,而无需通过网络层.

Mirage模型永远不应该直接传递给Ember组件,因为它们与Ember及其对象模型完全分开.Mirage的模型和关系只能在自己的"假"服务器环境中工作.

因此,您可以创建一个帮助server.create Mirage数据的帮助程序,然后强制将其推送到Ember Data的商店,而不是将实际网络请求添加到集成测试中以获取Mirage数据.然后,您可以使用store.peekRecord从本地存储中获取模型并将其传递到组件中:

let mockTemplate = server.create('template');
this.pushMirageDbIntoStore();

this.set('mockTemplate', this.store.peekRecord('template', mockTemplate.id));

我知道这很令人困惑,你肯定不是第一个提出这个问题的人.我们最终会向Mirage添加类似帮助器的东西,但是现在这是最好的方法.