From 045dff7f3d97426d47cdc0fb6ada8380b1f53c5b Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Tue, 8 Sep 2020 16:21:21 -0400 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Add=20better=20validation=20to=20inter?= =?UTF-8?q?active=20components=20(#29863)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- ...lidator-amp-story-interactive-results.html | 8 + ...alidator-amp-story-interactive-results.out | 18 ++ ...validator-amp-story-interactive.protoascii | 191 ++++++++++++------ 3 files changed, 154 insertions(+), 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 index b4bba4299937..dc072eb3ac39 100644 --- 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"> + + + 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 index dce0b41247ea..cabb5723a37c 100644 --- 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 | | > ^~~~~~~~~ +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/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"> +| | | | diff --git a/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii b/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii index 4cba14bd465a..28a30e260536 100644 --- a/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii +++ b/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii @@ -29,24 +29,30 @@ tags: { # 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: { # @@ -54,30 +60,30 @@ tags: { # 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: { # 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: { # @@ -86,133 +92,192 @@ tags: { # 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" + } } }