trigger amp-dom-update event on insert and replace

ampproject · Feb 27, 2017 · 38f7b2e · 38f7b2e
1 parent 4f5eeab
commit 38f7b2e
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 21 deletions.
diff --git a/build-system/server.js b/build-system/server.js
@@ -31,10 +31,6 @@ var url = require('url');
 
 app.use(bodyParser.json());
 
-app.use('/ping', function(req, res, next) {
-  res.end('pong');
-});
-
 app.use('/pwa', function(req, res, next) {
   var file;
   var contentType;
@@ -320,10 +316,10 @@ app.use('/examples/live-list-update.amp.(min|max).html', function(req, res) {
 });
 
 function liveListReplace(item) {
-  //item.setAttribute('data-update-time', Date.now());
-  //var itemContents = item.querySelectorAll('.content');
-  //itemContents[0].textContent = Math.floor(Math.random() * 10);
-  //itemContents[1].textContent = Math.floor(Math.random() * 10);
+  item.setAttribute('data-update-time', Date.now());
+  var itemContents = item.querySelectorAll('.content');
+  itemContents[0].textContent = Math.floor(Math.random() * 10);
+  itemContents[1].textContent = Math.floor(Math.random() * 10);
 }
 
 function liveListInsert(liveList, node) {

diff --git a/examples/live-list-update.amp.html b/examples/live-list-update.amp.html
@@ -91,7 +91,6 @@
   </style>
   <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
-  <script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
@@ -108,20 +107,42 @@
     <div items>
       <div id="list-item-2" data-sort-time="1462814963693">
         <div class="card">
-          <form method="POST"
-            target="_blank"
-            action-xhr="/form/echo-json/post">
-            <input type="submit" value="submit!"/>
-          </form>
+          <div class="side side-left">
+            <div class="logo">
+              <amp-img src="img/ampicon.png"
+                  layout="fixed" height="50" width="50">
+              </amp-img>
+            </div>
+            <div class="content">2</div>
+          </div>
+          <div class="side side-right">
+            <div class="content">2</div>
+            <div class="logo">
+              <amp-img src="img/ampicon.png"
+                  layout="fixed" height="50" width="50">
+              </amp-img>
+            </div>
+          </div>
         </div>
       </div>
       <div id="list-item-1" data-sort-time="1462814955597">
         <div class="card">
-          <form method="POST"
-            target="_blank"
-            action-xhr="/form/echo-json/post">
-            <input type="submit" value="submit!"/>
-          </form>
+          <div class="side side-left">
+            <div class="logo">
+              <amp-img src="img/ampicon.png"
+                  layout="fixed" height="50" width="50">
+              </amp-img>
+            </div>
+            <div class="content">2</div>
+          </div>
+          <div class="side side-right">
+            <div class="content">2</div>
+            <div class="logo">
+              <amp-img src="img/ampicon.png"
+                  layout="fixed" height="50" width="50">
+              </amp-img>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/extensions/amp-live-list/0.1/amp-live-list.js b/extensions/amp-live-list/0.1/amp-live-list.js
@@ -287,6 +287,9 @@ export class AmpLiveList extends AMP.BaseElement {
     const hasInsertItems = this.pendingItemsInsert_.length > 0;
     const hasTombstoneItems = this.pendingItemsTombstone_.length > 0;
 
+    const shouldSendAmpDomUpdateEvent = this.pendingItemsInsert_.length > 0 ||
+        this.pendingItemsReplace_.length > 0;
+
     let promise = this.mutateElement(() => {
 
       const itemsSlot = user().assertElement(this.itemsSlot_);
@@ -333,10 +336,14 @@ export class AmpLiveList extends AMP.BaseElement {
       // number of items to delete down to `data-max-items-per-page`.
       return this.removeOverflowItems_(itemsSlot);
       // TODO(erwinm, #3332) compensate scroll position here.
-    }).then(() => {
-      this.sendAmpDomUpdateEvent_();
     });
 
+    if (shouldSendAmpDomUpdateEvent) {
+      promise = promise.then(() => {
+        this.sendAmpDomUpdateEvent_();
+      });
+    }
+
     if (hasInsertItems) {
       promise = promise.then(() => {
         return this.viewport_.animateScrollIntoView(this.element);

diff --git a/extensions/amp-live-list/0.1/test/test-amp-live-list.js b/extensions/amp-live-list/0.1/test/test-amp-live-list.js
@@ -262,6 +262,67 @@ describe('amp-live-list', () => {
       liveList.buildCallback();
     });
 
+    it('sends amp-dom-update event on new items', () => {
+      buildElement(elem, dftAttrs);
+      liveList.buildCallback();
+      const spy = sandbox.spy(liveList, 'sendAmpDomUpdateEvent_' );
+      const fromServer1 = createFromServer([{id: 'id0'}]);
+      liveList.update(fromServer1);
+      return liveList.updateAction_().then(() => {
+        expect(spy).to.have.been.calledOnce;
+      });
+    });
+
+    it('sends amp-dom-update event on replace items', () => {
+      const child1 = document.createElement('div');
+      const child2 = document.createElement('div');
+      child1.setAttribute('id', 'id1');
+      child2.setAttribute('id', 'id2');
+      child1.setAttribute('data-sort-time', '123');
+      child2.setAttribute('data-sort-time', '124');
+      itemsSlot.appendChild(child1);
+      itemsSlot.appendChild(child2);
+      buildElement(elem, dftAttrs);
+      liveList.buildCallback();
+
+      const fromServer1 = createFromServer([
+        {id: 'id1', updateTime: 125},
+      ]);
+      const spy = sandbox.spy(liveList, 'sendAmpDomUpdateEvent_');
+      // We stub and restore to not trigger `update` calling `updateAction_`.
+      const stub = sinon.stub(liveList, 'updateAction_');
+      liveList.update(fromServer1);
+      stub.restore();
+      return liveList.updateAction_().then(() => {
+        expect(spy).to.have.been.calledOnce;
+      });
+    });
+
+    it('sends amp-dom-update event on tombstone items', () => {
+      const child1 = document.createElement('div');
+      const child2 = document.createElement('div');
+      child1.setAttribute('id', 'id1');
+      child2.setAttribute('id', 'id2');
+      child1.setAttribute('data-sort-time', '123');
+      child2.setAttribute('data-sort-time', '124');
+      itemsSlot.appendChild(child1);
+      itemsSlot.appendChild(child2);
+      buildElement(elem, dftAttrs);
+      liveList.buildCallback();
+
+      const fromServer1 = createFromServer([
+        {id: 'id1', tombstone: null},
+      ]);
+      const spy = sandbox.spy(liveList, 'sendAmpDomUpdateEvent_');
+      // We stub and restore to not trigger `update` calling `updateAction_`.
+      const stub = sinon.stub(liveList, 'updateAction_');
+      liveList.update(fromServer1);
+      stub.restore();
+      return liveList.updateAction_().then(() => {
+        expect(spy).to.not.have.been.called;
+      });
+    });
+
     it('validates children during update', () => {
       const update = document.createElement('div');
       const updateLiveListItems = document.createElement('div');