如何为 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/ link 到我的插件：

//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

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

我也想知道是否有必要的特定方法来测试这个 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.

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

How to add integration tests for components defined in an ember-addon

ember.js

ember-testing

ember-qunit

ember-addon

ember-pods