如何在Ember中为使用输出HTML的助手的组件进行QUnit集成测试

Question

我有一个Ember组件，它使用一个创建HTML的助手，我正在尝试创建一个测试，检查组件和助手HTML组合后产生的HTML。

示例
组件产生：<div class="one"></div>

助手生成：<div class="two"></div>

联合收割机产生：<div class="one"><div class="two"></div></div>

现在的情况是HTMLBars没有生成帮助程序的HTML。它确实将JSON值输入到帮助程序中。

因此测试产生：<div class="one">true</div>

我是否需要包含一些内容来说明助手应该处于活动状态？

Answer 1

您的代码中一定有一个错误。组件是否使用辅助程序进行集成测试并不重要。我写了一个简短的Ember Twiddle来演示：https://ember-twiddle.com/a50c05ec5a050a4c72fd3c53445e3e1d

// /app/helpers/hello-world.js
import Ember from 'ember';
export function helloWorld(params/*, hash*/) {
  return new Ember.Handlebars.SafeString('<strong>Hello World!</strong>');
}
export default Ember.Helper.helper(helloWorld);
// /app/components/component-using-helper.js
import Ember from 'ember';
export default Ember.Component.extend({
  tagName: 'p'
});
// /tests/integration/components/component-using-helper.js
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('component-using-helper', 'TODO: put something here', {
  integration: true
});
test('it renders', function(assert) {
  this.render(hbs`{{component-using-helper}}`);
  assert.ok(this.$('p').length === 1);
  assert.ok(this.$('p strong').length === 1);
  assert.equal(this.$('p strong').html().trim(), 'Hello World!');
});

测试通过。