Skip to content

Commit 7684471

Browse files
author
Matej Lednicky
committed
feat(DIST-301): Add functional tests for behavioral triggers from DIST-193
Test embeds created via embed code and API
1 parent 6c96f76 commit 7684471

File tree

16 files changed

+447
-61
lines changed

16 files changed

+447
-61
lines changed

‎.travis.yml

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,16 @@ jobs:
5151
if: branch = master
5252
script:
5353
- yarn test:unit
54-
- name: "Functional Tests (Internal)"
54+
- name: "Functional Tests Chrome (Internal)"
5555
if: fork = false AND branch = master
5656
script:
5757
- yarn serve-demo & export EMBED_PID=$!
5858
- yarn test:functional:chrome --record --parallel --group functional-chrome
59+
- kill $EMBED_PID
60+
- name: "Functional Tests Firefox (Internal)"
61+
if: fork = false AND branch = master
62+
script:
63+
- yarn serve-demo & export EMBED_PID=$!
5964
- yarn test:functional:firefox --record --parallel --group functional-firefox
6065
- kill $EMBED_PID
6166
- name: "Functional Tests (External)"

‎demo/behavioral-api/exit-api.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Open: exit (via API)</title>
5+
<link rel="stylesheet" href="../demo.css" />
6+
<style>
7+
#visual-threshold {
8+
position: fixed;
9+
top: 0;
10+
left: 0;
11+
width: 100%;
12+
height: 50px;
13+
background: rgba(255,0,0,0.2);
14+
pointer-events: none;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="visual-threshold"></div>
20+
<h1>This popup opens on exit intent (via API)</h1>
21+
<p>If a user wants to navigate away from your page, they usually need to access the browser toolbar.</p>
22+
<p>We detect mouse movement in top part of the page - if the mouse is moving "up", we open the popup.</p>
23+
<p>The popup is opened only once (on first detected exit intent).</p>
24+
25+
<h2>Technical stuff</h2>
26+
<p>This is not available for customization on "Share" page, but the embed lib allows it.</p>
27+
<form action="" method="get">
28+
<label for="threshold">Pixels from top</label>
29+
<input id="threshold" name="threshold" type="number" value="50" step="10" min="10" max="250" />
30+
<button type="submit">Set</button>
31+
</form>
32+
33+
<script type="text/javascript" src="../embed.js"></script>
34+
<script>
35+
const param = window.location.search.match(/threshold=(\d+)/)
36+
const thresholdValue = param ? parseInt(param[1], 10) : 50;
37+
38+
document.getElementById('threshold').value = thresholdValue;
39+
document.getElementById('visual-threshold').style.height = thresholdValue + 'px';
40+
41+
window.typeformEmbed.makePopup(
42+
'../form/mock.html#foobar=hello',
43+
{
44+
mode: 'popup',
45+
open: 'exit',
46+
openValue: thresholdValue
47+
}
48+
)
49+
</script>
50+
</body>
51+
</html>

‎demo/behavioral-api/load-api.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Open: load (via API)</title>
5+
<link rel="stylesheet" href="../demo.css" />
6+
</head>
7+
<body>
8+
<h1>This popup opens on page load (via API)</h1>
9+
<p>If you see this you very likely already closed the popup.</p>
10+
<p>If the popup did not open automatically something is broken.</p>
11+
12+
<script type="text/javascript" src="../embed.js"></script>
13+
<script>
14+
window.typeformEmbed.makePopup(
15+
'../form/mock.html#foobar=hello',
16+
{
17+
mode: 'popup',
18+
open: 'load',
19+
}
20+
)
21+
</script>
22+
</body>
23+
</html>

‎demo/behavioral-api/scroll-api.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Open: scroll (via API)</title>
5+
<link rel="stylesheet" href="../demo.css" />
6+
<style>
7+
.scroll-indicator {
8+
position: fixed;
9+
top: 0;
10+
right: 0;
11+
text-align: right;
12+
padding: 20px;
13+
background: black;
14+
color: white;
15+
}
16+
.lorem-ipsum {
17+
opacity: 0.25;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<div class="scroll-indicator">
23+
The popup will open at <span id="percent">30</span>%<br/>
24+
You scrolled <span id="scroll-pixels">0</span>px, that is <span id="scroll-percentage">0.00</span>% of the page
25+
</div>
26+
<h1>This popup opens on scroll - at <span id="percent-title">30</span>% (via API)</h1>
27+
<p>The popup is opened automatically when you scroll past given percentage of the page height.</p>
28+
<p>The popup is opened only once (when you scroll past the given percentage for the first time).</p>
29+
30+
<h2>Customize the percentage</h2>
31+
<p>This can be set on "Share" page as well.</p>
32+
<form action="" method="get">
33+
<label for="threshold">Percent</label>
34+
<input id="threshold" name="percent" type="number" value="30" step="10" min="10" />
35+
<button type="submit">Set</button>
36+
</form>
37+
38+
<script type="text/javascript" src="../embed.js"></script>
39+
<script>
40+
document.addEventListener('scroll', function() {
41+
const offsetTop = window.pageYOffset || document.documentElement.scrollTop
42+
const clientTop = document.documentElement.clientTop || 0
43+
const scrollTopPixels = offsetTop - clientTop
44+
const scrollTopPercentage = scrollTopPixels / document.body.clientHeight * 100
45+
document.getElementById('scroll-pixels').innerHTML = scrollTopPixels;
46+
document.getElementById('scroll-percentage').innerHTML = (Math.round(scrollTopPercentage * 100) / 100).toFixed(2);
47+
})
48+
49+
const param = window.location.search.match(/percent=(\d+)/)
50+
const percent = param ? parseInt(param[1], 10) : 30;
51+
52+
document.getElementById('threshold').value = percent;
53+
document.getElementById('percent').innerHTML = percent;
54+
document.getElementById('percent-title').innerHTML = percent;
55+
56+
window.typeformEmbed.makePopup(
57+
'../form/mock.html#foobar=hello',
58+
{
59+
mode: 'popup',
60+
open: 'scroll',
61+
openValue: percent
62+
}
63+
)
64+
</script>
65+
66+
<div class="lorem-ipsum">
67+
<h2>Random text to make the page long</h2>
68+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra aliquam augue vitae volutpat. Integer eu turpis elit.</p>
69+
<p>Mauris nec lobortis metus. Quisque commodo quis neque sed volutpat. Integer a bibendum ante, at dapibus arcu.</p>
70+
<p>Curabitur at suscipit enim. Aliquam ut urna nunc. Praesent nisl elit, iaculis nec lectus vitae, posuere aliquet velit.</p>
71+
<p>Aenean id porttitor nisi. Phasellus vel fermentum elit. In ut maximus risus, quis lobortis elit.</p>
72+
<p>Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, vulputate sed erat vitae, vehicula bibendum turpis.</p>
73+
<p>Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam.</p>
74+
<p>Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa ullamcorper pulvinar.</p>
75+
<p>Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi.</p>
76+
<p>Quisque felis enim, blandit in convallis in, bibendum non metus. Proin consectetur ut ante nec malesuada.</p>
77+
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
78+
<p>Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper diam.</p>
79+
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
80+
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
81+
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
82+
<p>Proin elementum risus et molestie aliquam.</p>
83+
<p>Duis a egestas lectus, sed mattis nisl. Ut ultricies id mi vel varius. Donec nec laoreet orci.</p>
84+
<p>Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi.</p>
85+
<p>Quisque felis enim, blandit in convallis in, bibendum non metus. Proin consectetur ut ante nec malesuada.</p>
86+
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
87+
<p>Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper diam.</p>
88+
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
89+
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
90+
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
91+
<p>Proin elementum risus et molestie aliquam.</p>
92+
<p>Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. Aenean cursus nulla sit amet lectus consequat vestibulum.</p>
93+
<p>In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non facilisis mi.</p>
94+
<p>Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. Curabitur pharetra, lorem non tincidunt sollicitudin.</p>
95+
<p>Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. Curabitur et tempor purus.</p>
96+
<p>Maecenas commodo lorem augue, sed varius est maximus auctor. Proin finibus justo eu ante bibendum mollis.</p>
97+
<p>Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend efficitur. Pellentesque vitae pellentesque nisl.</p>
98+
<p>Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna.</p>
99+
<p>In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas consectetur imperdiet nisl, a vestibulum lectus maximus vel.</p>
100+
<p>Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus orci sit amet, scelerisque ante.</p>
101+
<p>Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, sit amet lacinia sapien metus vitae tellus.</p>
102+
<p>Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, vulputate sed erat vitae, vehicula bibendum turpis.</p>
103+
<p>Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam.</p>
104+
<p>Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa ullamcorper pulvinar.</p>
105+
<p>Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie.</p>
106+
<p>Donec convallis, nisi at molestie fringilla, mi dolor suscipit risus, vitae gravida nulla libero vitae urna.</p>
107+
<p>Vestibulum id nisi mauris. In faucibus vitae massa eget feugiat. Morbi in arcu congue, iaculis eros ac, fermentum purus.</p>
108+
<p>Fusce lectus tortor, facilisis tincidunt varius ac, sodales quis eros. Pellentesque quis nulla a nisl feugiat pretium.</p>
109+
<p>Duis et magna finibus, hendrerit ligula non, rutrum nunc.</p>
110+
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
111+
<p>Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper diam.</p>
112+
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
113+
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
114+
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
115+
<p>Proin elementum risus et molestie aliquam.</p>
116+
<p>Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. Aenean cursus nulla sit amet lectus consequat vestibulum.</p>
117+
<p>In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non facilisis mi.</p>
118+
<p>Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. Curabitur pharetra, lorem non tincidunt sollicitudin.</p>
119+
<p>Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. Curabitur et tempor purus.</p>
120+
<p>Maecenas commodo lorem augue, sed varius est maximus auctor. Proin finibus justo eu ante bibendum mollis.</p>
121+
<p>Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend efficitur. Pellentesque vitae pellentesque nisl.</p>
122+
<p>Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna.</p>
123+
<p>In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas consectetur imperdiet nisl, a vestibulum lectus maximus vel.</p>
124+
<p>Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus orci sit amet, scelerisque ante.</p>
125+
<p>Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, sit amet lacinia sapien metus vitae tellus.</p>
126+
<p>Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, vulputate sed erat vitae, vehicula bibendum turpis.</p>
127+
<p>Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam.</p>
128+
<p>Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa ullamcorper pulvinar.</p>
129+
<p>Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi.</p>
130+
<p>Quisque felis enim, blandit in convallis in, bibendum non metus. Proin consectetur ut ante nec malesuada.</p>
131+
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
132+
<p>Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper diam.</p>
133+
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
134+
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
135+
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
136+
<p>Proin elementum risus et molestie aliquam.</p>
137+
<p>Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. Aenean cursus nulla sit amet lectus consequat vestibulum.</p>
138+
<p>In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non facilisis mi.</p>
139+
<p>Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. Curabitur pharetra, lorem non tincidunt sollicitudin.</p>
140+
<p>Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. Curabitur et tempor purus.</p>
141+
<p>Maecenas commodo lorem augue, sed varius est maximus auctor. Proin finibus justo eu ante bibendum mollis.</p>
142+
<p>Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend efficitur. Pellentesque vitae pellentesque nisl.</p>
143+
<p>Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna.</p>
144+
<p>Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie.</p>
145+
</div>
146+
</body>
147+
</html>

‎demo/behavioral-api/time-api.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Open: time (via API)</title>
5+
<link rel="stylesheet" href="../demo.css" />
6+
</head>
7+
<body>
8+
<h1>This popup opens in <span id="seconds">5</span> seconds (via API)</h1>
9+
<p>The popup is opened automatically after the given time has passed.</p>
10+
11+
<h2>Customize the time</h2>
12+
<p>This can be set on "Share" page as well.</p>
13+
<form action="" method="get">
14+
<label for="time">Milliseconds</label>
15+
<input id="time" name="ms" type="number" value="5000" step="1000" min="1000" />
16+
<button type="submit">Set</button>
17+
</form>
18+
19+
<script type="text/javascript" src="../embed.js"></script>
20+
<script>
21+
const param = window.location.search.match(/ms=(\d+)/)
22+
const ms = param ? parseInt(param[1], 10) : 5000;
23+
24+
document.getElementById('time').value = ms;
25+
document.getElementById('seconds').innerHTML = Math.round(ms / 1000);
26+
27+
window.typeformEmbed.makePopup(
28+
'../form/mock.html#foobar=hello',
29+
{
30+
mode: 'popup',
31+
open: 'time',
32+
openValue: ms
33+
}
34+
)
35+
</script>
36+
</body>
37+
</html>

‎demo/behavioral/exit.html renamed to ‎demo/behavioral-code/exit-code.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Open: exit</title>
4+
<title>Open: exit (via embed code)</title>
55
<link rel="stylesheet" href="../demo.css" />
66
<style>
77
#visual-threshold {
@@ -17,14 +17,14 @@
1717
</head>
1818
<body>
1919
<div id="visual-threshold"></div>
20-
<h1>This popup opens on exit intent</h1>
20+
<h1>This popup opens on exit intent (via embed code)</h1>
2121
<p>If a user wants to navigate away from your page, they usually need to access the browser toolbar.</p>
2222
<p>We detect mouse movement in top part of the page - if the mouse is moving "up", we open the popup.</p>
2323
<p>The popup is opened only once (on first detected exit intent).</p>
2424
<a
2525
id="popup"
2626
class="typeform-share"
27-
href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
27+
href="../form/mock.html#foobar=hello"
2828
data-mode="drawer_right"
2929
data-open="exit"
3030
data-open-value="50"

‎demo/behavioral/load.html renamed to ‎demo/behavioral-code/load-code.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Open: load</title>
4+
<title>Open: load (via embed code)</title>
55
<link rel="stylesheet" href="../demo.css" />
66
</head>
77
<body>
8-
<h1>This popup opens on page load</h1>
8+
<h1>This popup opens on page load (via embed code)</h1>
99
<p>If you see this you very likely already closed the popup.</p>
1010
<p>If the popup did not open automatically something is broken.</p>
1111
<a
1212
class="typeform-share"
13-
href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
13+
href="../form/mock.html#foobar=hello"
1414
data-mode="popup"
1515
data-open="load"
1616
data-open-value="1"

‎demo/behavioral/scroll.html renamed to ‎demo/behavioral-code/scroll-code.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Open: scroll</title>
4+
<title>Open: scroll (via embed code)</title>
55
<link rel="stylesheet" href="../demo.css" />
66
<style>
77
.scroll-indicator {
@@ -23,13 +23,13 @@
2323
The popup will open at <span id="percent">30</span>%<br/>
2424
You scrolled <span id="scroll-pixels">0</span>px, that is <span id="scroll-percentage">0.00</span>% of the page
2525
</div>
26-
<h1>This popup opens on scroll - at <span id="percent-title">30</span>%</h1>
26+
<h1>This popup opens on scroll - at <span id="percent-title">30</span>% (via embed code)</h1>
2727
<p>The popup is opened automatically when you scroll past given percentage of the page height.</p>
2828
<p>The popup is opened only once (when you scroll past the given percentage for the first time).</p>
2929
<a
3030
id="popup"
3131
class="typeform-share"
32-
href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
32+
href="../form/mock.html#foobar=hello"
3333
data-mode="drawer_left"
3434
data-open="scroll"
3535
data-open-value="30"

‎demo/behavioral/time.html renamed to ‎demo/behavioral-code/time-code.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Open: time</title>
4+
<title>Open: time (via embed code)</title>
55
<link rel="stylesheet" href="../demo.css" />
66
</head>
77
<body>
8-
<h1>This popup opens in <span id="seconds">5</span> seconds</h1>
8+
<h1>This popup opens in <span id="seconds">5</span> seconds (via embed code)</h1>
99
<p>The popup is opened automatically after the given time has passed.</p>
1010
<a
1111
id="popup"
1212
class="typeform-share"
13-
href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
13+
href="../form/mock.html#foobar=hello"
1414
data-mode="drawer_right"
1515
data-open="time"
1616
data-open-value="5000"

0 commit comments

Comments
 (0)