diff --git a/README.md b/README.md
index 1a49ada..8b11d76 100644
--- a/README.md
+++ b/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](tests/unit/components/component-that-uses-modal-dialog-test.js) for how to set this up in a unit test.
+
## Building
* `ember build`
diff --git a/tests/dummy/app/components/component-that-uses-modal-dialog.js b/tests/dummy/app/components/component-that-uses-modal-dialog.js
new file mode 100644
index 0000000..3f97ec5
--- /dev/null
+++ b/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);
+ }
+ }
+});
diff --git a/tests/dummy/app/templates/components/component-that-uses-modal-dialog.hbs b/tests/dummy/app/templates/components/component-that-uses-modal-dialog.hbs
new file mode 100644
index 0000000..de74bb2
--- /dev/null
+++ b/tests/dummy/app/templates/components/component-that-uses-modal-dialog.hbs
@@ -0,0 +1,9 @@
+ {{#if isShowingModalDialog}}
+ {{#modal-dialog}}
+
Stop! Modal Time!
+
+ {{/modal-dialog}}
+ {{/if}}
+
+
A component that has a modal dialog
+
\ No newline at end of file
diff --git a/tests/unit/components/component-that-uses-modal-dialog-test.js b/tests/unit/components/component-that-uses-modal-dialog-test.js
new file mode 100644
index 0000000..268e6dc
--- /dev/null
+++ b/tests/unit/components/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);
+});