Skip to content

Commit 0e1207a

Browse files
dysfuncdysfunc
authored
Merge pull request #9 from dysfunc/integration-tests
✅ add rule and obstructions tests
2 parents ef554d2 + 2bf3c67 commit 0e1207a

File tree

11 files changed

+283
-91
lines changed

11 files changed

+283
-91
lines changed

‎cypress.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
"requestTimeout": 50000,
1111
"responseTimeout": 50000,
1212
"chromeWebSecurity": false,
13-
"viewportHeight": 1050,
14-
"viewportWidth": 1680
13+
"viewportHeight": 768,
14+
"viewportWidth": 1024,
15+
"retries": {
16+
"runMode": 3,
17+
"openMode": 0
18+
}
1519
}

‎docs/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
<link rel="icon" type="image/png" href="/favicon.png" />
99
<link rel="stylesheet" href="/global.css" />
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" />
1011

1112
<meta name="description" content="A simple rule-based approach to tracking element viewability." />
1213
<meta name="keywords" content="viewability, viewable, tracking, ads, lazy, lazy-loading, svelte, svelte component, intersection observer, observer" />

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"serve": "vite preview"
88
},
99
"devDependencies": {
10-
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
1110
"@svelte-plugins/viewable": "../",
11+
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
1212
"autoprefixer": "^10.2.5",
1313
"postcss": "^8.2.8",
1414
"svelte": "^3.35.0",

‎docs/src/App.svelte

Lines changed: 126 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,149 @@
11
<script>
22
import ContainerExample from './ContainerExample.svelte';
3-
import ImageExample from "./ImageExample.svelte";
43
54
let enableObstructionDetection = false;
65
76
const handleClick = () => (enableObstructionDetection = !enableObstructionDetection);
87
</script>
98

10-
<button id="obstructions" on:click={handleClick}>
9+
<button id="obstructions" data-testid="toggle-obstructions" on:click={handleClick}>
1110
Toggle Obstructions
1211
</button>
1312

14-
Scroll down...
15-
1613
{#if enableObstructionDetection}
1714
<div id="overlay"></div>
1815
{/if}
1916

20-
<div class="container">
21-
<p>Open dev console to see debug output.</p>
22-
<ContainerExample enableObstructionDetection={enableObstructionDetection} />
17+
<div class="container flex flex-col px-4 m-8 mx-auto space-y-4 sm:px-6 lg:px-8">
18+
<div class="container">
19+
<p class="badge">Open dev console to see debug output.</p>
20+
</div>
21+
<div class="flex justify-between">
22+
<div class="w-1/2 mr-4 h-64 block"></div>
23+
<div class="w-1/2 flex flex-col space-y-2">
24+
<div class="w-full h-3 block"></div>
25+
<div class="w-full h-2 block"></div>
26+
<div class="w-full h-2 block"></div>
27+
<div class="w-full h-2 block"></div>
28+
<div class="w-full h-2 block"></div>
29+
<div class="w-full h-2 block"></div>
30+
<div class="w-3/4 h-2 block"></div>
31+
</div>
32+
</div>
33+
<div class="flex flex-col space-y-2">
34+
<div class="w-full h-2 block"></div>
35+
<div class="w-full h-2 block"></div>
36+
<div class="w-full h-2 block"></div>
37+
<div class="w-full h-2 block"></div>
38+
<div class="w-full h-2 block"></div>
39+
<div class="w-full h-2 block"></div>
40+
<div class="w-full h-2 block"></div>
41+
<div class="w-1/5 h-2 block"></div>
42+
</div>
43+
<div class="flex">
44+
<div class="flex-1 h-64 block" data-testid="top">
45+
<ContainerExample enableObstructionDetection={enableObstructionDetection} />
46+
</div>
47+
</div>
48+
<div class="flex flex-col w-4/6 space-y-2">
49+
<div class="w-full h-2 block"></div>
50+
<div class="w-full h-2 block"></div>
51+
<div class="w-full h-2 block"></div>
52+
<div class="w-3/5 h-2 block"></div>
53+
</div>
54+
<div class="flex items-stretch h-48">
55+
<div class="flex-1 mr-4 block"></div>
56+
<div class="flex-1 block"></div>
57+
<div class="flex-1 ml-4 block"></div>
58+
</div>
59+
<div class="flex flex-col w-4/6 space-y-2">
60+
<div class="w-full h-2 block"></div>
61+
<div class="w-full h-2 block"></div>
62+
<div class="w-full h-2 block"></div>
63+
<div class="w-3/5 h-2 block"></div>
64+
</div>
65+
<div class="flex">
66+
<div class="flex-1 h-64 block" data-testid="middle">
67+
<ContainerExample enableObstructionDetection={enableObstructionDetection}>
68+
Hello World!
69+
</ContainerExample>
70+
</div>
71+
</div>
72+
<div class="flex flex-col space-y-2">
73+
<div class="w-full h-2 block"></div>
74+
<div class="w-3/4 h-2 block"></div>
75+
<div class="w-2/3 h-2 block"></div>
76+
<div class="w-full h-2 block"></div>
77+
<div class="w-full h-2 block"></div>
78+
<div class="w-4/5 h-2 block"></div>
79+
<div class="w-3/5 h-2 block"></div>
80+
<div class="w-full h-2 block"></div>
81+
</div>
82+
<div class="flex items-stretch h-48">
83+
<div class="flex-1 mr-2 block"></div>
84+
<div class="flex-1 ml-2 block"></div>
85+
</div>
86+
<div class="flex items-stretch h-48">
87+
<div class="flex-1 mr-4 block"></div>
88+
<div class="flex-1 block" data-testid="bottom">
89+
<ContainerExample />
90+
</div>
91+
<div class="flex-1 ml-4 block"></div>
92+
</div>
93+
<div class="flex flex-col space-y-2">
94+
<div class="w-full h-2 block"></div>
95+
<div class="w-full h-2 block"></div>
96+
<div class="w-full h-2 block"></div>
97+
</div>
98+
<div class="flex flex-col w-4/6 space-y-2">
99+
<div class="w-full h-2 block"></div>
100+
<div class="w-full h-2 block"></div>
101+
<div class="w-full h-2 block"></div>
102+
<div class="w-3/5 h-2 block"></div>
103+
</div>
104+
<div class="flex items-stretch h-48">
105+
<div class="flex-1 mr-4 block"></div>
106+
<div class="flex-1 block"></div>
107+
<div class="flex-1 ml-4 block"></div>
108+
</div>
109+
<div class="flex">
110+
<div class="flex-1 h-64 block"></div>
111+
</div>
112+
<div class="flex flex-col w-4/6 space-y-2">
113+
<div class="w-full h-2 block"></div>
114+
<div class="w-full h-2 block"></div>
115+
<div class="w-full h-2 block"></div>
116+
<div class="w-3/5 h-2 block"></div>
117+
</div>
23118
</div>
24119

25-
<div class="container">
26-
<ImageExample />
27-
</div>
120+
<style>
121+
.badge {
122+
background-color: #ffeaad;
123+
border-radius: 4px;
124+
display: inline-block;
125+
color: #111;
126+
display: inline-block;
127+
padding: 8px 16px;
128+
}
28129
29-
<div class="container">
30-
<ContainerExample />
31-
</div>
130+
.block {
131+
background: #f0f0f0;
132+
}
133+
134+
.container {
135+
min-width: 800px;
136+
}
137+
138+
[data-testid="bottom"] {
139+
font-size: .7em;
140+
}
32141
33-
<style>
34142
#obstructions {
143+
padding: 8px 16px;
35144
position: fixed;
36-
right: 0;
37-
top: 0;
145+
right: 4px;
146+
top: 4px;
38147
}
39148
40149
#overlay {
@@ -59,7 +168,7 @@ Scroll down...
59168
}
60169
61170
#overlay:after {
62-
background: rgba(45, 45, 45, .1);
171+
background: rgba(145, 145, 145, .1);
63172
bottom: 25%;
64173
content: " ";
65174
left: 200px;
@@ -68,10 +177,4 @@ Scroll down...
68177
top: 15%;
69178
z-index: 99;
70179
}
71-
72-
.container {
73-
border-bottom: 1px solid #eee;
74-
height: 100vh;
75-
padding-top: 100vh;
76-
}
77180
</style>

‎docs/src/ContainerExample.svelte

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,86 @@
11
<script>
22
import Viewable from "@svelte-plugins/viewable";
33
4+
export let enableObstructionDetection = false;
5+
6+
let events = [];
7+
let element;
8+
let duration;
9+
let percent;
10+
let percentX;
11+
let percentY;
12+
let activeRule = null;
13+
let debug = true;
14+
415
// you can use a single callback or separate callbacks for each rule
516
const fn = ({ percentage, duration, rule }) => {
6-
console.log(`${percentage}% of the element was visible for at least ${duration} consecutive seconds.`);
17+
events = [...events, `${percentage}% of the element was visible for at least ${duration} consecutive seconds. #${rule}`];
718
// update active rule
819
activeRule = rule;
920
}
1021
1122
const rules = {
1223
// do something when this crosses the viewport
13-
whenVisible: { duration: 2, percentage: 40, fn },
24+
whenFourtyForTwo: { duration: 2, percentage: 40, fn },
1425
// do something when this is 50% in view for 4 seconds
15-
whenFiftyForOne: { duration: 4, percentage: 50, fn },
26+
whenFiftyForFour: { duration: 4, percentage: 50, fn },
1627
// do something when this is 100% in view for 6 seconds
17-
whenHundredForFour: { duration: 6, percentage: 100, fn }
28+
whenHundredForSix: { duration: 6, percentage: 100, fn }
1829
};
19-
20-
export let enableObstructionDetection = false;
21-
22-
let element;
23-
let duration;
24-
let percent;
25-
let percentX;
26-
let percentY;
27-
let activeRule = null;
28-
let debug = true;
2930
</script>
3031

3132
<Viewable bind:duration bind:percent bind:percentY bind:percentX {rules} {element} {enableObstructionDetection} {debug}>
3233
<div bind:this={element} class={`${activeRule}`}>
34+
<slot></slot>
35+
3336
<p>Duration: {duration}s</p>
3437
<p>Viewable area: {percent}% x: {percentX}% y: {percentY}%</p>
38+
39+
{#if events.length}
40+
{#each events as event}
41+
<p>{event}</p>
42+
{/each}
43+
{/if}
3544
</div>
3645
</Viewable>
3746

3847
<style>
3948
div {
40-
background-color: #ccc;
49+
background-color: #ddd;
4150
border-radius: 2px;
51+
height: 100%;
4252
padding: 20px;
43-
height: 25vh;
4453
}
4554
46-
div.whenVisible {
55+
div.whenFourtyForTwo {
4756
background-color: #50e3c2;
4857
color: #fff;
4958
}
5059
51-
div.whenFiftyForOne {
60+
div.whenFiftyForFour {
5261
background-color: #4a90e2;
5362
color: #fff;
5463
}
5564
56-
div.whenHundredForFour {
65+
div.whenHundredForSix {
5766
background-color: #fd8e82;
5867
color: #fff;
68+
position: relative;
69+
}
70+
71+
div.whenHundredForSix:before {
72+
background: rgba(255,255,255, .75);
73+
border-radius: 100%;
74+
bottom: 20px;
75+
content: "🎉";
76+
height: 100px;
77+
font-size: 3em;
78+
left: calc(50% - 50px);
79+
line-height: 100px;
80+
position: absolute;
81+
right: 0;
82+
text-align: center;
83+
top: calc(50% - 50px);
84+
width: 100px;
5985
}
6086
</style>

‎docs/src/ImageExample.svelte

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎tests/integration/index.spec.js

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)