✨Add better validation to interactive components (#29863)

* Updated validator * Undo double quotes * Quizzes require option-{3/4}-text on correct * Updated validator result * Update validator-amp-story-interactive.protoascii * Added comment to validation test
ampproject · Sep 8, 2020 · 045dff7 · 045dff7
1 parent 1665f1d
commit 045dff7
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 63 deletions.
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html
@@ -70,6 +70,14 @@
           option-3-text="Uruguay" option-3-results-category="Bunny"
           option-4-text="Spain" option-4-results-category="Mouse">
         </amp-story-interactive-results>
+        <!-- Invalid: Threshold has to be specified as a number -->
+        <amp-story-interactive-results
+          id="threshold attributes"
+          option-1-text="France" option-1-results-category="Dog" option-1-results-threshold="100"
+          option-2-text="Spain" option-2-results-category="Cat" option-2-results-threshold="100"
+          option-3-text="Uruguay" option-3-results-category="Bunny" option-3-results-threshold="100"
+          option-4-text="Spain" option-4-results-category="Mouse" option-4-results-threshold="a">
+        </amp-story-interactive-results>
       </amp-story-grid-layer>
     </amp-story-page>
   </amp-story>

diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.out b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.out
@@ -52,6 +52,14 @@ FAIL
 |          <!-- Invalid: Results is missing all option-{1/2/3/4}-results-category attributes -->
 |          <amp-story-interactive-results
 >>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-3-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-3-image'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-3-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-3-text'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-4-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-4-image'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-4-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-4-text'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
 amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The mandatory attribute 'option-1-results-category' is missing in tag 'amp-story-interactive-results'. (see https://amp.dev/documentation/components/amp-story-interactive)
 >>         ^~~~~~~~~
 amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The mandatory attribute 'option-2-results-category' is missing in tag 'amp-story-interactive-results'. (see https://amp.dev/documentation/components/amp-story-interactive)
@@ -77,6 +85,16 @@ amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:65:8
 |            option-3-text="Uruguay" option-3-results-category="Bunny"
 |            option-4-text="Spain" option-4-results-category="Mouse">
 |          </amp-story-interactive-results>
+|          <!-- Invalid: Threshold has to be specified as a number -->
+|          <amp-story-interactive-results
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:74:8 The attribute 'option-4-results-threshold' in tag 'amp-story-interactive-results' is set to the invalid value 'a'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="threshold attributes"
+|            option-1-text="France" option-1-results-category="Dog" option-1-results-threshold="100"
+|            option-2-text="Spain" option-2-results-category="Cat" option-2-results-threshold="100"
+|            option-3-text="Uruguay" option-3-results-category="Bunny" option-3-results-threshold="100"
+|            option-4-text="Spain" option-4-results-category="Mouse" option-4-results-threshold="a">
+|          </amp-story-interactive-results>
 |        </amp-story-grid-layer>
 |      </amp-story-page>
 |    </amp-story>

diff --git a/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii b/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii
@@ -29,55 +29,61 @@ tags: {  # <amp-story-interactive-quiz>
   tag_name: "AMP-STORY-INTERACTIVE-QUIZ"
   requires_extension: "amp-story-interactive"
   mandatory_ancestor: "AMP-STORY-GRID-LAYER"
-  attr_lists: 'interactive-options-text-attrs'
-  attr_lists: 'interactive-options-confetti-attrs'
-  attr_lists: 'interactive-shared-configs-attrs'
+  attr_lists: "interactive-options-text-attrs"
+  attr_lists: "interactive-options-confetti-attrs"
+  attr_lists: "interactive-shared-configs-attrs"
   attrs: {
-    name: 'option-1-correct'
+    name: "option-1-correct"
     mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
   }
   attrs: {
-    name: 'option-2-correct'
+    name: "option-2-correct"
     mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
   }
   attrs: {
-    name: 'option-3-correct'
+    name: "option-3-correct"
     mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
+    trigger: {
+      also_requires_attr: "option-3-text"
+    }
   }
   attrs: {
-    name: 'option-4-correct'
+    name: "option-4-correct"
     mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
+    trigger: {
+      also_requires_attr: "option-4-text"
+    }
   }
 }
 tags: {  # <amp-story-interactive-poll>
   html_format: AMP
   tag_name: "AMP-STORY-INTERACTIVE-POLL"
   requires_extension: "amp-story-interactive"
   mandatory_ancestor: "AMP-STORY-GRID-LAYER"
-  attr_lists: 'interactive-options-text-attrs'
-  attr_lists: 'interactive-options-confetti-attrs'
-  attr_lists: 'interactive-options-results-category-attrs'
-  attr_lists: 'interactive-shared-configs-attrs'
+  attr_lists: "interactive-options-text-attrs"
+  attr_lists: "interactive-options-confetti-attrs"
+  attr_lists: "interactive-options-results-category-attrs"
+  attr_lists: "interactive-shared-configs-attrs"
 }
 tags: {  # <amp-story-interactive-binary-poll>
   html_format: AMP
   tag_name: "AMP-STORY-INTERACTIVE-BINARY-POLL"
   requires_extension: "amp-story-interactive"
   mandatory_ancestor: "AMP-STORY-GRID-LAYER"
-  attr_lists: 'interactive-shared-configs-attrs'
+  attr_lists: "interactive-shared-configs-attrs"
   attrs: {
-    name: 'option-1-text'
+    name: "option-1-text"
     mandatory: true
   }
   attrs: {
-    name: 'option-2-text'
+    name: "option-2-text"
     mandatory: true
   }
   attrs: {
-    name: 'option-1-confetti'
+    name: "option-1-confetti"
   }
   attrs: {
-    name: 'option-2-confetti'
+    name: "option-2-confetti"
   }
 }
 tags: {  # <amp-story-interactive-results>
@@ -86,133 +92,192 @@ tags: {  # <amp-story-interactive-results>
   requires_extension: "amp-story-interactive"
   mandatory_ancestor: "AMP-STORY-GRID-LAYER"
   attrs: {
-    name: 'option-1-results-category'
+    name: "option-1-results-category"
     mandatory: true
   }
   attrs: {
-    name: 'option-2-results-category'
+    name: "option-2-results-category"
     mandatory: true
   }
   attrs: {
-    name: 'option-3-results-category'
+    name: "option-3-results-category"
+  }
+  attrs: {
+    name: "option-4-results-category"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
+  }
+  attrs: {
+    name: "option-1-image"
+  }
+  attrs: {
+    name: "option-2-image"
+  }
+  attrs: {
+    name: "option-3-image"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
+  }
+  attrs: {
+    name: "option-4-image"
+    trigger: {
+      also_requires_attr: "option-4-results-category"
+    }
   }
   attrs: {
-    name: 'option-4-results-category'
+    name: "option-1-text"
   }
   attrs: {
-    name: 'option-1-image'
+    name: "option-2-text"
   }
   attrs: {
-    name: 'option-2-image'
+    name: "option-3-text"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
   }
   attrs: {
-    name: 'option-3-image'
+    name: "option-4-text"
+    trigger: {
+      also_requires_attr: "option-4-results-category"
+    }
   }
   attrs: {
-    name: 'option-4-image'
+    name: "option-1-results-threshold"
+    value_regex: "\d+[.\d+]?"
   }
   attrs: {
-    name: 'option-1-text'
+    name: "option-2-results-threshold"
+    value_regex: "\d+[.\d+]?"
   }
   attrs: {
-    name: 'option-2-text'
+    name: "option-3-results-threshold"
+    value_regex: "\d+[.\d+]?"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
   }
   attrs: {
-    name: 'option-3-text'
+    name: "option-4-results-threshold"
+    value_regex: "\d+[.\d+]?"
+    trigger: {
+      also_requires_attr: "option-4-results-category"
+    }
   }
   attrs: {
-    name: 'option-4-text'
+    name: "prompt-text"
   }
   attrs: {
-    name: 'prompt-text'
+    name: "theme"
+    value: "light"
+    value: "dark"
   }
   attrs: {
-    name: 'theme'
-    value: 'light'
-    value: 'dark'
+    name: "chip-style"
+    value: "flat"
+    value: "transparent"
   }
 }
 
 attr_lists: {
-  name: 'interactive-shared-configs-attrs'
+  name: "interactive-shared-configs-attrs"
   attrs: {
-    name: 'id'
+    name: "id"
     mandatory: true
   }
   attrs: {
-    name: 'prompt-text'
+    name: "prompt-text"
   }
   attrs: {
-    name: 'endpoint'
+    name: "endpoint"
     mandatory: true
     value_url: {
-      protocol: 'https'
+      protocol: "https"
       allow_relative: false
       allow_empty: false
     }
   }
   attrs: {
-    name: 'theme'
-    value: 'light'
-    value: 'dark'
+    name: "theme"
+    value: "light"
+    value: "dark"
   }
   attrs: {
-    name: 'chip-style'
-    value: 'shadow'
-    value: 'flat'
-    value: 'transparent'
+    name: "chip-style"
+    value: "shadow"
+    value: "flat"
+    value: "transparent"
   }
   attrs: {
-    name: 'prompt-size'
-    value: 'small'
-    value: 'medium'
-    value: 'large'
+    name: "prompt-size"
+    value: "small"
+    value: "medium"
+    value: "large"
   }
 }
 attr_lists: {
-  name: 'interactive-options-text-attrs'
+  name: "interactive-options-text-attrs"
   attrs: {
-    name: 'option-1-text'
+    name: "option-1-text"
     mandatory: true
   }
   attrs: {
-    name: 'option-2-text'
+    name: "option-2-text"
     mandatory: true
   }
   attrs: {
-    name: 'option-3-text'
+    name: "option-3-text"
   }
   attrs: {
-    name: 'option-4-text'
+    name: "option-4-text"
+    trigger: {
+      also_requires_attr: "option-3-text"
+    }
   }
 }
 attr_lists: {
-  name: 'interactive-options-confetti-attrs'
+  name: "interactive-options-confetti-attrs"
   attrs: {
-    name: 'option-1-confetti'
+    name: "option-1-confetti"
   }
   attrs: {
-    name: 'option-2-confetti'
+    name: "option-2-confetti"
   }
   attrs: {
-    name: 'option-3-confetti'
+    name: "option-3-confetti"
   }
   attrs: {
-    name: 'option-4-confetti'
+    name: "option-4-confetti"
   }
 }
 attr_lists: {
-  name: 'interactive-options-results-category-attrs'
+  name: "interactive-options-results-category-attrs"
   attrs: {
-    name: 'option-1-results-category'
+    name: "option-1-results-category"
+    trigger: {
+      also_requires_attr: "option-2-results-category"
+    }
   }
   attrs: {
-    name: 'option-2-results-category'
+    name: "option-2-results-category"
+    trigger: {
+      also_requires_attr: "option-1-results-category"
+    }
   }
   attrs: {
-    name: 'option-3-results-category'
+    name: "option-3-results-category"
+    trigger: {
+      also_requires_attr: "option-2-results-category"
+      also_requires_attr: "option-3-text"
+    }
   }
   attrs: {
-    name: 'option-4-results-category'
+    name: "option-4-results-category"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+      also_requires_attr: "option-4-text"
+    }
   }
 }