Component unit test example

README.md

@@ -206,6 +206,10 @@ View [the library](https://github.com/yapplabs/ember-key-responder) for more inf
 * `ember test`
 * `ember test --server`
 
+## Unit Tests
+
+When running unit tests on components that use ember-modal-dialog it is necessary to create and register the container for  ember-modal-dialog to wormhole itself into.  See this [example](https://github.com/yapplabs/ember-modal-dialog/tree/master/tests/unit/components/component-that-uses-modal-dialog-test.js) for how to set this up in a unit test.
+
 ## Building
 
 * `ember build`

tests/dummy/app/components/component-that-uses-modal-dialog.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  isShowingModalDialog: false,
+  actions: {
+    openModalDialog: function(){
+      this.set('isShowingModalDialog', true);
+    },
+    closeModalDialog: function(){
+      this.set('isShowingModalDialog', false);
+    }
+  }
+});

tests/dummy/app/templates/components/component-that-uses-modal-dialog.hbs

@@ -0,0 +1,9 @@
+  {{#if isShowingModalDialog}}
+    {{#modal-dialog}}
+      <h1>Stop! Modal Time!</h1>
+      <button class="close" {{action 'closeModalDialog'}}>Close</button>
+    {{/modal-dialog}}
+  {{/if}}
+
+  <h1>A component that has a modal dialog</h1>
+  <button class="open" {{action 'openModalDialog'}}>Open Dialog</button>

tests/unit/component/component-that-uses-modal-dialog-test.js

@@ -0,0 +1,44 @@
+import { test, moduleForComponent } from 'ember-qunit';
+/* global Ember */
+
+moduleForComponent('component-that-uses-modal-dialog', {
+  /*
+  * Setting up the container for the modal dialog to wormhole into and
+  * injecting the id of that element into the modal-dialog component
+  */
+  beforeEach: function(){
+    var modalContainerEl = document.createElement("div");
+    modalContainerEl.id = 'modal-overlays';
+    var rootEl = document.querySelector("#ember-testing");
+    rootEl.appendChild(modalContainerEl);
+    this.container.register('config:modals-container-id', 'modal-overlays', {instantiate: false});
+    this.container.injection('component:modal-dialog', 'destinationElementId', 'config:modals-container-id');
+  },
+  needs: [
+    'component:modal-dialog',
+    'component:ember-modal-dialog-positioned-container',
+    'component:ember-wormhole'
+  ]
+});
+
+test("it doesn't show component on start", function(assert){
+  assert.expect(1);
+
+  var component = this.subject();
+  // render the component
+  this.$();
+
+  // cannot use this.$ because the modal-dialog exists outside of the component
+  assert.equal(Ember.$('.ember-modal-dialog').length, 0);
+});
+
+test('it shows component when open modal clicked', function(assert){
+  assert.expect(1);
+
+  var component = this.subject();
+
+  this.$('button.open').click();
+
+  // cannot use this.$ because the modal-dialog exists outside of the component
+  assert.equal(Ember.$('.ember-modal-dialog').length, 1);
+});