Add runtime stamping tests around linking & unlinking effects.

Polymer · Sep 3, 2019 · 9e106d8 · 9e106d8
1 parent 5e1a8b6
commit 9e106d8
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 1 deletion.
diff --git a/lib/mixins/property-effects.js b/lib/mixins/property-effects.js
@@ -2866,7 +2866,7 @@ export const PropertyEffects = dedupingMixin(superClass => {
       // parent list, a template's `parent` reference is never removed, since
       // this is is determined by the tree structure and applied at
       // `applyTemplateInfo` time.
-      let templateInfo = dom.templateInfo;
+      const templateInfo = dom.templateInfo;
       const {previousSibling, nextSibling, parent} = templateInfo;
       if (previousSibling) {
         previousSibling.nextSibling = nextSibling;
@@ -2878,6 +2878,7 @@ export const PropertyEffects = dedupingMixin(superClass => {
       } else if (parent) {
         parent.lastChild = previousSibling;
       }
+      templateInfo.nextSibling = templateInfo.previousSibling = null;
       // Remove stamped nodes
       let nodes = templateInfo.childNodes;
       for (let i=0; i<nodes.length; i++) {

diff --git a/test/unit/property-effects-template.html b/test/unit/property-effects-template.html
@@ -162,6 +162,30 @@
 </script>
 </dom-module>
 
+<script type="module">
+  import { PolymerElement, html } from '../../polymer-element.js';
+  customElements.define('x-runtime-nested', class extends PolymerElement {
+    static get template() {
+      return html`<template id="t1">
+        <span>t1-[[prop1]]</span>
+        <template id="t2">
+          <span>t2-[[prop2]]</span>
+          <template id="t3">
+            <span>t3-[[prop3]]</span>
+          </template>
+        </template>
+      </template>`;
+    }
+    static get properties() {
+      return {
+        prop1: { value: 'prop1'},
+        prop2: { value: 'prop2'},
+        prop3: { value: 'prop3'}
+      };
+    }
+  });
+</script>
+
 <template id="custom-template">
   <x-special name="el1" special="attr1" binding="[[prop]]" on-event="handler"></x-special>
   <div name="el2" special="attr2">
@@ -707,6 +731,85 @@
 
 });
 
+suite('nested runtime template stamping', () => {
+
+  let el;
+
+  // Accumulates any spans that are stamped into a single ordered set; once
+  // added, a span is never removed, so we can test that updates stop happening
+  // when bound DOM is removed
+  const spans = new Set();
+  const accumulatedContent = () => {
+    Array.from(el.shadowRoot.querySelectorAll('span')).forEach(s => spans.add(s));
+    return Array.from(spans).map(e => e.textContent);
+  };
+
+  setup(() => {
+    el = document.createElement('x-runtime-nested');
+    document.body.appendChild(el);
+  });
+  teardown(() => {
+    document.body.removeChild(el);
+  });
+
+  test('nested stamping', () => {
+    // Stamp 1
+    const dom1 = el._stampTemplate(el.shadowRoot.querySelector('#t1'));
+    el.shadowRoot.appendChild(dom1);
+    assert.deepEqual(accumulatedContent(), ['t1-prop1']);
+    // Stamp 2
+    const dom2 = el._stampTemplate(el.shadowRoot.querySelector('#t2'));
+    el.shadowRoot.appendChild(dom2);
+    assert.deepEqual(accumulatedContent(), ['t1-prop1', 't2-prop2']);
+    // Stamp 3-1
+    const dom3_1 = el._stampTemplate(el.shadowRoot.querySelector('#t3'));
+    el.shadowRoot.appendChild(dom3_1);
+    assert.deepEqual(accumulatedContent(), ['t1-prop1', 't2-prop2', 't3-prop3']);
+    // Stamp 3_2
+    const dom3_2 = el._stampTemplate(el.shadowRoot.querySelector('#t3'));
+    el.shadowRoot.appendChild(dom3_2);
+    assert.deepEqual(accumulatedContent(), ['t1-prop1', 't2-prop2', 't3-prop3', 't3-prop3']);
+    // Stamp 3_3
+    const dom3_3 = el._stampTemplate(el.shadowRoot.querySelector('#t3'));
+    el.shadowRoot.appendChild(dom3_3);
+    assert.deepEqual(accumulatedContent(), ['t1-prop1', 't2-prop2', 't3-prop3', 't3-prop3', 't3-prop3']);
+    // Modify all
+    el.setProperties({
+      prop1: el.prop1 + '*',
+      prop2: el.prop2 + '*',
+      prop3: el.prop3 + '*'
+    });
+    assert.deepEqual(accumulatedContent(), ['t1-prop1*', 't2-prop2*', 't3-prop3*', 't3-prop3*', 't3-prop3*']);
+    // Remove 3-1 & modify all
+    el._removeBoundDom(dom3_1);
+    el.setProperties({
+      prop1: el.prop1 + '*',
+      prop2: el.prop2 + '*',
+      prop3: el.prop3 + '*'
+    });
+    assert.deepEqual(accumulatedContent(), ['t1-prop1**', 't2-prop2**', 't3-prop3*', 't3-prop3**', 't3-prop3**']);
+    // Remove 3-3 & modify all
+    el._removeBoundDom(dom3_3);
+    el.setProperties({
+      prop1: el.prop1 + '*',
+      prop2: el.prop2 + '*',
+      prop3: el.prop3 + '*'
+    });
+    assert.deepEqual(accumulatedContent(), ['t1-prop1***', 't2-prop2***', 't3-prop3*', 't3-prop3***', 't3-prop3**']);
+    // Stamp 3-4
+    const dom3_4 = el._stampTemplate(el.shadowRoot.querySelector('#t3'));
+    el.shadowRoot.appendChild(dom3_4);
+    assert.deepEqual(accumulatedContent(), ['t1-prop1***', 't2-prop2***', 't3-prop3*', 't3-prop3***', 't3-prop3**', 't3-prop3***']);
+    // Modify all
+    el.setProperties({
+      prop1: el.prop1 + '*',
+      prop2: el.prop2 + '*',
+      prop3: el.prop3 + '*'
+    });
+    assert.deepEqual(accumulatedContent(), ['t1-prop1****', 't2-prop2****', 't3-prop3*', 't3-prop3****', 't3-prop3**', 't3-prop3****']);
+  });
+});
+
 suite('template parsing hooks', () => {
 
   test('custom parsing', () => {