Variable substitution tester (#26695)

* Var tester * Building Examples page * Clean up * Suggested changes
ampproject · Feb 14, 2020 · c081d05 · c081d05
1 parent ec7380b
commit c081d05
Show file tree

Hide file tree

Showing 5 changed files with 672 additions and 0 deletions.
diff --git a/build-system/server/app.js b/build-system/server/app.js
@@ -34,6 +34,12 @@ const upload = require('multer')();
 const pc = process;
 const autocompleteEmailData = require('./autocomplete-test-data');
 const runVideoTestBench = require('./app-video-testbench');
+const {
+  getVariableRequest,
+  runVariableSubstitution,
+  saveVariableRequest,
+  saveVariables,
+} = require('./variable-substitution');
 const {
   recaptchaFrameRequestHandler,
   recaptchaRouter,
@@ -755,6 +761,26 @@ app.use('/impression-proxy/', (req, res) => {
   // Or fake response with status 204 if viewer replaceUrl is provided
 });
 
+/**
+ * Acts in a similar fashion to /serve_mode_change. Saves
+ * analytics requests via /run-variable-substitution, and
+ * then returns the encoded/substituted/replaced request
+ * via /get-variable-request.
+ */
+
+// Saves the variables input to be used in run-variable-substitution
+app.get('/save-variables', saveVariables);
+
+// Creates an iframe with amp-analytics. Analytics request
+// uses save-variable-request as its endpoint.
+app.get('/run-variable-substitution', runVariableSubstitution);
+
+// Saves the analytics request to the dev server.
+app.get('/save-variable-request', saveVariableRequest);
+
+// Returns the saved analytics request.
+app.get('/get-variable-request', getVariableRequest);
+
 let forcePromptOnNext = false;
 app.post('/get-consent-v1/', (req, res) => {
   cors.assertCors(req, res, ['POST']);

diff --git a/build-system/server/variable-substitution.js b/build-system/server/variable-substitution.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright 2020 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.
+ */
+
+let url;
+let variableSubstitution;
+let variables;
+
+function saveVariables(req, res) {
+  const requestVariables = {};
+  // For when a JSON is entered
+  if (req.query && Object.keys(req.query).length === 2) {
+    const entries = Object.entries(req.query);
+    try {
+      Object.assign(requestVariables, JSON.parse(entries[1][0]));
+    } catch (e) {
+      res.send(`<!doctype html>
+      <html>
+      <head>
+          <title>AMP Analytics</title>
+      </head> 
+      <body>
+      <p>Error:</p>
+      ${e}
+      </body>
+      </html>`);
+      return;
+    }
+  } else {
+    // Remove variables that don't have values
+    const keys = Object.keys(req.query);
+    for (let i = 0; i < keys.length; i++) {
+      if (req.query[keys[i]]) {
+        requestVariables[keys[i]] = req.query[keys[i]];
+      }
+    }
+  }
+  variables = requestVariables;
+  res.json({'vars': variables});
+  return;
+}
+
+function runVariableSubstitution(req, res) {
+  variables = variables || {};
+  // Don't include the incremented number sent in to make a new request
+  const testParameters = Object.keys(req.query)
+    .map(value => {
+      return `${value}=${req.query[value]}`;
+    })
+    .slice(1)
+    .join('&');
+  res.send(`<!doctype html>
+    <html>
+    <head>
+      <title>AMP Analytics</title>
+      <link rel="canonical" href="analytics.amp.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-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+    </head> 
+    <body>
+    
+    <h3>'<amp-analytics>' request: </h3>
+      ${
+        testParameters
+          ? 'http://ads.localhost:8000/save-variable-request?' + testParameters
+          : 'N/A'
+      }
+
+    <amp-analytics>
+      <script type="application/json">
+        {
+            "requests": {
+              "endpoint": "http://ads.localhost:8000/save-variable-request?${testParameters}"
+            },
+            "triggers": {
+                "pageview": {
+                    "on": "visible",
+                    "request": "endpoint"
+                }
+            },
+            "vars": ${JSON.stringify(variables)},
+            "transport": {
+              "beacon": false,
+              "xhrpost": false,
+              "image": true
+            }
+          }
+      </script>
+    </amp-analytics>
+    </body>
+    </html>`);
+}
+
+function saveVariableRequest(req, res) {
+  res.setHeader('Access-Control-Allow-Credentials', true);
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET');
+  res.setHeader('Access-Control-Allow-Headers', 'text/plain');
+  variableSubstitution = req.query;
+  url = req.originalUrl;
+}
+
+function getVariableRequest(req, res) {
+  res.json({'Results': variableSubstitution, 'URL': url});
+  return;
+}
+
+module.exports = {
+  getVariableRequest,
+  runVariableSubstitution,
+  saveVariableRequest,
+  saveVariables,
+};
diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
@@ -54,6 +54,7 @@ const forbiddenTerms = {
     whitelist: [
       'build-system/server/amp4test.js',
       'build-system/server/app-index/boilerplate.js',
+      'build-system/server/variable-substitution.js',
       'build-system/tasks/extension-generator/index.js',
       'css/ampdoc.css',
       'css/ampshared.css',
@@ -1135,6 +1136,7 @@ const forbiddenTermsSrcInclusive = {
       'build-system/server/amp4test.js',
       'build-system/server/app-index/amphtml-helpers.js',
       'build-system/server/app-video-testbench.js',
+      'build-system/server/variable-substitution.js',
       'build-system/server/app.js',
       'build-system/server/app-utils.js',
       'build-system/server/shadow-viewer.js',