Fix #104 Toggling renderInPlace

yapplabs · Jun 14, 2018 · 5d996d2 · 5d996d2
1 parent f6bdea7
commit 5d996d2
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`
+    <div id="wormhole-destination-element"></div>
+    {{#ember-wormhole renderInPlace=renderInPlace destinationElementId="wormhole-destination-element"}}
+      <span id="wormhole-content">template block text</span>
+    {{/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');
 });