Как добавить интеграционные тесты для компонентов, определенных в ember-addon

Question

Вот структура моего угасающего аддона.

addon/
.. components/
.... my-component/
...... component.js
...... style.less
...... template.hbs   
.. engine.js
.. routes.js
app/  
.. components/
.... my-component/
...... component.js
.. etc ..
tests/  
.. dummy/
.... app/
...... components/
...... controllers/
...... etc ....
.. integration/  
.... components/  
...... my-component-test.js  
.. index.html
.. test-helper.js

Тестовый файл tests/integration/components/my-component-test.js:

//tests/integration/component/my-component-test.js
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('my-component', 'my component module description', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{my-component}}`);

  console.log('This rendered', this.$()[0]);
  assert.ok(false);
});

Я ссылаюсь на мой аддон от app/ также:

//app/components/my-component/component.js
export { default } from 'my-application/components/my-component/component'

Допустим, мой шаблон компонента выглядит примерно так:

<!-- addon/components/my-component/template.hbs -->
<div class="foo"></div>

И скажем, что файл js моего компонента выглядит примерно так:

//addon/components/my-component/component.js
import Ember from 'ember'
export default Ember.Component.extend({
    someProperty: 'someValue'
});

---

Я бы предположил, что вывод журнала консоли будет:

<div id="ember234" class="ember-view>
    <div class="foo"></div>
</div>

Но, к сожалению, консоль в Qunit предлагает:

<div id="ember234" class="ember-view">
    <!---->
</div>

Эмбер изо всех сил пытается найти мой .hbs шаблон? Другие проекты, кажется, выполняют все свои тесты компонентов со стандартной группировкой (то есть имеют именованные файлы компонентов js и файлы шаблонов, а не component.js а также template.js).

https://github.com/edgycircle/ember-pikaday

Это относится к другому вопросу, который я задал, но я подумал, что более уместно продолжить изучение этой проблемы тестирования здесь, в отдельном вопросе.

Как ember-qunit отображает компоненты в интеграционном тестировании?

Я также спрашиваю, есть ли определенный способ, необходимый, чтобы проверить это расположение стручка.

Answer 1

Ваш component.js должен импортировать шаблон как layout, Вы должны сделать это:

//addon/components/my-component/component.js
import Ember from 'ember';
import layout from '../../templates/components/my-component/template'

export default Ember.Component.extend({
    layout,
    someProperty: 'someValue'
});

Я могу предложить вам взглянуть на коды других дополнений. Такие как ember-contextual-table, ember-bootstrap.