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テンプレートを見つけるのに苦労しているだけですか? component.js他のプロジェクトは、すべてのコンポーネント テストを標準のグループ化で行っているようです (つまり、 andではなくコンポーネント js ファイルとテンプレート ファイルに名前を付けていますtemplate.js)。

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

これは私が行った別の質問に関連していますが、別の質問でこのテストの問題を調査し続ける方が適切だと思いました。

ember-qunit は統合テストでコンポーネントをどのようにレンダリングしますか?

また、このポッド レイアウトをテストするために必要な特定の方法があるかどうかについても質問します。

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 に答える