Search code examples
ember-cli

How should I import a component from my addon into the addon's dummy test?

I'm writing an addon that defines a StickyHeaderListComponent under addon, and import it according to the Components section of the addons section of the guides.

I'd like to write some tests + use the dummy app, but the dummy app doesn't have access to {{sticky-header-list}}. How can I import it?

Solution

  • The app folder is merged into the application which consumes the addon during the build.
    So, The file sticky-header-list.js should be under app/components.
    Best practice is to write a mixin which will include the entire code of the component under addon/mixins

    // addon/mixins/sticky-header-list.js

export default Ember.Mixin.create({
  //Put all the component code here
});

    And the actual component will be

    // app/components/sticky-header-list.js

import StickyHeaderListMixin from '<your-addon-name>/mixins/sticky-header-list';
export default Ember.Component.extend(StickyHeaderListMixin);

    In that way, a developer that will install your addon can choose to use the mixin, since the component code is not available at dev time.
    The mixin will be importable under the path <your-addon-name>/mixins/sticky-header-list.js.
    You can see an example in my ember-cli-lightbox addon.