From bd90b5704e05d8d539c05fcd620a16bd9293449b Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 31 Aug 2015 18:41:33 -0700
Subject: [PATCH] add `observeNodes` tests.

---
 src/lib/dom-api-mutation-content.html   |  23 +-
 src/lib/dom-api-mutation.html           |  64 ++--
 test/runner.html                        |   1 +
 test/unit/polymer-dom-observeNodes.html | 467 ++++++++++++++++++++++++
 4 files changed, 512 insertions(+), 43 deletions(-)
 create mode 100644 test/unit/polymer-dom-observeNodes.html

diff --git a/src/lib/dom-api-mutation-content.html b/src/lib/dom-api-mutation-content.html
index f458046eb4..5683c4b52e 100644
--- a/src/lib/dom-api-mutation-content.html
+++ b/src/lib/dom-api-mutation-content.html
@@ -30,9 +30,7 @@
         return h;
       },
 
-      _ensureSetup: function(options) {
-        this._describeChanges = options && options.changes;
-      },
+      _ensureSetup: function(options) {},
 
       notify: function() {
         if (this._hasListeners()) {
@@ -41,7 +39,7 @@
       },
 
       _notify: function() {
-        var info = this._describeChanges ? this._calcChanges() : {};
+        var info = this._suspendChangeInfo ? {} : this._calcChanges();
         if (info) {
           info.target = this.node;
           this._callListeners(info);
@@ -79,19 +77,18 @@
 
     if (Settings.useShadow) {
       
-      var ensureSetup = DomApi.MutationContent.prototype._ensureSetup;
-
       Polymer.Base.extend(DomApi.MutationContent.prototype, {
         
         _ensureSetup: function(options) {
-          ensureSetup.call(this, options);
           this._trackAttributes = this._trackAttributes ||
-            options && options.attributes;
-          var root = this.domApi.getOwnerRoot();
-          var host = root && root.host;
-          if (host) {
-            this._observer = Polymer.dom(host).observeNodes(
-              this.notify.bind(this), {attributes: this._trackAttributes});
+            options.attributes;
+          if (!this._observer) {
+            var root = this.domApi.getOwnerRoot();
+            var host = root && root.host;
+            if (host) {
+              this._observer = Polymer.dom(host).observeNodes(
+                this.notify.bind(this), {attributes: this._trackAttributes});
+            }
           }
         },
 
diff --git a/src/lib/dom-api-mutation.html b/src/lib/dom-api-mutation.html
index 802355c693..830cad73fa 100644
--- a/src/lib/dom-api-mutation.html
+++ b/src/lib/dom-api-mutation.html
@@ -27,8 +27,11 @@
     DomApi.Mutation.prototype = {
 
       addListener: function(callback, options) {
+        options = options || {};
         this._ensureSetup(options);
-        return this._listeners.push({fn: callback, options: options});
+        var listener = {fn: callback, options: options};
+        this._notifyInitial(listener);
+        return this._listeners.push(listener);
       },
 
       removeListener: function(handle) {
@@ -39,7 +42,10 @@
       },
 
       _ensureSetup: function(options) {
-        this._observeContentElements(this.domApi.childNodes);
+        if (!this._isSetup) {
+          this._isSetup = true;
+          this._observeContentElements(this.domApi.childNodes);
+        }
       },
 
       _ensureCleanup: function() {}, // abstract
@@ -62,8 +68,8 @@
         }
       },
 
-      addAllNodes: function() {
-        if (this._hasListeners()) {
+      addAllNodes: function(force) {
+        if (this._hasListeners() || force) {
           var c$ = this.domApi.childNodes;
           if (c$.length) {
             for (var i=0, c; (i < c$.length) && (c=c$[i]); i++) {
@@ -93,6 +99,15 @@
         this._removedNodes = [];
       },
 
+      _notifyInitial: function(listener) {
+        var info = {
+          target: this.node,
+          addedNodes: this.domApi.childNodes,
+          removedNodes: []
+        };
+        this._callListener(listener, info);
+      },
+
       _updateContentElements: function(info) {
         this._observeContentElements(info.addedNodes);
         this._unobserveContentElements(info.removedNodes);
@@ -111,9 +126,7 @@
       },
 
       _observeContent: function(content) {
-        return Polymer.dom(content).observeNodes(this._notify.bind(this), {
-          changes: true
-        });
+        return Polymer.dom(content).observeNodes(this._notify.bind(this));
       },
 
       _unobserveContentElements: function(elements) {
@@ -136,42 +149,34 @@
         var o$ = this._listeners;
         for (var i=0, o; (i < o$.length) && (o=o$[i]); i++) {
           if (!filter || filter(o.options)) {
-            o.fn.call(this.node, info);
+            this._callListener(o, info);
           }
         }
+      },
+
+      _callListener: function(listener, info) {
+        return listener.fn.call(this.node, info);
       }
 
     };
 
     if (Settings.useShadow) {
 
+      var ensureSetup = DomApi.Mutation.prototype._ensureSetup;
+
       Polymer.Base.extend(DomApi.Mutation.prototype, {
         
         _ensureSetup: function(options) {
           this._trackAttributes = this._trackAttributes ||
-            options && options.attributes;
+            options.attributes;
           if (!this._observer) {
-            this._observer = 
-              new MutationObserver(this._notify.bind(this));
-            // make sure to notify initial state...
-            this._debouncer = Polymer.Debounce(this._debouncer, 
-              function() {
-                this._notify([{
-                  target: this.node, 
-                  addedNodes: this.domApi.childNodes.slice()
-                }]);
-              }
-            );
-            this._debouncer.context = this;
-            Polymer.dom.addDebouncer(this._debouncer);
+            this._observer = new MutationObserver(this._notify.bind(this));
             this._preflush = this._flush.bind(this);
-           
-          }
-          if (!this._hasListeners()) {
-             Polymer.dom.addPreflush(this._preflush);
-             // note: doing this > 1x is a no-op
-             this._observer.observe(this.node, {childList: true});
+            Polymer.dom.addPreflush(this._preflush);
+            // note: doing this > 1x is a no-op
+            this._observer.observe(this.node, {childList: true});
           }
+          ensureSetup.call(this, options);
         },
 
         _ensureCleanup: function() {
@@ -221,7 +226,6 @@
 
         _observeContent: function(content) {
           return Polymer.dom(content).observeNodes(this._notify.bind(this), {
-            changes: true, 
             attributes: this._trackAttributes
           });
         },
@@ -246,7 +250,7 @@
             this._attrObservers.set(element, new MutationObserver(
               function(mxns) {
                 self._callListeners(mxns, function(options) {
-                  return Boolean(options && options.attributes);
+                  return Boolean(options.attributes);
                 });
               }
             ));
diff --git a/test/runner.html b/test/runner.html
index 0d78dec54c..9245560776 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -33,6 +33,7 @@
       'unit/polymer-dom.html',
       'unit/polymer-dom-shadow.html',
       'unit/polymer-dom-content.html',
+      'unit/polymer-dom-observeNodes.html',
       'unit/bind.html',
       'unit/bind.html?dom=shadow',
       'unit/notify-path.html',
diff --git a/test/unit/polymer-dom-observeNodes.html b/test/unit/polymer-dom-observeNodes.html
new file mode 100644
index 0000000000..d1b6d99622
--- /dev/null
+++ b/test/unit/polymer-dom-observeNodes.html
@@ -0,0 +1,467 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+<body>
+
+  <dom-module id='test-static'>
+    <template>
+      <div>static</div>
+    </template>
+    <script>
+      Polymer({
+        is:'test-static'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content'>
+    <template>
+      [<content id="content"></content>]
+    </template>
+    <script>
+      Polymer({
+        is:'test-content'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content1'>
+    <template>
+      <test-content id="content"><content></content></test-content>
+    </template>
+    <script>
+      Polymer({
+        is:'test-content1'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content2'>
+    <template>
+      <test-content1 id="content"><content></content></test-content1>
+    </template>
+    <script>
+      Polymer({
+        is:'test-content2'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content3'>
+    <template>
+      <test-content2 id="content"><content></content></test-content2>
+    </template>
+    <script>
+      Polymer({
+        is:'test-content3'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content-attr'>
+    <template>
+      [<content id="content" select="[d]"></content>]
+    </template>
+    <script>
+      Polymer({
+        is:'test-content-attr'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content-attr1'>
+    <template>
+      <test-content-attr id="content"><content select="[c]"></content></test-content-attr>
+    </template>
+    <script>
+      Polymer({
+        is:'test-content-attr1'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content-attr2'>
+    <template>
+      <test-content-attr1 id="content"><content select="[b]"></content></test-content-attr1>
+    </template>
+    <script>
+      Polymer({
+        is:'test-content-attr2'
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content-attr3'>
+    <template>
+      <test-content-attr2 id="content"><content select="[a]"></content></test-content-attr2>
+    </template>
+    <script>
+      Polymer({
+        is:'test-content-attr3'
+      });
+    </script>
+  </dom-module>
+  
+
+  <test-content><div>A</div><div>B</div></test-content>
+
+  <test-static><div>static A</div><div>static B</div></test-static>
+
+<script>
+
+  suite('observeNodes', function() {
+
+    test('observe intial state of distributing element', function() {
+      var recordedA;
+      var el = document.querySelector('test-content');
+      Polymer.dom(el).observeNodes(function(info) {
+        recordedA = info;
+      });
+      Polymer.dom.flush();
+      assert.equal(recordedA.addedNodes.length, 2);
+      recordedA = null;
+      var recordedB;
+      Polymer.dom(el).observeNodes(function(info) {
+        recordedB = info;
+      });
+      Polymer.dom.flush();
+      assert.equal(recordedA, null);
+      assert.equal(recordedB.addedNodes.length, 2);
+    });
+
+    test('observe intial state of non-distributing element', function() {
+      var recordedA;
+      var el = document.querySelector('test-static');
+      Polymer.dom(el).observeNodes(function(info) {
+        recordedA = info;
+      });
+      Polymer.dom.flush();
+      assert.equal(recordedA.addedNodes.length, 2);
+      recordedA = null;
+      var recordedB;
+      Polymer.dom(el).observeNodes(function(info) {
+        recordedB = info;
+      });
+      Polymer.dom.flush();
+      assert.equal(recordedA, null);
+      assert.equal(recordedB.addedNodes.length, 2);
+    });
+
+    test('observe children changes to distributing element', function() {
+      var el = document.createElement('test-content');
+      document.body.appendChild(el);
+
+      var recorded;
+      var handle = Polymer.dom(el).observeNodes(function(info) {
+        recorded = info;
+      });
+      // add
+      var d = document.createElement('div');
+      var d1 = document.createElement('div');
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.removedNodes.length, 0);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // remove
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 0);
+      assert.equal(recorded.removedNodes.length, 2);
+      assert.equal(recorded.removedNodes[0], d);
+      assert.equal(recorded.removedNodes[1], d1);
+      // add
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // reset, unobserve and remove
+      recorded = null;
+      Polymer.dom(el).unobserveNodes(handle);
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded, null);
+      document.body.removeChild(el);
+    });
+
+    test('observe children changes to non-distributing element', function() {
+      var el = document.createElement('test-static');
+      document.body.appendChild(el);
+
+      var recorded;
+      var handle = Polymer.dom(el).observeNodes(function(info) {
+        recorded = info;
+      });
+      // add
+      var d = document.createElement('div');
+      var d1 = document.createElement('div');
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.removedNodes.length, 0);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // remove
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 0);
+      assert.equal(recorded.removedNodes.length, 2);
+      assert.equal(recorded.removedNodes[0], d);
+      assert.equal(recorded.removedNodes[1], d1);
+      // add
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // reset, unobserve and remove
+      recorded = null;
+      Polymer.dom(el).unobserveNodes(handle);
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded, null);
+      document.body.removeChild(el);
+    });
+
+    test('observe changes to distributed nodes without changes', function() {
+      var el = document.createElement('test-content');
+      document.body.appendChild(el);
+
+      var distributed;
+      var handle = Polymer.dom(el.$.content).observeNodes(function(info) {
+        distributed = Polymer.dom(info.target).getDistributedNodes();
+      });
+      // add
+      var d = document.createElement('div');
+      var d1 = document.createElement('div');
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(distributed.length, 2);
+      assert.equal(distributed[0], d);
+      // remove
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(distributed.length, 0);
+      // add
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(distributed.length, 2);
+      assert.equal(distributed[0], d);
+      assert.equal(distributed[1], d1);
+      // reset, unobserve and remove
+      distributed = null;
+      Polymer.dom(el.$.content).unobserveNodes(handle);
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(distributed, null);
+      document.body.removeChild(el);
+    });
+
+    test('observe changes to distributed nodes with changes', function() {
+      var el = document.createElement('test-content');
+      document.body.appendChild(el);
+
+      var recorded;
+      var handle = Polymer.dom(el.$.content).observeNodes(function(info) {
+        recorded = info;
+      });
+      // add
+      var d = document.createElement('div');
+      var d1 = document.createElement('div');
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.removedNodes.length, 0);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // remove
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 0);
+      assert.equal(recorded.removedNodes.length, 2);
+      assert.equal(recorded.removedNodes[0], d);
+      assert.equal(recorded.removedNodes[1], d1);
+      // add
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // reset, unobserve and remove
+      recorded = null;
+      Polymer.dom(el.$.content).unobserveNodes(handle);
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded, null);
+      document.body.removeChild(el);
+    });
+
+    test('observe effective children inside distributing element', function() {
+      var el = document.createElement('test-content1');
+      document.body.appendChild(el);
+
+      var recorded;
+      var handle = Polymer.dom(el.$.content).observeNodes(function(info) {
+        recorded = info;
+      });
+      // add
+      var d = document.createElement('div');
+      var d1 = document.createElement('div');
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.removedNodes.length, 0);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // remove
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 0);
+      assert.equal(recorded.removedNodes.length, 2);
+      assert.equal(recorded.removedNodes[0], d);
+      assert.equal(recorded.removedNodes[1], d1);
+      // add
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // reset, unobserve and remove
+      recorded = null;
+      Polymer.dom(el.$.content).unobserveNodes(handle);
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded, null);
+      document.body.removeChild(el);
+    });
+
+    test('observe effective children inside deep distributing element', function() {
+      var el = document.createElement('test-content3');
+      document.body.appendChild(el);
+
+      var recorded;
+      var content = el.$.content.$.content.$.content;
+      var handle = Polymer.dom(content).observeNodes(function(info) {
+        recorded = info;
+      });
+      // add
+      var d = document.createElement('div');
+      var d1 = document.createElement('div');
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.removedNodes.length, 0);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // remove
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 0);
+      assert.equal(recorded.removedNodes.length, 2);
+      assert.equal(recorded.removedNodes[0], d);
+      assert.equal(recorded.removedNodes[1], d1);
+      // add
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded.addedNodes.length, 2);
+      assert.equal(recorded.addedNodes[0], d);
+      assert.equal(recorded.addedNodes[1], d1);
+      // reset, unobserve and remove
+      recorded = null;
+      Polymer.dom(content).unobserveNodes(handle);
+      Polymer.dom(el).removeChild(d);
+      Polymer.dom(el).removeChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded, null);
+      document.body.removeChild(el);
+    });
+
+    test('observe effective children attr changes inside deep distributing element', function(done) {
+      var el = document.createElement('test-content-attr3');
+      document.body.appendChild(el);
+
+      var recorded;
+      var content = el.$.content.$.content.$.content;
+      var handle = Polymer.dom(content).observeNodes(function(info) {
+        recorded = info;
+      }, {attributes: true});
+      Polymer.dom(el).flush();
+      recorded = null;
+      // add
+      var d = document.createElement('div');
+      var d1 = document.createElement('div');
+      Polymer.dom(el).appendChild(d);
+      Polymer.dom(el).appendChild(d1);
+      Polymer.dom(el).flush();
+      assert.equal(recorded, null);
+      Polymer.dom(d).setAttribute('a', '');
+      Polymer.dom(d).setAttribute('b', '');
+      setTimeout(function() {
+        assert.equal(recorded, null);
+        Polymer.dom(d).setAttribute('c', '');
+        setTimeout(function() {
+          assert.equal(recorded.addedNodes.length, 1);
+          assert.equal(recorded.removedNodes.length, 0);        
+          assert.equal(recorded.addedNodes[0], d);
+          Polymer.dom(d).removeAttribute('c');
+          setTimeout(function() {
+            assert.equal(recorded.addedNodes.length, 0);
+            assert.equal(recorded.removedNodes.length, 1);        
+            assert.equal(recorded.removedNodes[0], d);
+            recorded = null;
+            Polymer.dom(content).unobserveNodes(handle);
+            Polymer.dom(d).setAttribute('c', '');
+            setTimeout(function() {
+              assert.equal(recorded, null);
+              document.body.removeChild(el);
+              done();
+            });
+          });
+        });
+      });
+    });
+  });
+
+</script>
+
+</body>
+</html>