Skip to content

Commit 0591eb7

Browse files
rmarsigliclaude
rmarsigli
and
claude
committed
test(sdk): add comprehensive browser test suite
Phase 4: Testing (2h) - Created interactive HTML test suite - 7 manual tests: auto-init, custom events, pageviews, SPA navigation, outbound links, session persistence, queue processing - Visual test UI with console output capture - Debug mode enabled for verification - Test against localhost:3000 backend - Prerequisites documented Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 195928f commit 0591eb7

1 file changed

Lines changed: 210 additions & 0 deletions

File tree

‎sdk/test.html‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Rush SDK Test Suite</title>
7+
<style>
8+
* { box-sizing: border-box; }
9+
body {
10+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
11+
max-width: 900px;
12+
margin: 0 auto;
13+
padding: 20px;
14+
background: #f5f5f5;
15+
}
16+
h1 { color: #333; }
17+
h2 {
18+
color: #666;
19+
margin-top: 40px;
20+
padding-bottom: 10px;
21+
border-bottom: 2px solid #ddd;
22+
}
23+
.test-section {
24+
background: white;
25+
padding: 20px;
26+
margin: 20px 0;
27+
border-radius: 8px;
28+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
29+
}
30+
button {
31+
background: #0066cc;
32+
color: white;
33+
border: none;
34+
padding: 12px 24px;
35+
border-radius: 6px;
36+
cursor: pointer;
37+
font-size: 14px;
38+
margin: 5px;
39+
transition: background 0.2s;
40+
}
41+
button:hover { background: #0052a3; }
42+
button:active { transform: scale(0.98); }
43+
.log {
44+
background: #f8f8f8;
45+
border-left: 3px solid #0066cc;
46+
padding: 15px;
47+
margin: 10px 0;
48+
font-family: 'Monaco', monospace;
49+
font-size: 13px;
50+
}
51+
.success { border-left-color: #28a745; }
52+
.warning { border-left-color: #ffc107; }
53+
.error { border-left-color: #dc3545; }
54+
code {
55+
background: #e9ecef;
56+
padding: 2px 6px;
57+
border-radius: 3px;
58+
font-size: 12px;
59+
}
60+
a { color: #0066cc; }
61+
#console-log {
62+
background: #1e1e1e;
63+
color: #d4d4d4;
64+
padding: 15px;
65+
border-radius: 6px;
66+
font-family: 'Monaco', monospace;
67+
font-size: 12px;
68+
max-height: 300px;
69+
overflow-y: auto;
70+
white-space: pre-wrap;
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
<h1>🧪 Rush SDK Test Suite</h1>
76+
77+
<div class="log warning">
78+
<strong>Prerequisites:</strong>
79+
<ul>
80+
<li>Backend running at <code>http://localhost:3000</code></li>
81+
<li>Test site created with ID: <code>550e8400-e29b-41d4-a716-446655440000</code></li>
82+
<li>DevTools open (Console + Network tabs)</li>
83+
</ul>
84+
</div>
85+
86+
<!-- Test 1: Auto-init -->
87+
<h2>Test 1: Auto-init on Page Load</h2>
88+
<div class="test-section">
89+
<div class="log success">
90+
<strong>✓ Expected:</strong> SDK auto-initializes and tracks pageview on load
91+
</div>
92+
<div class="log">
93+
<strong>Verification:</strong>
94+
<ol>
95+
<li>Check console for: <code>[Rush] Initialized</code></li>
96+
<li>Check Network tab for POST to <code>/ingest</code></li>
97+
<li>Verify payload contains <code>event_name: "pageview"</code></li>
98+
</ol>
99+
</div>
100+
</div>
101+
102+
<!-- Test 2: Custom events -->
103+
<h2>Test 2: Manual Event Tracking</h2>
104+
<div class="test-section">
105+
<button onclick="testCustomEvent()">Track Custom Event</button>
106+
<div class="log">
107+
<strong>Expected:</strong> POST request with custom event data
108+
</div>
109+
</div>
110+
111+
<!-- Test 3: Pageview -->
112+
<h2>Test 3: Manual Pageview</h2>
113+
<div class="test-section">
114+
<button onclick="Rush.trackPageview()">Track Pageview</button>
115+
<div class="log">
116+
<strong>Expected:</strong> POST request with <code>event_name: "pageview"</code>
117+
</div>
118+
</div>
119+
120+
<!-- Test 4: SPA navigation -->
121+
<h2>Test 4: SPA Navigation Tracking</h2>
122+
<div class="test-section">
123+
<button onclick="navigate('/test-page-1')">Navigate to /test-page-1</button>
124+
<button onclick="navigate('/test-page-2')">Navigate to /test-page-2</button>
125+
<button onclick="history.back()">Go Back (popstate)</button>
126+
<div class="log">
127+
<strong>Expected:</strong> Pageview tracked on each navigation
128+
</div>
129+
</div>
130+
131+
<!-- Test 5: Outbound links -->
132+
<h2>Test 5: Outbound Link Tracking</h2>
133+
<div class="test-section">
134+
<a href="https://google.com" target="_blank">External Link to Google</a>
135+
<div class="log">
136+
<strong>Expected:</strong> POST request with <code>event_name: "outbound_link"</code>
137+
</div>
138+
</div>
139+
140+
<!-- Test 6: Session persistence -->
141+
<h2>Test 6: Session Persistence</h2>
142+
<div class="test-section">
143+
<button onclick="checkSession()">Check Session ID</button>
144+
<button onclick="window.location.reload()">Reload Page</button>
145+
<div class="log">
146+
<strong>Expected:</strong> Same session ID after reload
147+
</div>
148+
<div id="session-info" class="log"></div>
149+
</div>
150+
151+
<!-- Test 7: Queue processing -->
152+
<h2>Test 7: Event Queue (Before SDK Loads)</h2>
153+
<div class="test-section">
154+
<div class="log">
155+
<strong>Test:</strong> Events tracked before SDK loads should be processed after SDK loads.
156+
<br><strong>Status:</strong> This was tested on page load (pageview was queued by stub).
157+
</div>
158+
</div>
159+
160+
<!-- Console log -->
161+
<h2>Console Output</h2>
162+
<div class="test-section">
163+
<div id="console-log">Waiting for events...</div>
164+
</div>
165+
166+
<!-- Inline stub (minified in production) -->
167+
<script src="dist/stub.min.js"
168+
data-site="550e8400-e29b-41d4-a716-446655440000"
169+
data-endpoint="http://localhost:3000/ingest"
170+
data-sdk-url="dist/rush.min.js"
171+
data-debug="true"></script>
172+
173+
<!-- Test helpers -->
174+
<script>
175+
function testCustomEvent() {
176+
Rush.track('button_click', {
177+
button_id: 'test-button',
178+
campaign: 'test-suite'
179+
});
180+
logToConsole('✅ Custom event tracked');
181+
}
182+
183+
function navigate(path) {
184+
history.pushState({}, '', path);
185+
logToConsole('📍 Navigated to ' + path);
186+
}
187+
188+
function checkSession() {
189+
var sid = sessionStorage.getItem('_rush_sid');
190+
document.getElementById('session-info').innerHTML =
191+
'<strong>Session ID:</strong> ' + (sid || 'Not found');
192+
logToConsole('🔍 Session ID: ' + sid);
193+
}
194+
195+
function logToConsole(message) {
196+
var log = document.getElementById('console-log');
197+
var timestamp = new Date().toLocaleTimeString();
198+
log.innerHTML += timestamp + ' - ' + message + '\n';
199+
log.scrollTop = log.scrollHeight;
200+
}
201+
202+
// Intercept console.log for display
203+
var originalLog = console.log;
204+
console.log = function() {
205+
originalLog.apply(console, arguments);
206+
logToConsole(Array.from(arguments).join(' '));
207+
};
208+
</script>
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)