Observe colspan attribute changes on lazily stamped nodes

vaadin · Nov 2, 2018 · 10f6535 · 10f6535
1 parent b77b367
commit 10f6535
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 21 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -11,5 +11,8 @@
   "globals": {
     "Polymer": false,
     "Vaadin": false
+  },
+  "parserOptions": {
+    "ecmaVersion": 2017
   }
 }
diff --git a/src/vaadin-form-layout.html b/src/vaadin-form-layout.html
@@ -5,6 +5,7 @@
 -->
 
 <link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
 <link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
@@ -290,6 +291,7 @@
 
         disconnectedCallback() {
           this.__mutationObserver.disconnect();
+          this.__childObserver.disconnect();
         }
 
         _observeChildrenColspanChange() {
@@ -304,8 +306,12 @@
             });
           });
 
-          Array.from(this.children).forEach((child) => {
-            this.__mutationObserver.observe(child, mutationObserverConfig);
+          this.__childObserver = new Polymer.FlattenedNodesObserver(this, info => {
+            Array.from(info.addedNodes)
+              .filter(child => child.nodeType === Node.ELEMENT_NODE)
+              .forEach(child => {
+                this.__mutationObserver.observe(child, mutationObserverConfig);
+              });
           });
         }
 

diff --git a/test/form-layout.html b/test/form-layout.html
@@ -78,20 +78,47 @@
     </template>
   </test-fixture>
 
-  <test-fixture id="mutation">
+  <dom-module id="mutable-layout">
     <template>
-      <div>
-        <vaadin-form-layout>
-          <vaadin-form-item>
-            <label slot="label">Address</label>
+      <vaadin-form-layout>
+        <vaadin-form-item>
+          <label slot="label">Address</label>
+          <input class="full-width">
+        </vaadin-form-item>
+        <vaadin-form-item>
+          <label slot="label">First Name</label>
+          <input class="full-width" value="Jane">
+        </vaadin-form-item>
+        <template is="dom-repeat" items="[[items]]">
+          <vaadin-form-item colspan$="[[item.colspan]]">
+            <label slot="label">[[item.label]]</label>
             <input class="full-width">
           </vaadin-form-item>
-          <vaadin-form-item>
-            <label slot="label">First Name</label>
-            <input class="full-width" value="Jane">
-          </vaadin-form-item>
-        </vaadin-form-layout>
-      </div>
+        </template>
+      </vaadin-form-layout>
+    </template>
+    <script>
+      customElements.whenDefined('vaadin-form-layout').then(() => {
+        customElements.define('mutable-layout', class extends Polymer.Element {
+          static get is() {
+            return 'mutable-layout';
+          }
+          static get properties() {
+            return {
+              items: {
+                type: Array,
+                value: () => []
+              }
+            };
+          }
+        });
+      });
+    </script>
+  </dom-module>
+
+  <test-fixture id="mutation">
+    <template>
+      <mutable-layout></mutable-layout>
     </template>
   </test-fixture>
 
@@ -489,22 +516,37 @@
     describe('mutations', function() {
       let container, layout;
 
-      beforeEach(() => {
-        container = fixture('mutation');
-        layout = container.querySelector('vaadin-form-layout');
+      const nextRender = () => new Promise(resolve => {
+        Polymer.flush();
+        Polymer.RenderStatus.afterNextRender(container, resolve);
+      });
+
+      beforeEach(done => {
+        customElements.whenDefined('mutable-layout').then(() => {
+          container = fixture('mutation');
+          layout = container.shadowRoot.querySelector('vaadin-form-layout');
+          done();
+        });
       });
 
       function estimateEffectiveColspan(el) {
         return parseFloat(getParsedWidth(el).percentage) / (100 / 2);
       }
 
-      it('should update layout after updating a colspan attribute', done => {
+      it('should update layout after updating a colspan attribute', async() => {
         expect(estimateEffectiveColspan(layout.children[0])).to.be.closeTo(1, .1);
         layout.children[0].setAttribute('colspan', 2);
-        setTimeout(() => {
-          expect(estimateEffectiveColspan(layout.children[0])).to.be.closeTo(2, .1);
-          done();
-        });
+        await nextRender();
+        expect(estimateEffectiveColspan(layout.children[0])).to.be.closeTo(2, .1);
+      });
+
+      it('should update layout after updating a colspan attribute on the lazily stamped node', async() => {
+        container.push('items', {label: 'Email', colspan: 1});
+        await nextRender();
+        expect(estimateEffectiveColspan(layout.children[2])).to.be.closeTo(1, .1);
+        container.set('items.0.colspan', 2);
+        await nextRender();
+        expect(estimateEffectiveColspan(layout.children[2])).to.be.closeTo(2, .1);
       });
     });
   </script>