test that the import is renderred correctly when removed and reattach…

…ed to DOM (#26) currently fails
Juicy · Jan 17, 2017 · 23269f8 · 23269f8
1 parent 77b998e
commit 23269f8
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 1 deletion.
diff --git a/test/index.html b/test/index.html
@@ -23,7 +23,8 @@
           'use-cases/previousElementSibling/previousElementSibling.html',
           'use-cases/dom-bind/dom-bind.html',
           'use-cases/dom-bind/dom-repeat.html',
-          'use-cases/dom-bind/notify-dom-bind.html'
+          'use-cases/dom-bind/notify-dom-bind.html',
+          'use-cases/dom-manipulation/reattach.html'
         ]);
     </script>
 </body>

diff --git a/test/use-cases/dom-manipulation/reattach.html b/test/use-cases/dom-manipulation/reattach.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../../web-component-tester/browser.js"></script>
+
+    <!-- Step 1: import the element to test -->
+    <link rel="import" href="../../../imported-template.html">
+    <link href="../../../../polymer/polymer.html" rel="import" />
+</head>
+
+<body>
+
+    <!-- https://github.com/PolymerElements/test-fixture/issues/24#issuecomment-169811731 -->
+    <test-fixture id="imported-template-fixture">
+        <template>
+            <div>
+                <h1>outside dom-bind</h1>
+                <template is="dom-bind" id="externalDomBind">
+                    <div>inside dom-bind</div>
+                    <template is="imported-template" model="{{model}}" content="./reattach.import.html"></template>
+                </template>
+            </div>
+        </template>
+    </test-fixture>
+    <!--  -->
+    <script>
+        describe('reattach parent to DOM', function() {
+            var myElContainer;
+            var externalDomBind;
+            var statefulModel;
+            // placeholder for globals
+
+            beforeEach(function(done) {
+                statefulModel = {
+                    works: "works ok"
+                };
+                myElContainer = fixture('imported-template-fixture');
+                setTimeout(function waitForTestFixtureStamp() {
+                    externalDomBind = myElContainer.querySelector('#externalDomBind');
+                    externalDomBind.model = statefulModel;
+                    //wait for dom-bind stamp
+                    setTimeout(done, 100);
+                }, 100);
+
+            });
+
+            context('regular HTML node', function() {
+                it('should render once and only once', function(done) {
+                    var parent = myElContainer.parentNode;
+                    expect(parent.querySelectorAll(".regular").length).to.equal(1);
+                    parent.removeChild(myElContainer);
+                    expect(parent.querySelectorAll(".regular").length).to.equal(0);
+                    parent.appendChild(myElContainer);
+                    setTimeout(function waitForStamp() {
+                        expect(parent.querySelectorAll(".regular").length).to.equal(1);
+                        done();
+                    }, 500);
+                });
+            });
+
+            context('dom-bind HTML node', function() {
+                it('should render once and only once', function(done) {
+                    var parent = myElContainer.parentNode;
+                    expect(parent.querySelectorAll(".bound").length).to.equal(1);
+                    parent.removeChild(myElContainer);
+                    expect(parent.querySelectorAll(".bound").length).to.equal(0);
+                    parent.appendChild(myElContainer);
+                    setTimeout(function waitForStamp() {
+                        expect(parent.querySelectorAll(".bound").length).to.equal(1);
+                        done();
+                    }, 500);
+                });
+            });
+
+            context('dom-if HTML node', function() {
+                it('should render once and only once', function(done) {
+                    var parent = myElContainer.parentNode;
+                    expect(parent.querySelectorAll(".conditional").length).to.equal(1);
+                    parent.removeChild(myElContainer);
+                    expect(parent.querySelectorAll(".conditional").length).to.equal(0);
+                    parent.appendChild(myElContainer);
+                    setTimeout(function waitForStamp() {
+                        expect(parent.querySelectorAll(".conditional").length).to.equal(1);
+                        done();
+                    }, 500);
+                });
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/test/use-cases/dom-manipulation/reattach.import.html b/test/use-cases/dom-manipulation/reattach.import.html
@@ -0,0 +1,9 @@
+<template>
+    <div class="regular">Regular div</div>
+    <template is="dom-bind">
+        <div class="bound">Bound div {{model.works}}</div>
+        <template is="dom-if" if="{{model.works}}">
+            <div class="conditional">Conditional div {{model.works}}</div>
+        </template>
+    </template>
+</template>