diff --git a/addon/components/ember-wormhole.js b/addon/components/ember-wormhole.js index 87bc4cb..4294eb4 100644 --- a/addon/components/ember-wormhole.js +++ b/addon/components/ember-wormhole.js @@ -17,17 +17,26 @@ export default Component.extend({ */ to: alias('destinationElementId'), destinationElementId: null, - destinationElement: computed('destinationElementId', 'renderInPlace', function() { + destinationElement: null, + + _destination: computed('destinationElement', 'destinationElementId', 'renderInPlace', function() { let renderInPlace = this.get('renderInPlace'); if (renderInPlace) { return this._element; } - let id = this.get('destinationElementId'); - if (!id) { - return null; + + let destinationElement = this.get('destinationElement'); + if (destinationElement) { + return destinationElement; + } + let destinationElementId = this.get('destinationElementId'); + if (destinationElementId) { + return findElementById(this._dom, destinationElementId); } - return findElementById(this._dom, id); + // no element found + return null; }), + renderInPlace: false, /* @@ -66,15 +75,15 @@ export default Component.extend({ }); }, - _destinationDidChange: observer('destinationElement', function() { - var destinationElement = this._getDestinationElement(); + _destinationDidChange: observer('_destination', function() { + var destinationElement = this.get('_destination'); if (destinationElement !== this._wormholeHeadNode.parentNode) { run.schedule('render', this, '_appendToDestination'); } }), _appendToDestination() { - var destinationElement = this._getDestinationElement(); + var destinationElement = this.get('_destination'); if (!destinationElement) { var destinationElementId = this.get('destinationElementId'); if (destinationElementId) { @@ -111,12 +120,4 @@ export default Component.extend({ node = next; } while (node); }, - - _getDestinationElement() { - let renderInPlace = this.get('renderInPlace'); - if (renderInPlace) { - return this._element; - } - return this.get('destinationElement'); - } }); diff --git a/testem.js b/testem.js index 63d1edf..c6e391f 100644 --- a/testem.js +++ b/testem.js @@ -15,8 +15,10 @@ module.exports = { '--disable-gpu', '--headless', '--remote-debugging-port=0', - '--window-size=1440,900' - ] + '--window-size=1440,900', + // --no-sandbox is needed when running Chrome inside a container + process.env.TRAVIS ? '--no-sandbox' : null, + ].filter(Boolean) } } }; diff --git a/tests/acceptance/wormhole-test.js b/tests/acceptance/wormhole-test.js index 46efe67..0d14e3b 100644 --- a/tests/acceptance/wormhole-test.js +++ b/tests/acceptance/wormhole-test.js @@ -105,10 +105,10 @@ test('sidebar example in place', function(assert) { click('button:contains(Toggle In Place)'); andThen(function() { assert.contentNotIn('sidebar'); - assert.contentNotIn('othersidebar'); - assert.contentIn('example-sidebar'); + assert.contentIn('othersidebar'); + assert.contentNotIn('example-sidebar'); }); - click('#sidebarWormhole button:contains(Hide)'); + click('button:contains(Hide)'); andThen(function() { assert.contentNotIn('sidebar'); assert.contentNotIn('othersidebar'); diff --git a/tests/integration/components/ember-wormhole-test.js b/tests/integration/components/ember-wormhole-test.js index a2e0abc..a2274d1 100644 --- a/tests/integration/components/ember-wormhole-test.js +++ b/tests/integration/components/ember-wormhole-test.js @@ -41,4 +41,37 @@ test('if `renderInPlace` is truthy, the given `destinationElement` is ignored', let content = document.querySelector('#wormhole-content'); assert.notEqual(content.parentElement.id, 'wormhole-destination-element'); + + Ember.run(() => { + this.set('renderInPlace', false); + }); + + assert.equal(content.parentElement.id, 'wormhole-destination-element'); +}); + +test('can switch `renderInPlace` with `destinationElementId`', function(assert) { + this.renderInPlace = true; + + this.render(hbs` +
+ {{#ember-wormhole renderInPlace=renderInPlace destinationElementId="wormhole-destination-element"}} + template block text + {{/ember-wormhole}} + `); + + let content = document.querySelector('#wormhole-content'); + assert.notEqual(content.parentElement.id, 'wormhole-destination-element'); + + Ember.run(() => { + this.set('renderInPlace', false); + }); + + assert.equal(content.parentElement.id, 'wormhole-destination-element'); + + Ember.run(() => { + // switch back + this.set('renderInPlace', true); + }); + + assert.notEqual(content.parentElement.id, 'wormhole-destination-element'); });