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

Posted 2023-02-23

【中文标题】Ember Mirage 没有将模型作为 ember 对象传递

【英文标题】：Ember Mirage not passing model as an ember object

【发布时间】：2018-07-05 13:52:59

【问题描述】：

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

【参考方案1】：

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

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

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

Mirage 模型不应直接传递到 Ember 组件中，因为它们与 Ember 及其对象模型完全分离。 Mirage 的模型和关系仅设计为在其自己的“假”服务器上下文中工作。

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

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

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

---

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

【讨论】：

我会采用这种方法，感谢您的澄清，也感谢您提供这个库！期待更新:)

你知道如何加载这个帮助程序以便我可以执行 this.pushMirageDbIntoStore() 吗？我已将助手放在测试/助手下，并在我的测试中引用它，但它似乎没有注册。也许这是一个单独的问题