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

Ember Mirage not passing model as an ember object

使用最新的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
});

没有简单的方法可以从 Mirage 直接获取 data/models 到您的 Ember 应用程序。

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

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

Mirage 模型不应直接传递到 Ember 组件中,因为它们完全独立于 Ember 及其对象模型。 Mirage 的模型和关系仅设计用于在它自己的 "fake" 服务器上下文中工作。

因此,您可以创建 a helper 让您 server.create Mirage 数据,然后强制将其推送到 Ember 数据的存储。然后,您可以使用 store.peekRecord 从本地商店获取模型并将其传递到您的组件中:

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

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

我知道这很令人困惑,而且您肯定不是第一个问这个问题的人。我们最终会向 Mirage 添加类似这个助手的东西,但目前这是最好的方法。