Experiment-protect form custom-validations. (ampproject#5424)

ooyala · Nov 30, 2016 · 4af3bb1 · 4af3bb1
1 parent 3325426
commit 4af3bb1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/extensions/amp-form/0.1/form-validators.js b/extensions/amp-form/0.1/form-validators.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {isExperimentOn} from '../../../src/experiments';
 import {ValidationBubble} from './validation-bubble';
 
 
@@ -336,16 +337,18 @@ export class AsYouGoValidator extends AbstractCustomValidator {
  * @return {!FormValidator}
  */
 export function getFormValidator(form) {
-  const customValidation = form.getAttribute(
-      'custom-validation-reporting');
-
-  switch (customValidation) {
-    case CustomValidationTypes.AsYouGo:
-      return new AsYouGoValidator(form);
-    case CustomValidationTypes.ShowAllOnSubmit:
-      return new ShowAllOnSubmitValidator(form);
-    case CustomValidationTypes.ShowFirstOnSubmit:
-      return new ShowFirstOnSubmitValidator(form);
+  const win = form.ownerDocument.defaultView;
+  if (isExperimentOn(win, 'amp-form-custom-validations')) {
+    const customValidation = form.getAttribute(
+        'custom-validation-reporting');
+    switch (customValidation) {
+      case CustomValidationTypes.AsYouGo:
+        return new AsYouGoValidator(form);
+      case CustomValidationTypes.ShowAllOnSubmit:
+        return new ShowAllOnSubmitValidator(form);
+      case CustomValidationTypes.ShowFirstOnSubmit:
+        return new ShowFirstOnSubmitValidator(form);
+    }
   }
 
   if (isReportValiditySupported(form.ownerDocument)) {

diff --git a/extensions/amp-form/0.1/test/test-form-validators.js b/extensions/amp-form/0.1/test/test-form-validators.js
@@ -26,6 +26,7 @@ import {
   ShowFirstOnSubmitValidator,
 } from '../form-validators';
 import {ValidationBubble} from '../validation-bubble';
+import {toggleExperiment} from '../../../../src/experiments';
 
 
 describe('form-validators', () => {
@@ -45,6 +46,13 @@ describe('form-validators', () => {
     });
   }
 
+  function getTestingIframe() {
+    return createIframePromise().then(iframe => {
+      toggleExperiment(iframe.win, 'amp-form-custom-validations', true);
+      return iframe;
+    });
+  }
+
   function getForm(doc = document, isCustomValidations = false) {
     const form = doc.createElement('form');
     form.setAttribute('method', 'POST');
@@ -100,7 +108,7 @@ describe('form-validators', () => {
 
   describe('getFormValidator', () => {
     it('should return default or polyfill instance', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc);
         setReportValiditySupported(true);
@@ -112,7 +120,7 @@ describe('form-validators', () => {
     });
 
     it('should return custom validator instances', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc);
         form.setAttribute('custom-validation-reporting', 'as-you-go');
@@ -131,7 +139,7 @@ describe('form-validators', () => {
 
   describe('DefaultValidator', () => {
     it('should reports form validity', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc);
         const validator = new DefaultValidator(form);
@@ -144,7 +152,7 @@ describe('form-validators', () => {
 
   describe('PolyfillDefaultValidator', () => {
     it('should reports form validity', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc);
         const validator = new PolyfillDefaultValidator(form);
@@ -159,7 +167,7 @@ describe('form-validators', () => {
     });
 
     it('should hide validation bubble onblur', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc);
         const validator = new PolyfillDefaultValidator(form);
@@ -170,7 +178,7 @@ describe('form-validators', () => {
     });
 
     it('should re-validate on input if is is actively reported', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc);
         const validator = new PolyfillDefaultValidator(form);
@@ -200,7 +208,7 @@ describe('form-validators', () => {
 
   describe('ShowFirstOnSubmitValidator', () => {
     it('should show first validation message', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc, true);
         const validations = doc.querySelectorAll('[visible-when-invalid]');
@@ -214,7 +222,7 @@ describe('form-validators', () => {
     });
 
     it('should not report on interaction for non-active inputs', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc, true);
         const validations = doc.querySelectorAll('[visible-when-invalid]');
@@ -233,7 +241,7 @@ describe('form-validators', () => {
     });
 
     it('should not report on interaction for non-active inputs', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc, true);
         const validations = doc.querySelectorAll('[visible-when-invalid]');
@@ -275,7 +283,7 @@ describe('form-validators', () => {
 
   describe('ShowAllOnSubmitValidator', () => {
     it('should show validation messages for all inputs', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc, true);
         const validations = doc.querySelectorAll('[visible-when-invalid]');
@@ -289,7 +297,7 @@ describe('form-validators', () => {
     });
 
     it('should not report on interaction for non-active inputs', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc, true);
         const validations = doc.querySelectorAll('[visible-when-invalid]');
@@ -308,7 +316,7 @@ describe('form-validators', () => {
     });
 
     it('should re-validate and report on interaction for active inputs', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc, true);
         const validations = doc.querySelectorAll('[visible-when-invalid]');
@@ -357,7 +365,7 @@ describe('form-validators', () => {
 
   describe('AsYouGoValidator', () => {
     it('should report validation for input on interaction', () => {
-      return createIframePromise().then(iframe => {
+      return getTestingIframe().then(iframe => {
         const doc = iframe.doc;
         const form = getForm(doc, true);
         const validations = doc.querySelectorAll('[visible-when-invalid]');

diff --git a/tools/experiments/experiments.js b/tools/experiments/experiments.js
@@ -111,6 +111,12 @@ const EXPERIMENTS = [
     spec: 'https://github.com/ampproject/amphtml/issues/3343',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/3998',
   },
+  {
+    id: 'amp-form-custom-validations',
+    name: 'AMP Form Custom Validations',
+    spec: 'https://github.com/ampproject/amphtml/issues/3343',
+    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/5423',
+  },
   {
     id: 'amp-google-vrview-image',
     name: 'AMP VR Viewer for images via Google VRView',