testing - 如何创建虚拟组件以用于 Ember 集成测试？

Question

我有一个组件 some-container，它采用映射到其他 ember 组件的 id 散列。这是它的用法:

{{modules/some-container
  pageKey="foo"
  widgetIdToComponent=(hash
    foo=(component "modules/dummy-component")
  )
}}

我正在为这个组件编写一个集成测试，我想保持测试独立于其他组件。有没有办法在 Ember 集成测试文件中定义虚拟组件？

Answer 1

@Tyler Becks 的现有答案适用于遗留的 ember-qunit，但对于原生 qunit(自:2017 年:https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md)，您会想要这样的东西(已知至少可与 Ember Octane (3.16) 一起使用+)):

import { test, module } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { hbs } from 'ember-cli-htmlbars';

import { render } from '@ember/test-helpers';
import { setComponentTemplate } from '@ember/component';
import templateOnly from '@ember/component/template-only';
import Component from '@glimmer/component';

 
module('name of test suite', function(hooks) {
  setupRenderingTest(hooks);

  test('name of test', async function(assert) {
    class MyComponent extends Component {}
    setComponetTemplate(hbs`your template here`, MyComponent);
    this.owner.register('component:component-name', MyComponent);

    await render(hbs`<ComponentName />`);
  });

  // alternatively, things get a bit simpler if you're using
  // ember-source 3.25+
  test('name of test 2', async function(assert) {
    class MyComponent extends Component {}
    setComponetTemplate(hbs`your template here`, MyComponent);

    this.setProperties({ MyComponent });

    await render(hbs`<this.MyComponent />`);
  });

  // template-only components are even simpler still
  test('name of test 3', async function(assert) {
    this.setProperties({ 
      MyComponent: setComponetTemplate(
        hbs`your template here`, 
        templateOnly()
      );
    });

    await render(hbs`<this.MyComponent />`);
  });
});