ember.js - 如何为 ember-addon 中定义的组件添加集成测试

Question

这是我的 ember-addon 的结构。

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>

Ember 是否正在努力寻找我的 .hbs 模板？其他项目似乎使用标准分组进行所有组件测试(即命名组件 js 文件和模板文件，而不是 component.js 和 template.js)。

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

这与我问的另一个问题有关，但我认为在一个单独的问题中继续探讨这个测试问题更合适。

How does ember-qunit render components in integration testing?

我还想知道是否需要某种特定的方法来测试这个 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-contextual-table , ember-bootstrap .