ampproject · dmanek · Aug 5, 2021 · Jul 22, 2021 · Jul 22, 2021 · Jul 26, 2021
diff --git a/extensions/amp-analytics/0.1/test-e2e/test-cbe.js b/extensions/amp-analytics/0.1/test-e2e/test-cbe.js
@@ -0,0 +1,87 @@
+/**
+ * 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.
+ */
+import {Key} from '../../../../build-system/tasks/e2e/e2e-types';
+
+describes.endtoend(
+  'custom browser events',
+  {
+    fixture: 'amp-analytics/custom-browser-events.html',
+    environments: ['single'],
+  },
+  (env) => {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    function sleep(ms) {
+      return new Promise((res) => setTimeout(res, ms));
+    }
+
+    it('click on input field to focus and then blur', async () => {
+      const focusedInputField = await controller.findElement('#inputText');
+      const blurredInputField = await controller.findElement('#inputText2');
+
+      await controller.click(blurredInputField);
+      await controller.click(focusedInputField);
+
+      // Sleep 1 second for the blur event to be sent
+      await sleep(1000);
+      await expect('https://foo.com/event?type=blur&eventId=inputText2').to.have
+        .been.sent;
+    });
+
+    it('click on dropdown menu to focus and then blur', async () => {
+      const focusedDropdown = await controller.findElement('#numChild');
+      const blurredDropdown = await controller.findElement('#numChild2');
+
+      await controller.click(blurredDropdown);
+      await controller.click(focusedDropdown);
+
+      // Sleep 1 second for the blur event to be sent
+      await sleep(1000);
+      await expect('https://foo.com/event?type=blur&eventId=numChild2').to.have
+        .been.sent;
+    });
+
+    it('change the content of the input field to trigger on change event', async () => {
+      const changedInputField = await controller.findElement('#inputText');
+
+      await controller.click(changedInputField);
+      await sleep(300);
+      await controller.type(changedInputField, 'test-text');
+      await controller.type(changedInputField, Key.Enter);
+
+      // Sleep 1 second for the change event to be sent
+      await sleep(1000);
+      await expect('https://foo.com/event?type=change&eventId=inputText').to
+        .have.been.sent;
+    });
+
+    it('change drop down option selected to trigger on change event', async () => {
+      const changedDropdown = await controller.findElement('#numChild');
+
+      await controller.click(changedDropdown);
+      await controller.type(changedDropdown, '1');
+      await controller.type(changedDropdown, Key.Enter);
+      // Sleep 1 second for the change event to be sent
+      await sleep(5000);
+      await expect('https://foo.com/event?type=change&eventId=numChild').to.have
+        .been.sent;
+    });
+  }
+);
diff --git a/test/fixtures/e2e/amp-analytics/custom-browser-events.html b/test/fixtures/e2e/amp-analytics/custom-browser-events.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Custom Browser Events</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-custom>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      font-size: 14px;
+    }
+
+    [fallback] {
+      display: block;
+      /* @alternative */ display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+    }
+
+    .main {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .main, h1, .wrap {
+      max-width: 960px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .input-container {
+      flex: 1;
+    }
+
+    .form-container {
+      flex: 1;
+    }
+
+    h1 {
+      font-weight: bold;
+      margin: 40px auto 20px;
+      font-size: 24px;
+    }
+
+  </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 custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script>
+  (self.AMP = self.AMP || []).push(function (AMP) {
+    AMP.toggleExperiment('analytics-browser-events', true);
+  });
+</script>
+</head>
+<body>
+  <div style="display: flex; flex-direction: column; height: 100vh">
+    <div>
+      <h1>Custom Browser Events</h1>
+      <h1>AMP Input</h1>
+      <div class="main">
+        <div class="input-container">
+          Enter any text: <input type="text" id="inputText">
+        </div>
+        <div class="input-container">
+          Enter any text: <input type="text" id="inputText2">
+        </div>
+      </div>
+    </div>
+    <div>
+      <h1>AMP Form</h1>
+      <div class="main">
+        <div class="form-container">
+          <form method="post"
+   class="p1"
+   action-xhr="wololo"
+   custom-validation-reporting="show-all-on-submit"
+   target="_top">
+   <label for="numChild">Child (0-17)</label>
+   <div class="custom-select sg__select-wrapper">
+     <select name="numChild" id="numChild">
+       <option data-vars-num-child="0" value="0">0</option>
+       <option data-vars-num-child="1" value="1">1</option>
+       <option data-vars-num-child="2" value="2">2</option>
+       <option data-vars-num-child="3" value="3">3</option>
+       <option data-vars-num-child="4" value="4">4</option>
+     </select>
+   </div>
+   <div class="custom-select sg__select-wrapper">
+     <select name="numChild2" id="numChild2">
+       <option data-vars-num-child="0" value="0">0</option>
+       <option data-vars-num-child="1" value="1">1</option>
+       <option data-vars-num-child="2" value="2">2</option>
+       <option data-vars-num-child="3" value="3">3</option>
+       <option data-vars-num-child="4" value="4">4</option>
+     </select>
+   </div>
+ </form>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <amp-analytics>
+    <script type="application/json">
+      {
+        "requests": {
+          "event": "https://foo.com/event?type=${eventType}"
+        },
+        "transport": {
+          "beacon": false,
+          "image": false,
+          "xhrpost": true
+        },
+        "triggers": {
+          "genericTrigger-1":{
+            "on": "change",
+            "request": "event",
+            "selector": "#inputText",
+            "vars": {
+              "eventType": "change"
+            },
+            "extraUrlParams":{
+                "eventId": "inputText"
+            }
+          },
+          "genericTrigger-2":{
+            "on": "change",
+            "request": "event",
+            "selector": "#numChild",
+            "vars": {
+              "eventType": "change"
+            },
+            "extraUrlParams":{
+                "eventId": "numChild"
+            }
+          },
+          "genericTrigger-3":{
+            "on": "blur",
+            "request": "event",
+            "selector": "#inputText2",
+            "vars": {
+              "eventType": "blur"
+            },
+            "extraUrlParams":{
+                "eventId": "inputText2"
+            }
+          },
+          "genericTrigger-4":{
+            "on": "blur",
+            "request": "event",
+            "selector": "#numChild2",
+            "vars": {
+              "eventType": "blur"
+            },
+            "extraUrlParams":{
+                "eventId": "numChild2"
+            }
+          }
+        }
+      }
+    </script>
+  </amp-analytics>
+</body>
+</html>