2

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.

Community
  • 1
  • 1
shane
  • 246
  • 2
  • 17
  • Even with the changes (and accepted answer), it appears that the inside of the rendered component is abstracted away when logged to the console. Maybe it's a jQuery thing. But does anybody know why it refuses to show more than `` when I can definitely search for `this.$('div')`? Perhaps that's another question – shane Aug 31 '16 at 18:40

1 Answers1

2

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.

ykaragol
  • 6,139
  • 3
  • 29
  • 56
  • 1
    This ended up working for me, with a few caveats. I changed layout to import from `./templates` and changed my `app/components/my-component/component.js` to `export { default } from 'my-application/components/my-component/component'`. Now I can do `this.$('div')` and find results. Awesome! (updated the mentioned `component.js` file above too! – shane Aug 31 '16 at 18:03
  • 1
    Above comment should be `./template`. (sorry, 5 minute edit window) – shane Aug 31 '16 at 18:09