Test for dynamic content in Glimmer2

tests/acceptance/wormhole-test.js

@@ -249,3 +249,21 @@ test('document-title example', function(assert) {
     assert.equal(document.title, 'ember-wormhole');
   });
 });
+
+// tests for dynamic content updates inside wormhole, which is failing with Glimmer2, see https://github.com/yapplabs/ember-wormhole/issues/66
+test('toggle modal overlay', function(assert) {
+  visit('/');
+  andThen(function() {
+    assert.equal(currentPath(), 'index');
+  });
+  click('button:contains(Toggle Modal)');
+  andThen(function() {
+    assert.equal($('#modals .overlay').length, 1, 'overlay is visible');
+    assert.equal($('#modals .dialog').length, 1, 'dialog is visible');
+  });
+  click('button:contains(Toggle Overlay)');
+  andThen(function() {
+    assert.equal($('#modals .overlay').length, 0, 'overlay is not visible');
+    assert.equal($('#modals .dialog').length, 1, 'dialog is still visible');
+  });
+});

tests/dummy/app/controllers/application.js

@@ -9,6 +9,7 @@ export default Ember.Controller.extend({
   isInPlace: false,
   isTestingDocumentTitle: false,
   favicon: "http://emberjs.com/images/favicon.png",
+  isShowingOverlay: true,
   actions: {
     toggleModal() {
       this.toggleProperty('isShowingModal');
@@ -25,6 +26,9 @@ export default Ember.Controller.extend({
     },
     toggleTitle() {
       this.toggleProperty('isTestingDocumentTitle');
+    },
+    toggleOverlay() {
+      this.toggleProperty('isShowingOverlay');
     }
   }
 });

tests/dummy/app/templates/application.hbs

@@ -48,12 +48,15 @@
     </label>
     {{#if isShowingModal}}
       {{#ember-wormhole to='modals'}}
+        {{#if isShowingOverlay}}
         <div class="overlay" {{action 'toggleModal'}}></div>
+        {{/if}}
         <div class="dialog">
           <h1>Hi, I'm a simple modal dialog</h1>
           <p>Here we have some content which is bound from the context
             where the wormhole component was used: "{{user.username}}"</p>
           <button {{action 'toggleModal'}}>Close</button>
+          <button {{action 'toggleOverlay'}}>Toggle Overlay</button>
         </div>
       {{/ember-wormhole}}
     {{/if}}