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

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

Here is the structure of my 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

The test file 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);
});

I link to my addon from app/ as well:

//app/components/my-component/component.js
export { default } from 'my-application/components/my-component/component'

Let's say that my component template looks something like this:

<!-- addon/components/my-component/template.hbs -->
<div class="foo"></div>

And let's say that my component's js file looks something like this:

//addon/components/my-component/component.js
import Ember from 'ember'
export default Ember.Component.extend({
    someProperty: 'someValue'
});

I would assume that the output of the console log would be:

<div id="ember234" class="ember-view>
    <div class="foo"></div>
</div>

But unfortunately the console in Qunit comes up with:

<div id="ember234" class="ember-view">
    <!---->
</div>

Is Ember just struggling to find my .hbs template? Other projects seem to do all their component tests with the standard grouping (ie having named component js files and template files rather than component.js and template.js).

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

This relates to another question I asked, but I thought it more appropriate to continue probing this testing issue here in a separate question.

How does ember-qunit render components in integration testing?

I also question if there is a specific way necessary to test this pod layout.

Solution

Your component.js has to import template as layout. You should do this:

//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'
});

I can suggest you to have a look at other addons' codes. Such as ember-contextual-table, ember-bootstrap.