ember.js - Ember Mirage 未将模型作为 ember 对象传递

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 的方式只是为模板创建一个 Mirage 工厂并在配置中为其添加路由:

// 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 的模型和关系仅设计为在其自己的“假”服务器上下文中工作。

因此，您可以创建 a helper，而不是向集成测试添加实际的网络请求来获取 Mirage 数据。这将让您server.create Mirage 数据，然后将其强制推送到 Ember Data 的存储中。然后，您可以使用 store.peekRecord 从本地存储中获取模型并将其传递到您的组件中:

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

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

<小时/>

我知道这很令人困惑，而且您肯定不是第一个问这个问题的人。我们最终将向 Mirage 添加类似此帮助程序的内容，但目前这是最好的方法。