Allow for hosted testing to override where third party frame is retri…

…eved from (ampproject#5890)

* Allow for hosted testing to override where third party frame is retrieved from

* test my own site

* fix ava tests

DEVELOPING.md

@@ -51,6 +51,7 @@ If you have any questions, feel free to ask on the issue or join us on [Slack](h
 | `gulp lint --watch`                                                     | Watches for changes in files, Validates against Google Closure Linter.|
 | `gulp lint --fix`                                                       | Fixes simple lint warnings/errors automatically.                      |
 | `gulp build`<sup>[[1]](#footnote-1)</sup>                               | Builds the AMP library.                                               |
+| `gulp build --fortesting`<sup>[[1]](#footnote-1)</sup>                  | Builds the AMP library and will read the AMP_TESTING_HOST environment variable to write out an override AMP_CONFIG. |
 | `gulp build --css-only`<sup>[[1]](#footnote-1)</sup>                    | Builds only the embedded css into js files for the AMP library.       |
 | `gulp clean`                                                            | Removes build output.                                                 |
 | `gulp css`                                                              | Recompile css to build directory.                                     |
@@ -127,6 +128,11 @@ For deploying and testing local AMP builds on [HEROKU](https://www.heroku.com/)
 
 Meantime, you can also use our automatic build on Heroku [link](http://amphtml-nightly.herokuapp.com/), which is normally built with latest head on master branch (please allow delay). The first time load is normally slow due to Heroku's free account throttling policy.
 
+To correctly get ads and third party working when testing on hosted services
+you will need set the `AMP_TESTING_HOST` environment variable. (On heroku this
+is done through
+`heroku config:set AMP_TESTING_HOST=my-heroku-subdomain.herokuapp.com`)
+
 ## Repository Layout
 <pre>
   3p/             - Implementation of third party sandbox iframes.

build-system/SERVING.md

@@ -52,6 +52,7 @@ rm /path/to/cdn/production/alp.js.bak
 # make sure and prepend the global production config to main binaries
 gulp prepend-global --target /path/to/cdn/production/v0.js --prod
 gulp prepend-global --target /path/to/cdn/production/alp.js --prod
+gulp prepend-global --target /path/to/3p/cdn/production/f.js --prod
 
 # The following commands below are optional if you want to host a similar
 # experiments page like https://cdn.ampproject.org/experiments.html

build-system/tasks/prepend-global/index.js

@@ -42,6 +42,9 @@ function sanityCheck(str) {
  * @return {!Promise}
  */
 function checkoutBranchConfigs(filename, opt_branch) {
+  if (argv.local) {
+    return Promise.resolve();
+  }
   var branch = opt_branch || 'origin/master';
   // One bad path here will fail the whole operation.
   return exec(`git checkout ${branch} ${filename}`)
@@ -61,7 +64,7 @@ function checkoutBranchConfigs(filename, opt_branch) {
  * @return {string}
  */
 function prependConfig(configString, fileString) {
-  return `window.AMP_CONFIG||(window.AMP_CONFIG=${configString});` +
+  return `self.AMP_CONFIG||(self.AMP_CONFIG=${configString});` +
     `/*AMP_CONFIG*/${fileString}`;
 }
 
@@ -93,7 +96,10 @@ function valueOrDefault(value, defaultValue) {
 }
 
 function main() {
-  if (!argv.target) {
+  var TESTING_HOST = process.env.AMP_TESTING_HOST;
+  var target = argv.target || TESTING_HOST;
+
+  if (!target) {
     util.log(util.colors.red('Missing --target.'));
     return;
   }
@@ -105,7 +111,6 @@ function main() {
 
   var globs = [].concat(argv.files).filter(x => typeof x == 'string');
   var branch = argv.branch;
-  var target = argv.target;
   var filename = '';
 
   // Prod by default.
@@ -152,6 +157,7 @@ gulp.task('prepend-global', 'Prepends a json config to a target file', main, {
         'Takes in an optional value for a custom prod config source.',
     'branch': '  Switch to a git branch to get config source from. ' +
         'Uses master by default.',
+    'local': '  Don\'t switch branches and use local config',
   }
 });
 

build-system/tasks/prepend-global/test.js

@@ -25,7 +25,7 @@ var targetFile = 'target-file.js';
 test('sync - prepends global config', t => {
   t.plan(1);
   var res = m.prependConfig('{"hello":"world"}', 'var x = 1 + 1;');
-  t.is(res, 'window.AMP_CONFIG||(window.AMP_CONFIG={"hello":"world"});' +
+  t.is(res, 'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"});' +
       '/*AMP_CONFIG*/var x = 1 + 1;');
 });
 
@@ -39,13 +39,13 @@ test('sync - valueOrDefault', t => {
 
 test('sync - sanityCheck', t => {
   t.plan(3);
-  var badStr = 'window.AMP_CONFIG||(window.AMP_CONFIG={"hello":"world"})' +
+  var badStr = 'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
       '/*AMP_CONFIG*/' +
-      'window.AMP_CONFIG||(window.AMP_CONFIG={"hello":"world"})' +
+      'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
       '/*AMP_CONFIG*/' +
       'var x = 1 + 1;';
   var badStr2 = 'var x = 1 + 1;';
-  var goodStr = 'window.AMP_CONFIG||(window.AMP_CONFIG={"hello":"world"})' +
+  var goodStr = 'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
       '/*AMP_CONFIG*/' +
       'var x = 1 + 1;';
   t.false(m.sanityCheck(badStr));

gulpfile.js

@@ -343,6 +343,18 @@ function buildExtensionJs(path, name, version, options) {
  * Main Build
  */
 function build() {
+  var TESTING_HOST = process.env.AMP_TESTING_HOST;
+  if (argv.fortesting && typeof TESTING_HOST == 'string') {
+    var AMP_CONFIG = {
+      thirdPartyFrameHost: TESTING_HOST,
+      thirdPartyFrameRegex: TESTING_HOST,
+      localDev: true,
+    };
+    console.log($$.util.colors.green('trying to write AMP_CONFIG.'));
+    fs.writeFileSync('node_modules/AMP_CONFIG.json',
+        JSON.stringify(AMP_CONFIG));
+    console.log($$.util.colors.green('AMP_CONFIG written successfully.'));
+  }
   process.env.NODE_ENV = 'development';
   polyfillsForTests();
   buildAlp();

package.json

@@ -19,7 +19,10 @@
     "lint": "gulp lint",
     "build": "gulp build",
     "dist": "gulp dist",
-    "heroku-postbuild": "gulp clean && gulp build && gulp dist --fortesting"
+    "heroku-postbuild": "npm run test-env-var && gulp clean && gulp build --fortesting && gulp dist --fortesting && npm run prepend-amp && npm run prepend-v0",
+    "test-env-var": "if [ -z \"${AMP_TESTING_HOST}\" ]; then echo \"ERROR: Please set the 'AMP_TESTING_HOST' environment variable. If you are in heroku this can be set by executing 'heroku config:set AMP_TESTING_HOST=my-heroku-subdomain.herokuapp.com' on the command line.\"; exit 1; fi",
+    "prepend-amp": "gulp prepend-global --prod node_modules/AMP_CONFIG.json --local --target dist/amp.js && gulp prepend-global --prod node_modules/AMP_CONFIG.json --local --target dist.3p/current/integration.js",
+    "prepend-v0": "gulp prepend-global --prod node_modules/AMP_CONFIG.json --local --target dist/v0.js && gulp prepend-global --prod node_modules/AMP_CONFIG.json --local --target dist.3p/current-min/f.js"
   },
   "dependencies": {
     "document-register-element": "1.1.1",

src/3p-frame.js

@@ -220,15 +220,19 @@ function getDefaultBootstrapBaseUrl(parentWindow) {
       return overrideBootstrapBaseUrl;
     }
     return getAdsLocalhost(parentWindow)
-        + '/dist.3p/current'
-        + (getMode().minified ? '-min/frame' : '/frame.max')
+        + '/dist.3p/'
+        + (getMode().minified ? '$internalRuntimeVersion$/frame'
+            : 'current/frame.max')
         + '.html';
   }
   return 'https://' + getSubDomain(parentWindow) +
       `.${urls.thirdPartyFrameHost}/$internalRuntimeVersion$/frame.html`;
 }
 
 function getAdsLocalhost(win) {
+  if (urls.localDev) {
+    return `http://${urls.thirdPartyFrameHost}`;
+  }
   return 'http://ads.localhost:'
       + (win.location.port || win.parent.location.port);
 }

src/config.js

@@ -23,13 +23,16 @@
  */
 const env = self.AMP_CONFIG || {};
 
-/** @type {!Object<string, string>} */
+const thirdPartyFrameRegex = typeof env['thirdPartyFrameRegex'] == 'string' ?
+    new RegExp(env['thirdPartyFrameRegex']) : env['thirdPartyFrameRegex'];
+
+/** @type {!Object<string, string|boolean|RegExp>} */
 export const urls = {
   thirdParty: env['thirdPartyUrl'] || 'https://3p.ampproject.net',
   thirdPartyFrameHost: env['thirdPartyFrameHost'] || 'ampproject.net',
-  thirdPartyFrameRegex: env['thirdPartyFrameRegex'] ||
-      /^d-\d+\.ampproject\.net$/,
+  thirdPartyFrameRegex: thirdPartyFrameRegex || /^d-\d+\.ampproject\.net$/,
   cdn: env['cdnUrl'] || 'https://cdn.ampproject.org',
   errorReporting: env['errorReportingUrl'] ||
       'https://amp-error-reporting.appspot.com/r',
+  localDev: env['localDev'] || false,
 };

src/mode.js

@@ -75,8 +75,12 @@ function getMode_(win) {
   // while IS_DEV is only replaced when the --fortesting flag is NOT used.
   const IS_DEV = true;
   const IS_MINIFIED = false;
+  const FORCE_LOCALDEV = !!(self.AMP_CONFIG && self.AMP_CONFIG.localDev);
+  const AMP_CONFIG_3P_FRAME_HOST = self.AMP_CONFIG &&
+      self.AMP_CONFIG.thirdPartyFrameHost;
 
   const isLocalDev = IS_DEV && !!(win.location.hostname == 'localhost' ||
+      (FORCE_LOCALDEV && win.location.hostname == AMP_CONFIG_3P_FRAME_HOST) ||
       (win.location.ancestorOrigins && win.location.ancestorOrigins[0] &&
         win.location.ancestorOrigins[0].indexOf('http://localhost:') == 0)) &&
       // Filter out localhost running against a prod script.