Skip to content

Commit

Permalink
✅ Custom Browser Event Tracker End-to-End Test (#35354)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalemuw
kalemuw committed Aug 5, 2021
1 parent 2c932b8 commit 127199d
Show file tree
Hide file tree
Showing 3 changed files with 258 additions and 0 deletions.
1 change: 1 addition & 0 deletions build-system/test-configs/config.js
View file
Expand Up @@ -384,6 +384,7 @@ const htmlFixtureGlobs = [
'!examples/xhr-intercept.html',
'!test/fixtures/e2e/amp-accordion/amp-accordion.html',
'!test/fixtures/e2e/amp-accordion/single-expand.html',
'!test/fixtures/e2e/amp-analytics/browser-events.html',
'!test/fixtures/e2e/amp-auto-lightbox/amp-auto-lightbox.html',
'!test/fixtures/e2e/amp-autocomplete/amp-autocomplete-inline.amp.html',
'!test/fixtures/e2e/amp-autocomplete/amp-autocomplete.amp.html',
Expand Down
87 changes: 87 additions & 0 deletions extensions/amp-analytics/0.1/test-e2e/test-browser-event.js
View file
@@ -0,0 +1,87 @@
/**
* Copyright 2021 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/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('#dropDown');
const blurredDropdown = await controller.findElement('#dropDown2');

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=dropDown2').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('#dropDown');

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(1000);
await expect('https://foo.com/event?type=change&eventId=dropDown').to.have
.been.sent;
});
}
);
170 changes: 170 additions & 0 deletions test/fixtures/e2e/amp-analytics/browser-events.html
View file
@@ -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="dropDown">
<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="dropDown2">
<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": "#dropDown",
"vars": {
"eventType": "change"
},
"extraUrlParams":{
"eventId": "dropDown"
}
},
"genericTrigger-3":{
"on": "blur",
"request": "event",
"selector": "#inputText2",
"vars": {
"eventType": "blur"
},
"extraUrlParams":{
"eventId": "inputText2"
}
},
"genericTrigger-4":{
"on": "blur",
"request": "event",
"selector": "#dropDown2",
"vars": {
"eventType": "blur"
},
"extraUrlParams":{
"eventId": "dropDown2"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>

0 comments on commit 127199d

Please sign in to comment.