2

这是我的 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.jsand template.js）。

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

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

ember-qunit 如何在集成测试中渲染组件？

我还质疑是否有必要的特定方法来测试这个 pod 布局。

4

1 回答 1

2

您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。

于 2016-08-31T06:46:23.940 回答