Skip pending request if new content is set

imported-template.html

@@ -33,6 +33,11 @@
 
         var ImportedTemplatePrototype = Object.create(JuicyHTMLElement.prototype);
 
+        /**
+         * Reference to pending (requested) HTMLLinkElement
+         * @type {HTMLLinkElement}
+         */
+        ImportedTemplatePrototype.pending = false;
         ImportedTemplatePrototype.scopedNodes = null;
 
         /**
@@ -47,7 +52,8 @@
             var link = document.createElement('link');
             link.rel = "import";
             link.href = href;
-            var xhtml = this;
+            var that = this;
+            this.pending = link;
             link.onload = function processImportedDocument() {
                 // protect yourself agains side-effect of
                 // https://github.com/webcomponents/webcomponentsjs/issues/470#issuecomment-261238583 workaround
@@ -61,9 +67,9 @@
                 var fragment, template;
                 var singleTemplate, singleFragment, nodes;
 
-                xhtml.scopedNodes = [];
-                xhtml.scopelessNodes = [];
-                xhtml.clear();
+                that.scopedNodes = [];
+                that.scopelessNodes = [];
+                that.clear();
 
                 // debugger
                 if (templates.length >= 1) {
@@ -80,17 +86,17 @@
                         nodes = Array.prototype.slice.call(singleFragment.childNodes);
                         if (singleTemplate.parentElement.tagName === "IMPORTED-TEMPLATE-SCOPE") {
                             nodes.scope = singleTemplate.parentElement.getAttribute("scope");
-                            xhtml.scopedNodes.push(nodes);
+                            that.scopedNodes.push(nodes);
                         } else {
-                            xhtml.scopelessNodes = xhtml.scopelessNodes.concat(nodes);
+                            that.scopelessNodes = that.scopelessNodes.concat(nodes);
                         }
                         fragment.appendChild(singleFragment);
 
                     }
 
                 } else if (this.import.body.childNodes.length === 0 && this.import.body.childNodes.length === 0){ // document is empty
                     console.warn('content given for imported-template (', this, ') is an empty document');
-                    xhtml.stampedNodes = null;
+                    that.stampedNodes = null;
                     return;
                 } else { //there is no template in the response.
                     // it could be a stack trace, or HTML document with some nodes (HTML imports or scripts) that should / should not get stamped
@@ -100,11 +106,11 @@
 
 
                 // convert dynamic NodeList to regullar array
-                xhtml.stampedNodes = Array.prototype.slice.call(fragment.childNodes);
+                that.stampedNodes = Array.prototype.slice.call(fragment.childNodes);
                 // dispatch event before stamping
-                xhtml.dispatchEvent(new CustomEvent('stamping', {detail: fragment}));
+                that.dispatchEvent(new CustomEvent('stamping', {detail: fragment}));
                 // attach models
-                xhtml.attributeChangedCallback("model", undefined, xhtml.model || xhtml.getAttribute("model"));
+                that.attributeChangedCallback("model", undefined, that.model || that.getAttribute("model"));
 
                 // Apply workaround for HTML Imports shim
                 // Workaround https://github.com/webcomponents/webcomponentsjs/issues/470
@@ -116,7 +122,7 @@
                     }
                 }
                 // Stamp tempalte into document
-                xhtml.parentNode.insertBefore(fragment, xhtml.nextSibling);
+                that.parentNode.insertBefore(fragment, that.nextSibling);
 
                 // Last bit of workaround
                 // https://github.com/webcomponents/webcomponentsjs/issues/470 workaround
@@ -133,6 +139,7 @@
                     //   HTMLImports.parser.addElementToDocument = originalAddElementToDocument;
                 }
 
+                this.pending = false;
             };
             // guessed workaround for StarcounterSamples/Launcher#82, Polymer/polymer#554, http://crbug.com/389566
             // TODO(tomalec): check if it's still required

test/index.html

@@ -18,6 +18,7 @@
         WCT.loadSuites([
         'juicy-html_inline.html',
         'juicy-html_no-content.html',
+        'juicy-html_skipping.html',
           'html-imports_behavior/per-template_scripts.html',
           'html-imports_behavior/per-import_script.html',
           'use-cases/previousElementSibling/previousElementSibling.html',

test/juicy-html_skipping.html

@@ -0,0 +1,67 @@
+<!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">
+</head>
+
+<body>
+
+    <!-- You can use the document as a place to set up your fixtures. -->
+    <test-fixture id="juicy-html-fixture">
+        <template>
+            <!-- nest to workaround test-fixture bug -->
+            <div><template is="imported-template">
+            </template></div>
+        </template>
+    </test-fixture>
+
+    <script>
+    describe('<juicy-html>', function() {
+        var myEl;
+        context('when skipStampingPendingFile method is called after request for file was send but before it responded', function() {
+            beforeEach(function() {
+                myEl = fixture('juicy-html-fixture').querySelector('template[is="imported-template"]');
+                myEl.setAttribute('content', '../examples/partials/basic.html');
+                myEl.skipStampingPendingFile();
+            });
+            it('should NOT stamp anything', function(done){
+                setTimeout(function(){
+                    expect(myEl.parentNode.childNodes.length).to.equal(1);
+                    expect(myEl.parentNode.childNodes[0]).to.equal(myEl);
+                    done();
+                }, 300);
+            });
+        });
+        context('when content property is changed', function() {
+            beforeEach(function() {
+                myEl = fixture('juicy-html-fixture').querySelector('template[is="imported-template"]');
+                myEl.setAttribute('content', '../examples/partials/basic.html');
+                sinon.spy(myEl, 'skipStampingPendingFile');
+            });
+            it('to another url, skipStampingPendingFile method should get called', function(){
+                myEl.setAttribute('content', '../examples/partials/concatenated.html');
+                expect(myEl.skipStampingPendingFile).to.be.calledOnce;
+            });
+            it('to a string, skipStampingPendingFile method should get called', function(){
+                myEl.setAttribute('content', 'blah');
+                expect(myEl.skipStampingPendingFile).to.be.calledOnce;
+            });
+            it('to `null`, skipStampingPendingFile method should get called', function(){
+                myEl.setAttribute('content', null);
+                expect(myEl.skipStampingPendingFile).to.be.calledOnce;
+            });
+        });
+    });
+    </script>
+
+</body>
+
+</html>