1

Here is a basic component / integration test for ember-qunit. 

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('my-component', 'TODO: put something here', {
  integration: true
});

test('it renders', function(assert) {
  this.render(hbs`{{my-component}}`);

  console.log('This is the rendered element', this.$()[0]);
  assert.ok(false);
});

I have an ember-addon with a directory structure like this: 

addon/
.. components/
.... my-component/
...... component.js
...... style.less
...... template.hbs   
app/  
.. components/
.... my-component.js
...... component.js
tests/  
.. integration/  
.... components/  
...... my-component-test.js

How does ember determine where {{my-component}} is?

This is kind of in the same vein as this:
How does Ember-CLI precompile templates?

Edit 1

As per the comments, I've linked the regular app component to the addon component by just importing / exporting it. 

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

However, the console log only shows this: 

This is the rendered element <div id="ember234 class="ember-view">
                               <!---->
                             </div>
Community
  • 1
  • 1
shane
  • 246
  • 2
  • 17

1 Answers1

2

By convention.

Ember try to find a file named my-component under your app/components directory or app/components/templates directory or app/helpers directory.

If you define my-component under your addon/components directory, you need to re-define it under your app/components directory or tests/dummy/app/components directory such as:

export { default } from 'my-addon/components/my-component';
ykaragol
  • 6,139
  • 3
  • 29
  • 56
  • Two questions here. First, how do the other parts of a component figure in, like template and styles (updated file structure to include them) alongside the `component.js` in addons. Second, if the component is defined in `tests` and `app`, which does it default to? (Question updated to Edit 1) – shane Aug 30 '16 at 23:32
  • 1
    Do you import `layout` from your `component.js`? It seems you are not importing a template. Have a look at [this addon](https://github.com/tubitak-bilgem-yte/ember-contextual-table). It has integration tests. – ykaragol Aug 31 '16 at 06:32
  • I tried adding `import template from './template'; & layout: template to addon/components/my-component/component.js before to no avail unfortunately – shane Aug 31 '16 at 06:46
  • 1
    I like the addon link you have there. The primary differences I see are that the addon's component is broken into components/ and templates/ instead of my all-in-one approach. They also use block components {{#component}}, but I don' think that's my issue – shane Aug 31 '16 at 06:49
  • templates has to be under `app/templates` directory. – ykaragol Aug 31 '16 at 06:49