Fix and enable e2e tests for AMPHTML ads FIE rendering mode (#23995)

* Lightbox e2e for fie. * Fix and enable e2e tests for a4a-fie. * Fix
ampproject · Aug 17, 2019 · d803fb3 · d803fb3
1 parent 33ca73f
commit d803fb3
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 27 deletions.
diff --git a/build-system/routes/a4a-envelopes.js b/build-system/routes/a4a-envelopes.js
@@ -18,6 +18,8 @@ const app = require('express').Router();
 const BBPromise = require('bluebird');
 const fs = BBPromise.promisifyAll(require('fs'));
 const request = require('request');
+const {replaceUrls} = require('../app-utils');
+const {SERVE_MODE} = process.env;
 
 // In-a-box envelope.
 // Examples:
@@ -99,11 +101,10 @@ app.use('/a4a(|-3p)/', (req, res) => {
   }
   adUrl = addQueryParam(adUrl, 'inabox', 1);
   fs.readFileAsync(process.cwd() + templatePath, 'utf8').then(template => {
-    res.end(
-      fillTemplate(template, adUrl, req.query)
-        .replace(/CHECKSIG/g, force3p || '')
-        .replace(/DISABLE3PFALLBACK/g, !force3p)
-    );
+    const content = fillTemplate(template, adUrl, req.query)
+      .replace(/CHECKSIG/g, force3p || '')
+      .replace(/DISABLE3PFALLBACK/g, !force3p);
+    res.end(replaceUrls(SERVE_MODE, content));
   });
 });
 

diff --git a/build-system/server-a4a-template.html b/build-system/server-a4a-template.html
@@ -5,8 +5,8 @@
   <title>A4A Envelope</title>
   <link rel="canonical" href="http://nonblocking.io/" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async src="/dist/amp.js"></script>
-  <script async custom-element="amp-ad" src="/dist/v0/amp-ad-0.1.max.js"></script>
+  <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>A4A Envelope</h1>
@@ -25,5 +25,6 @@ <h1>A4A Envelope</h1>
       src="AD_URL">
   </amp-ad>
 
+  <div style="background: #eee; overflow: hidden;; height: 100vh;"></div>
 </body>
 </html>
diff --git a/build-system/server-inabox-template.html b/build-system/server-inabox-template.html
@@ -9,9 +9,6 @@
     body {
       margin: 0;
     }
-    iframe {
-      border: 1px solid gray;
-    }
   </style>
 </head>
 <body>

diff --git a/build-system/tasks/e2e/describes-e2e.js b/build-system/tasks/e2e/describes-e2e.js
@@ -248,9 +248,7 @@ const envPresets = {
     AmpdocEnvironment.SHADOW_DEMO,
   ],
   'amp4ads-preset': [
-    // TODO(lannka): unskip this test. It passes locally but fails on Travis:
-    // https://travis-ci.org/ampproject/amphtml/jobs/570977015
-    // AmpdocEnvironment.A4A_FIE,
+    AmpdocEnvironment.A4A_FIE,
     AmpdocEnvironment.A4A_INABOX,
     AmpdocEnvironment.A4A_INABOX_FRIENDLY,
     AmpdocEnvironment.A4A_INABOX_SAFEFRAME,

diff --git a/extensions/amp-lightbox/0.1/test-e2e/test-amp-lightbox.js b/extensions/amp-lightbox/0.1/test-e2e/test-amp-lightbox.js
@@ -20,6 +20,7 @@ describes.endtoend(
     testUrl:
       'http://localhost:8000/test/fixtures/e2e/amp-lightbox/amp-lightbox.html',
     environments: 'ampdoc-amp4ads-preset',
+    experiments: ['amp-lightbox-a4a-proto'],
   },
   async env => {
     let controller;

diff --git a/extensions/amp-position-observer/0.1/test-e2e/test-amp-position-observer.js b/extensions/amp-position-observer/0.1/test-e2e/test-amp-position-observer.js
@@ -20,6 +20,7 @@ describes.endtoend(
     testUrl:
       'http://localhost:8000/test/fixtures/e2e/amp-position-observer/scrollbound-animation.html',
     environments: 'amp4ads-preset',
+    initialRect: {width: 800, height: 600},
   },
   async env => {
     let controller;

diff --git a/test/fixtures/e2e/amp-position-observer/scrollbound-animation.html b/test/fixtures/e2e/amp-position-observer/scrollbound-animation.html
@@ -9,8 +9,8 @@
   <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
   <script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
   <style amp-custom>
-    h1, h2, h3, h4 {
-      font-weight: normal;
+    body {
+      margin: 0;
     }
 
     amp-img img {
@@ -31,18 +31,6 @@
       border-radius: 10px;
       transform: rotate(-180deg)
     }
-
-    .spacer {
-      height: 70vh;
-      width: 100%;
-      background-image: -webkit-linear-gradient(#EEE 50%, white 50%);
-      background-image: linear-gradient(#EEE 50%, white 50%);
-      background-size: 100% 3em;
-    }
-
-    pre {
-      display: inline;
-    }
   </style>
   <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>