如何在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!');
});

測試通過。