Install global submit listener only when amp-form extension is registered

extensions/amp-form/0.1/test/integration/test-integration-form.js

@@ -17,6 +17,7 @@
 import {AmpEvents} from '../../../../../src/amp-events';
 import {AmpForm, AmpFormService} from '../../amp-form';
 import {AmpMustache} from '../../../../amp-mustache/0.1/amp-mustache';
+import {installGlobalSubmitListenerForDoc} from '../../../../../src/document-submit';
 import {listenOncePromise} from '../../../../../src/event-helper';
 import {poll} from '../../../../../testing/iframe';
 import {registerExtendedTemplate} from
@@ -48,11 +49,20 @@ describes.realWin('AmpForm Integration', {
   beforeEach(() => {
     sandbox = env.sandbox;
     doc = env.win.document;
-    const scriptElement = document.createElement('script');
-    scriptElement.setAttribute('custom-template', 'amp-mustache');
-    doc.body.appendChild(scriptElement);
+
+    const mustache = document.createElement('script');
+    mustache.setAttribute('custom-template', 'amp-mustache');
+    doc.body.appendChild(mustache);
     registerExtendedTemplate(env.win, 'amp-mustache', AmpMustache);
+
+    const form = document.createElement('script');
+    form.setAttribute('custom-element', 'amp-form');
+    doc.head.appendChild(form);
+
     new AmpFormService(env.ampdoc);
+
+    // Wait for submit listener to be installed before starting tests.
+    return installGlobalSubmitListenerForDoc(env.ampdoc);
   });
 
   function getForm(config) {
@@ -133,13 +143,17 @@ describes.realWin('AmpForm Integration', {
 
       form.dispatchEvent(new Event('submit'));
       return fetch.then(() => {
+        // TODO(alabiaga): the recursive nature in comment below is because of
+        // the global submit listener via document-submit.js. This is no longer
+        // valid as the head doesn't have the script present.
+        // This should be fixed to test this behavior.
+
         // Due to recursive nature of 'on=submit:sameform.submit' we expect
         // the action handler to be called twice, the first time for the
         // actual user submission.
         // The second time in response to the `submit` event being triggered
         // and sameform.submit being invoked.
         expect(ampForm.handleSubmitAction_).to.have.been.calledTwice;
-
         // However, only the first invocation should be handled completely.
         // and any subsequent calls should be stopped early-on.
         expect(ampForm.handleXhrSubmit_).to.have.been.calledOnce;

src/document-submit.js

@@ -23,12 +23,22 @@ import {
 } from './url';
 import {Services} from './services';
 import {dev, user} from './log';
+import {isExtensionScriptInNode} from './element-service';
 
 /**
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
+ * @return {!Promise}
  */
 export function installGlobalSubmitListenerForDoc(ampdoc) {
-  ampdoc.getRootNode().addEventListener('submit', onDocumentFormSubmit_, true);
+  // Register global submit event listener only if the amp-form
+  // extension is used. Allowing the usage of native forms, otherwise.
+  return isExtensionScriptInNode(ampdoc, 'amp-form')
+      .then(ampFormInstalled => {
+        if (ampFormInstalled) {
+          ampdoc.getRootNode().addEventListener(
+              'submit', onDocumentFormSubmit_, true);
+        }
+      });
 }
 
 

src/element-service.js

@@ -203,6 +203,32 @@ export function extensionScriptsInNode(head) {
   return scripts;
 }
 
+/**
+ * Waits for body to be present then verifies that an extension script is
+ * present in head for installation.
+ * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
+ * @param {string} extensionId
+ * @return {!Promise<boolean>}
+ */
+export function isExtensionScriptInNode(ampdoc, extensionId) {
+  return ampdoc.whenBodyAvailable()
+      .then(() => {
+        return extensionScriptInNode(
+            ampdoc.getHeadNode(), extensionId);
+      });
+}
+
+/**
+ * Verifies that an extension script is present in head for
+ * installation.
+ * @param {HTMLHeadElement|Element|ShadowRoot} head
+ * @param {string} extensionId
+ * @private
+ */
+function extensionScriptInNode(head, extensionId) {
+  return extensionScriptsInNode(head).includes(extensionId);
+}
+
 /**
  * Waits for an extension if its script is present
  * @param {!Window} win
@@ -222,7 +248,7 @@ function waitForExtensionIfPresent(win, extension, head) {
 
   // TODO(jpettitt) investigate registerExtension to short circuit
   // the dom call in extensionScriptsInNode()
-  if (!extensionScriptsInNode(head).includes(extension)) {
+  if (!extensionScriptInNode(head, extension)) {
     return Promise.resolve();
   }
 

test/functional/test-document-submit.js

@@ -15,7 +15,7 @@
  */
 
 import {Services} from '../../src/services';
-import {onDocumentFormSubmit_} from '../../src/document-submit';
+import {installGlobalSubmitListenerForDoc, onDocumentFormSubmit_} from '../../src/document-submit';
 
 describe('test-document-submit onDocumentFormSubmit_', () => {
   let sandbox;
@@ -46,6 +46,49 @@ describe('test-document-submit onDocumentFormSubmit_', () => {
     sandbox.restore();
   });
 
+  describe('installGlobalSubmitListenerForDoc', () => {
+    let ampdoc;
+    let headNode;
+    let rootNode;
+    beforeEach(() => {
+      headNode = document.createElement('head');
+      rootNode = document.createElement('html');
+      ampdoc = {
+        getHeadNode: () => headNode,
+        getRootNode: () => rootNode,
+        whenBodyAvailable: () => Promise.resolve({}),
+      };
+    });
+
+    /**
+     * @param {string} extension
+     */
+    const createScript = extension => {
+      const script = document.createElement('script');
+      script.setAttribute('src',
+          'https://cdn.ampproject.org/v0/' + extension + '-0.1.js');
+      script.setAttribute('custom-element', extension);
+      return script;
+    };
+
+    it('should not register submit listener if amp-form is not registered.',
+        () => {
+          ampdoc.getHeadNode().appendChild(createScript('amp-list'));
+          sandbox.spy(rootNode, 'addEventListener');
+          return installGlobalSubmitListenerForDoc(ampdoc).then(() => {
+            expect(rootNode.addEventListener).not.to.have.been.called;
+          });
+        });
+
+    it('should register submit listener if amp-form extension is registered.',
+        () => {
+          ampdoc.getHeadNode().appendChild(createScript('amp-form'));
+          sandbox.spy(rootNode, 'addEventListener');
+          return installGlobalSubmitListenerForDoc(ampdoc).then(() => {
+            expect(rootNode.addEventListener).called;
+          });
+        });
+  });
 
   it('should check target and action attributes', () => {
     tgt.removeAttribute('action');

test/functional/test-element-service.js

@@ -21,6 +21,7 @@ import {
   getElementServiceIfAvailable,
   getElementServiceIfAvailableForDoc,
   getElementServiceIfAvailableForDocInEmbedScope,
+  isExtensionScriptInNode,
 } from '../../src/element-service';
 import {
   installServiceInEmbedScope,
@@ -330,6 +331,17 @@ describes.realWin('in single ampdoc', {
         expect(service).to.deep.equal({str: 'fake1'});
       });
     });
+
+    it('isExtensionScriptInNode', () => {
+      const extension = document.createElement('script');
+      extension.setAttribute('custom-element', 'amp-form');
+      extension.setAttribute('src', 'https://cdn.ampproject.org/v0/amp-form-0.1.js');
+      ampdoc.getHeadNode().appendChild(extension);
+      return isExtensionScriptInNode(ampdoc, 'amp-form')
+          .then(ampFormInstalled => {
+            expect(ampFormInstalled).to.equal(true);
+          });
+    });
   });
 });