# Creating ember addon for integration tests - can't get file into tests

**URL:** <https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878>\
**Category:** Uncategorized\
**Created:** [September 30, 2015, 9:06am UTC](https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878 "2015-09-30T09:06:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\
**Post date:** [September 30, 2015, 9:06am UTC](https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878/1 "2015-09-30T09:06:24Z")

</div>

Apologies for the x post - I have put this on SO also.

I am trying to turn this:

> **[GitHub - JamesMGreene/qunit-assert-html: A QUnit plugin for assertion methods...](https://github.com/JamesMGreene/qunit-assert-html)**
>
> A QUnit plugin for assertion methods to compare two HTML strings for equality after a rigorous normalization process. - GitHub - JamesMGreene/qunit-assert-html: A QUnit plugin for assertion methods...

into an ember-cli-addon (

[GitHub - wayne-o/ember-cli-qunit-assert-html: ember-cli-qunit-assert-html](https://github.com/wayne-o/ember-cli-qunit-assert-html) )

I have read [https://gist.github.com/kristianmandrup/ae3174217f68a6a51ed5](https://gist.github.com/kristianmandrup/ae3174217f68a6a51ed5) which is great but I am stuck figuring out how to make the qunit-assert-html.min.js available in my tests.

All I have done so far is add the file to /vendor and then imported it inside index.js:

[https://github.com/wayne-o/ember-cli-qunit-assert-html/blob/master/index.js](https://github.com/wayne-o/ember-cli-qunit-assert-html/blob/master/index.js)

npm linking the add-on into my project successfully adds the /vendor/qunit-assert-html.min.js to my apps /vendor folder but I can’t figure out how to make that available in my integration tests.

Any help appreciated!

---

<div class="post-metadata">

**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\
**Post date:** [October 2, 2015, 5:33am UTC](https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878/2 "2015-10-02T05:33:25Z")

</div>

There’s a few ways to make dependencies available in your add-on: it’s either have to be a `bower_components` or `vendor`. Those are the ONLY two folders that you are allowed to include files from. It is possible to include `node_modules` or any other folder in your add-on, but there’s quite a few hoops to jump through to get there.

`bower_components` are standard installed through bower package manager, but because bower flattens dependency tree, your add-on has to instruct the dependent app to install it. You do this through a [default blueprint](http://www.ember-cli.com/extending/#default-blueprint). Don’t forget to add the dependency to your add-on’s bower.json too for dev purpose.

`vendor` follows the convention of `vendor/package/file.js`. I don’t think this is documented, but your vendor file MUST follow this convention for import to work correctly.

Including `node_modules` and other folders requires you to implement `treeFor*` hooks in your addon. These hooks are invoked by ember-cli to allow you to include additional broccoli trees in the build cycle. In order to include other folders, you have to use these hooks to move your files into the `vendor/` folder, then import it again in the included hook.

Hope that helps.

---

<div class="post-metadata">

**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\
**Post date:** [October 6, 2015, 10:06am UTC](https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878/3 "2015-10-06T10:06:22Z")

</div>

Nice one - thank you

---

<div class="post-metadata">

**Author:** ![andrew1](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/andrew1/32/10636_2.png) [@andrew1](https://discuss.emberjs.com/u/andrew1)\
**Post date:** [December 9, 2015, 5:43pm UTC](https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878/4 "2015-12-09T17:43:22Z")

</div>

I’m struggling with dependencies in an addon right now. Is there any documentation? This is a great summary but I need a little more help figuring out how to make all of the dependencies I’ll need play nice.

Thanks!

---

<div class="post-metadata">

**Author:** ![nmccready](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nmccready/32/13507_2.png) [@nmccready](https://discuss.emberjs.com/u/nmccready)\
**Post date:** [November 16, 2017, 4:29pm UTC](https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878/5 "2017-11-16T16:29:28Z")

</div>

Wayne can you please post back your findings and examples on getting this to work with integration tests? Thanks!

---

<div class="post-metadata">

**Author:** ![nmccready](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nmccready/32/13507_2.png) [@nmccready](https://discuss.emberjs.com/u/nmccready)\
**Post date:** [November 16, 2017, 4:38pm UTC](https://discuss.emberjs.com/t/creating-ember-addon-for-integration-tests-cant-get-file-into-tests/8878/6 "2017-11-16T16:38:23Z")

</div>

Actually, I found the answer finally.

> **[Abstracting Component Creation in Ember Component Integration Tests](https://codepen.io/danny-andrews/post/abstracting-component-creation-in-ember-component-integration-tests)**
>
> You can't use placeholders with the hbs helper, see this issue. But, you can opt to use Ember.HTMLBars.compile. Example: function renderComponent(opts = {}) { const { title = 'Title',...

in ember-cli-build.js file

```
'use strict';

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
    // Add options here
  });

  /*
    This build file specifies the options for the dummy test app of this
    addon, located in `/tests/dummy`
    This build file does *not* influence how the addon or the app using it
    behave. You most likely want to be modifying `./index.js` or app's build file
  */
  if (app.env === 'test') {
    app.import('vendor/ember/ember-template-compiler.js');
  }

  return app.toTree();
};

```