Rewrite some amp-bind integration tests

build-system/amp4test.js

@@ -160,21 +160,6 @@ app.get('/a4a/:bid', (req, res) => {
     res.setHeader('AMP-Access-Control-Allow-Source-Origin', sourceOrigin);
   }
   const {bid} = req.params;
-
-  const extensions = [
-    'amp-accordion',
-    'amp-analytics',
-    'amp-anim',
-    'amp-audio',
-    'amp-carousel',
-    'amp-fit-text',
-    'amp-font',
-    'amp-form',
-    'amp-social-share',
-  ];
-
-  const css = 'body { background-color: #f4f4f4; }';
-
   const body = `
   <a href=https://ampbyexample.com target=_blank>
     <amp-img alt="AMP Ad" height=250 src=//localhost:9876/amp4test/request-bank/${bid}/deposit/image width=300></amp-img>
@@ -210,8 +195,8 @@ app.get('/a4a/:bid', (req, res) => {
   const doc = composeDocument({
     spec: 'amp4ads',
     body,
-    css,
-    extensions,
+    css: 'body { background-color: #f4f4f4; }',
+    extensions: ['amp-analytics'],
     mode: 'cdn',
   });
   res.send(doc);
@@ -264,11 +249,13 @@ function composeDocument(config) {
   let extensionScripts = '';
   if (extensions) {
     extensionScripts = extensions.map(extension => {
+      const tuple = extension.split(':');
+      const name = tuple[0];
+      const version = tuple[1] || '0.1';
       const src = (cdn)
-        ? `https://cdn.ampproject.org/v0/${extension}-0.1.js`
-        // TODO: Version 0.1 is hard-coded. Use '-latest'?
-        : `/dist/v0/${extension}-0.1.${compiled ? '' : 'max.'}js`;
-      return `<script async custom-element="${extension}" src="${src}"></script>`;
+        ? `https://cdn.ampproject.org/v0/${name}-${version}.js`
+        : `/dist/v0/${name}-${version}.${compiled ? '' : 'max.'}js`;
+      return `<script async custom-element="${name}" src="${src}"></script>`;
     }).join('\n');
   }
 

examples/bind/list.amp.html

@@ -32,7 +32,7 @@
   <button on="tap:AMP.setState({src: otherFoods})">Show Other Foods</button>
 
   <hr>
-  
+
   <button on="tap:AMP.setState({
     src: [{
       name: 'pizza',

extensions/amp-mustache/0.1/amp-mustache.js

@@ -138,13 +138,15 @@ export class AmpMustache extends AMP.BaseTemplate {
   }
 }
 
-// First, unregister template with same type to avoid "Duplicate template type"
-// error due to multiple versions of amp-mustache in the same unit test run.
-// This is due to transpilation of test code to ES5 which uses require() and,
-// unlike import, causes side effects (AMP.registerTemplate) to be run.
-// For unit tests, it doesn't actually matter which version of amp-mustache is
-// registered. Integration tests should only have one script version included.
-if (getMode().test) {
-  Services.templatesFor(window).unregisterTemplate(TAG);
-}
-AMP.registerTemplate(TAG, AmpMustache);
+AMP.extension(TAG, '0.1', function(AMP) {
+  // First, unregister template to avoid "Duplicate template type"
+  // error due to multiple versions of amp-mustache in the same unit test run.
+  // This is due to transpilation of test code to ES5 which uses require() and,
+  // unlike import, causes side effects (AMP.registerTemplate) to be run.
+  // For unit tests, it doesn't actually matter which version of amp-mustache is
+  // registered. Integration tests should only have one script version included.
+  if (getMode().test) {
+    Services.templatesFor(window).unregisterTemplate(TAG);
+  }
+  AMP.registerTemplate(TAG, AmpMustache);
+});

extensions/amp-mustache/0.2/amp-mustache.js

@@ -22,6 +22,8 @@ import {iterateCursor, templateContentClone} from '../../../src/dom';
 import {purifyHtml, purifyTagsForTripleMustache} from '../../../src/purifier';
 import mustache from '../../../third_party/mustache/mustache';
 
+const TAG = 'amp-mustache';
+
 /**
  * Implements an AMP template for Mustache.js.
  * See {@link https://github.com/janl/mustache.js/}.
@@ -133,13 +135,15 @@ export class AmpMustache extends AMP.BaseTemplate {
   }
 }
 
-// First, unregister template with same type to avoid "Duplicate template type"
-// error due to multiple versions of amp-mustache in the same unit test run.
-// This is due to transpilation of test code to ES5 which uses require() and,
-// unlike import, causes side effects (AMP.registerTemplate) to be run.
-// For unit tests, it doesn't actually matter which version of amp-mustache is
-// registered. Integration tests should only have one script version included.
-if (getMode().test) {
-  Services.templatesFor(window).unregisterTemplate('amp-mustache');
-}
-AMP.registerTemplate('amp-mustache', AmpMustache);
+AMP.extension(TAG, '0.2', function(AMP) {
+  // First, unregister template to avoid "Duplicate template type"
+  // error due to multiple versions of amp-mustache in the same unit test run.
+  // This is due to transpilation of test code to ES5 which uses require() and,
+  // unlike import, causes side effects (AMP.registerTemplate) to be run.
+  // For unit tests, it doesn't actually matter which version of amp-mustache is
+  // registered. Integration tests should only have one script version included.
+  if (getMode().test) {
+    Services.templatesFor(window).unregisterTemplate(TAG);
+  }
+  AMP.registerTemplate(TAG, AmpMustache);
+});

extensions/amp-selector/0.1/test/test-amp-selector.js

@@ -15,6 +15,7 @@
  */
 
 import '../amp-selector';
+import {AmpEvents} from '../../../../src/amp-events';
 import {Keys} from '../../../../src/utils/key-codes';
 
 describes.realWin('amp-selector', {
@@ -32,54 +33,51 @@ describes.realWin('amp-selector', {
 
     function getSelector(options) {
       win = env.win;
+
       const attributes = options.attributes || {};
+      const config = options.config || {};
+
       const ampSelector = win.document.createElement('amp-selector');
       ampSelector.setAttribute('layout', 'container');
       Object.keys(attributes).forEach(key => {
         ampSelector.setAttribute(key, attributes[key]);
       });
 
-      const config = options.config || {};
-      let noOfSelectables = 3;
-      let selectedCount = 0;
-      let disabledCount = 0;
-      if (config) {
-        noOfSelectables = config.count || 3;
-        selectedCount = config.selectedCount || 0;
-        disabledCount = config.disabledCount || 0;
-      }
+      const numberOfChildren = config.count || 3;
+      let selectedCount = config.selectedCount || 0;
+      let disabledCount = config.disabledCount || 0;
 
-      for (let i = 0; i < noOfSelectables; i++) {
-        const img = win.document.createElement('div');
-        img.setAttribute('width', '10');
-        img.setAttribute('height', '10');
-        img.setAttribute('option', i);
+      for (let i = 0; i < numberOfChildren; i++) {
+        const child = win.document.createElement('div');
+        child.setAttribute('width', '10');
+        child.setAttribute('height', '10');
+        child.setAttribute('option', i);
 
-        if (noOfSelectables > selectedCount + disabledCount) {
+        if (numberOfChildren > selectedCount + disabledCount) {
           if (selectedCount > 0) {
-            img.setAttribute('selected', '');
+            child.setAttribute('selected', '');
             selectedCount--;
           } else if (disabledCount > 0) {
-            img.setAttribute('disabled', '');
+            child.setAttribute('disabled', '');
             disabledCount--;
           }
         } else {
           if (selectedCount > 0) {
-            img.setAttribute('selected', '');
+            child.setAttribute('selected', '');
             selectedCount--;
           }
           if (disabledCount > 0) {
-            img.setAttribute('disabled', '');
+            child.setAttribute('disabled', '');
             disabledCount--;
           }
         }
 
-        const optionAttributes = options.optionAttributes || {};
-        Object.keys(optionAttributes).forEach(key => {
-          img.setAttribute(key, optionAttributes[key]);
+        const childAttributes = options.optionAttributes || {};
+        Object.keys(childAttributes).forEach(key => {
+          child.setAttribute(key, childAttributes[key]);
         });
 
-        ampSelector.appendChild(img);
+        ampSelector.appendChild(child);
       }
       win.document.body.appendChild(ampSelector);
       return ampSelector;
@@ -923,7 +921,6 @@ describes.realWin('amp-selector', {
     });
 
     describe('keyboard-select-mode', () => {
-
       it('should have `none` mode by default', () => {
         const ampSelector = getSelector({});
         ampSelector.build();
@@ -1131,5 +1128,59 @@ describes.realWin('amp-selector', {
             .to.equal(0);
       });
     });
+
+    describe.only('on DOM_UPDATE', () => {
+      it('should refresh stored state if child DOM changes', () => {
+        const ampSelector = getSelector({
+          attributes: {
+            'keyboard-select-mode': 'focus',
+          },
+          config: {
+            count: 2,
+          },
+        });
+        ampSelector.build();
+        const impl = ampSelector.implementation_;
+        impl.mutateElement = fn => fn();
+
+        expect(ampSelector.children[0].hasAttribute('selected')).to.be.false;
+
+        // Add a new child after amp-selector initializes.
+        const newChild = env.win.document.createElement('div');
+        newChild.setAttribute('option', '3');
+        newChild.setAttribute('selected', '');
+        ampSelector.appendChild(newChild);
+        expect(ampSelector.children[2]).to.equal(newChild);
+
+        expect(ampSelector.children[0].tabIndex).to.equal(0);
+        expect(ampSelector.children[1].tabIndex).to.equal(-1);
+        expect(ampSelector.children[2].tabIndex).to.equal(-1);
+
+        // Note that the newly added third child is ignored.
+        keyPress(ampSelector, Keys.LEFT_ARROW);
+        expect(ampSelector.children[0].tabIndex).to.equal(-1);
+        expect(ampSelector.children[1].tabIndex).to.equal(0);
+        expect(ampSelector.children[2].tabIndex).to.equal(-1);
+
+        const e = new CustomEvent(AmpEvents.DOM_UPDATE, {bubbles: true});
+        newChild.dispatchEvent(e);
+
+        // `newChild` should be focused since it has the 'selected' attribute.
+        expect(ampSelector.children[0].tabIndex).to.equal(-1);
+        expect(ampSelector.children[1].tabIndex).to.equal(-1);
+        expect(ampSelector.children[2].tabIndex).to.equal(0);
+
+        // Tabbing between children now works for `newChild`.
+        keyPress(ampSelector, Keys.LEFT_ARROW);
+        expect(ampSelector.children[0].tabIndex).to.equal(-1);
+        expect(ampSelector.children[1].tabIndex).to.equal(0);
+        expect(ampSelector.children[2].tabIndex).to.equal(-1);
+
+        keyPress(ampSelector, Keys.RIGHT_ARROW);
+        expect(ampSelector.children[0].tabIndex).to.equal(-1);
+        expect(ampSelector.children[1].tabIndex).to.equal(-1);
+        expect(ampSelector.children[2].tabIndex).to.equal(0);
+      });
+    });
   });
 });