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); +});