如何为成员插件中定义的组件添加集成测试

Question

这是我的ember-add的结构。

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如何在集成测试中呈现组件?

我还想知道是否有一种特定的方式来测试这个pod布局

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-context -table, ember-bootstrap。