Add two inabox visual diff tests (ampproject#22130)

* Add test for Inabox (fake) AMP Ad on AMP page and AMP Ad on non-AMP page * Add the hostscript bootstrap script to assets * Fix typo. * Try removing JS * OOPS * Reenable JS * Fill in the iframe's content to avoid executing JS on Percy.
PHCCorso · May 23, 2019 · 6b11422 · 6b11422
1 parent 9f09bd4
commit 6b11422
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 0 deletions.
diff --git a/examples/visual-tests/amp-ad/amp-ad.html b/examples/visual-tests/amp-ad/amp-ad.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <title>AMP Ad test</title>
+    <link rel="canonical" href="https://amp.dev/documentation/examples/introduction/hello_world/index.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  </head>
+  <body>
+    <h1>Example AMP creative on an AMP page </h1>
+      <amp-ad width="300" height="200"
+          type="fake"
+          id="i-amphtml-demo-id"
+          src="/examples/visual-tests/amp-ad/amp-creative.html">
+        <div placeholder>Loading...</div>
+        <div fallback>Could not display the fake ad :(</div>
+      </amp-ad>
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-ad/amp-ad.js b/examples/visual-tests/amp-ad/amp-ad.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+
+module.exports = {
+  'fill iframe content in srcdoc': async (page, name) => {
+    const adElement = await page.$("#i-amphtml-demo-id");
+    await adElement.$eval("iframe", el => {
+        el.srcdoc = el.contentDocument.documentElement.innerHTML;
+    });
+  },
+};
diff --git a/examples/visual-tests/amp-ad/amp-creative.html b/examples/visual-tests/amp-ad/amp-creative.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html ⚡4ads>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <meta name="amp4ads-id" content="vendor=doubleclick,type=impression-id,value=12345">
+  <style amp4ads-boilerplate>body{visibility:hidden}</style>
+  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <style amp-custom>
+    .left {
+      text-align: left;
+    }
+    .right {
+      text-align: right;
+    }
+  </style>
+</head>
+<body>
+  <div class="left">
+    <amp-img id="img-1" width="150" height="100"
+          src="/examples/visual-tests/picsum.photos/image1026_300x200.jpg">
+    </amp-img>
+  </div>
+  <div class="right">
+    <a href="https://google.com" target="_blank">
+      <amp-img id="img-2" width="150" height="100"
+          src="/examples/visual-tests/picsum.photos/image1026_300x200.jpg">
+      </amp-img>
+    </a>
+  </div>
+  <amp-pixel src="https://www.google.com/?cid=CLIENT_ID(a)"></amp-pixel>
+  <amp-analytics>
+    <script type="application/json">
+      {
+        "transport": {"beacon": false, "xhrpost": false},
+        "requests": {
+          "visibility": "/${type}?cid=CLIENT_ID(a)&elementX=${elementX}&elementY=${elementY}&elementWidth=${elementWidth}&elementHeight=${elementHeight}&totalTime=${totalTime}&totalVisibleTime=${totalVisibleTime}&maxContinuousVisibleTime=${maxContinuousVisibleTime}&loadTimeVisibility=${loadTimeVisibility}&backgrounded=${backgrounded}&backgroundedAtStart=${backgroundedAtStart}&firstSeenTime=${firstSeenTime}&lastSeenTime=${lastSeenTime}&firstVisibleTime=${firstVisibleTime}&lastVisibleTime=${lastVisibleTime}&minVisiblePercentage=${minVisiblePercentage}&maxVisiblePercentage=${maxVisiblePercentage}&intersectionRatio=${intersectionRatio}"
+        },
+        "triggers": {
+          "visible": {
+            "on": "visible",
+            "request": "visibility",
+            "vars": { "type": "visible" },
+            "parentPostMessage": "view"
+          },
+          "continuousVisible": {
+            "on": "visible",
+            "request": "visibility",
+            "visibilitySpec": {
+              "visiblePercentageMin": 0,
+              "continuousTimeMin": 1000
+            },
+            "vars": { "type": "rootVisible" },
+            "parentPostMessage": "activeview"
+          }
+        }
+      }
+    </script>
+  </amp-analytics>
+</body>
+</html>
diff --git a/examples/visual-tests/amp-ad/amp-inabox.html b/examples/visual-tests/amp-ad/amp-inabox.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>AMP Inabox Test</title>
+
+  <script>
+window.addEventListener('message', function(event) {
+  if ((event.data) == 'view') {
+    document.documentElement.classList.add('view');
+  }
+  if ((event.data) == 'activeview') {
+    document.documentElement.classList.add('activeview');
+  }
+});
+  </script>
+<body>
+  <h1>Example AMP creative on a non-AMP page</h1>
+  <iframe
+      frameBorder="0"
+      id="iframe"
+      src="/examples/visual-tests/amp-ad/amp-creative.html"
+      scrolling="no"
+      width="300" height="200">
+  </iframe>
+  <script src="/examples/inabox-tag-integration.js"></script>
diff --git a/examples/visual-tests/amp-ad/amp-inabox.js b/examples/visual-tests/amp-ad/amp-inabox.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+
+module.exports = {
+  'fill iframe content in srcdoc': async (page, name) => {
+    await page.$eval("#iframe", el => {
+        el.srcdoc = el.contentDocument.documentElement.innerHTML;
+    });
+  },
+};
diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests
@@ -32,6 +32,7 @@
   */
   "asset_globs": [
     "examples/visual-tests/**",
+    "examples/inabox-tag-integration.js"
   ],
 
   /**
@@ -691,6 +692,19 @@
       "url": "examples/visual-tests/amp-autocomplete/amp-autocomplete.amp.html",
       "name": "amp-autocomplete",
       "interactive_tests": "examples/visual-tests/amp-autocomplete/amp-autocomplete.js",
+    },
+    {
+      "url": "examples/visual-tests/amp-ad/amp-ad.html",
+      "name": "AMP ad",
+      "interactive_tests": "examples/visual-tests/amp-ad/amp-ad.js"
+    },
+    {
+      "url": "examples/visual-tests/amp-ad/amp-inabox.html",
+      "name": "AMP Inabox ad",
+      "loading_complete_selectors": [
+        ".view", ".activeview"
+      ],
+      "interactive_tests": "examples/visual-tests/amp-ad/amp-inabox.js"
     }
   ]
 }