fix(tracker): add trailing slash to data-api option (#147)

* fix(tracker): add trailing slash to data api * test: add e2e testing for data-api option
medama-io · Sep 11, 2024 · 59af3b2 · 59af3b2
1 parent 7f3ef9f
commit 59af3b2
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 17 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/tracker/README.md b/tracker/README.md
@@ -10,9 +10,9 @@ Our tracker is designed with compression in mind, given that web traffic is usua
 
 | File                  | Size                 | Compressed (gzip)   | Compressed (brotli) |
 | --------------------- | -------------------- | ------------------- | ------------------- |
-| `default.min.js`      | 1512 bytes (1.48 KB) | 766 bytes (0.75 KB) | 620 bytes (0.61 KB) |
-| `page-events.min.js`  | 1750 bytes (1.71 KB) | 890 bytes (0.87 KB) | 731 bytes (0.71 KB) |
-| `click-events.min.js` | 1991 bytes (1.94 KB) | 977 bytes (0.95 KB) | 792 bytes (0.77 KB) |
+| `default.min.js`      | 1513 bytes (1.48 KB) | 768 bytes (0.75 KB) | 621 bytes (0.61 KB) |
+| `page-events.min.js`  | 1751 bytes (1.71 KB) | 891 bytes (0.87 KB) | 732 bytes (0.71 KB) |
+| `click-events.min.js` | 1992 bytes (1.95 KB) | 973 bytes (0.95 KB) | 793 bytes (0.77 KB) |
 
 The listed sizes only show the size of the tracker itself with one specific feature. When combining multiple features, the size of the tracker will relatively increase (although some features may share code with each other).
 

diff --git a/tracker/dist/click-events.js b/tracker/dist/click-events.js
@@ -54,7 +54,7 @@
 	 * src attribute to determine the host.
 	 */
 	const host = currentScript.getAttribute('data-api')
-		? `${location.protocol}//${currentScript.getAttribute('data-api')}`
+		? `${location.protocol}//${currentScript.getAttribute('data-api')}/`
 		: // @ts-ignore - We know this won't be an SVGScriptElement.
 			currentScript.src.replace(/[^\/]+$/, 'api/');
 

diff --git a/tracker/dist/click-events.min.js b/tracker/dist/click-events.min.js
diff --git a/tracker/dist/click-events.page-events.js b/tracker/dist/click-events.page-events.js
@@ -54,7 +54,7 @@
 	 * src attribute to determine the host.
 	 */
 	const host = currentScript.getAttribute('data-api')
-		? `${location.protocol}//${currentScript.getAttribute('data-api')}`
+		? `${location.protocol}//${currentScript.getAttribute('data-api')}/`
 		: // @ts-ignore - We know this won't be an SVGScriptElement.
 			currentScript.src.replace(/[^\/]+$/, 'api/');
 

diff --git a/tracker/dist/click-events.page-events.min.js b/tracker/dist/click-events.page-events.min.js
diff --git a/tracker/dist/default.js b/tracker/dist/default.js
@@ -54,7 +54,7 @@
 	 * src attribute to determine the host.
 	 */
 	const host = currentScript.getAttribute('data-api')
-		? `${location.protocol}//${currentScript.getAttribute('data-api')}`
+		? `${location.protocol}//${currentScript.getAttribute('data-api')}/`
 		: // @ts-ignore - We know this won't be an SVGScriptElement.
 			currentScript.src.replace(/[^\/]+$/, 'api/');
 

diff --git a/tracker/dist/default.min.js b/tracker/dist/default.min.js
diff --git a/tracker/dist/page-events.js b/tracker/dist/page-events.js
@@ -54,7 +54,7 @@
 	 * src attribute to determine the host.
 	 */
 	const host = currentScript.getAttribute('data-api')
-		? `${location.protocol}//${currentScript.getAttribute('data-api')}`
+		? `${location.protocol}//${currentScript.getAttribute('data-api')}/`
 		: // @ts-ignore - We know this won't be an SVGScriptElement.
 			currentScript.src.replace(/[^\/]+$/, 'api/');
 

diff --git a/tracker/dist/page-events.min.js b/tracker/dist/page-events.min.js
diff --git a/tracker/package.json b/tracker/package.json
@@ -4,11 +4,11 @@
 	"author": "Ayuhito",
 	"main": "dist/default.js",
 	"devDependencies": {
-		"@playwright/test": "^1.45.3",
+		"@playwright/test": "^1.47.0",
 		"brotli-size": "^4.0.0",
 		"gzip-size": "^7.0.0",
 		"preprocess": "^3.2.0",
-		"terser": "^5.31.3"
+		"terser": "^5.32.0"
 	},
 	"description": "Tracker script for Medama Analytics",
 	"license": "MIT",

diff --git a/tracker/playwright.config.js b/tracker/playwright.config.js
@@ -76,8 +76,7 @@ module.exports = defineConfig({
 			timeout: 2500,
 		},
 		{
-			command:
-				'task start -- start -logger=pretty -level=warn -corsorigins=http://localhost:8080,http://localhost:3000',
+			command: 'task dev -- start',
 			port: 8080,
 			reuseExistingServer: !process.env.CI,
 			cwd: '../core',

diff --git a/tracker/src/tracker.js b/tracker/src/tracker.js
@@ -54,7 +54,7 @@
 	 * src attribute to determine the host.
 	 */
 	const host = currentScript.getAttribute('data-api')
-		? `${location.protocol}//${currentScript.getAttribute('data-api')}`
+		? `${location.protocol}//${currentScript.getAttribute('data-api')}/`
 		: // @ts-ignore - We know this won't be an SVGScriptElement.
 			currentScript.src.replace(/[^\/]+$/, 'api/');
 

diff --git a/tracker/tests/data-api.spec.js b/tracker/tests/data-api.spec.js
@@ -0,0 +1,21 @@
+// @ts-check
+
+import { test, expect } from '@playwright/test';
+
+test.describe('data-api', () => {
+	test('data-api connects to alternative api', async ({ page }) => {
+		const requests = [];
+		await page.on('request', (request) => {
+			console.log('>>', request.method(), request.url());
+			if (request.url().includes('/api/event')) requests.push(request.url());
+		});
+
+		await page.goto('/data-api/index.html', { waitUntil: 'load' });
+		await page.waitForLoadState();
+
+		expect(requests.length).toBeGreaterThan(0);
+		for (const url of requests) {
+			expect(url).toContain('example.com');
+		}
+	});
+});
diff --git a/tracker/tests/fixtures/data-api/index.html b/tracker/tests/fixtures/data-api/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<title>Normal Webpage</title>
+</head>
+
+<body data-m:load="load=test;load2=test2">
+	<h1 data-m:load="load3=test2">Normal Webpage</h1>
+	<nav>
+		<a href="index.html">Home</a>
+		<a href="about.html">About</a>
+		<a href="contact.html">Contact</a>
+	</nav>
+	<div id="content">
+		<p>This is the home page.</p>
+		<button data-testid="tagged-left-click" data-m:click="button=left;action=button">Tagged Event Left Click</button>
+		<button data-testid="tagged-middle-click" data-m:click="button=middle;action=button">Tagged Event Middle
+			Click</button>
+		<button data-testid="tagged-right-click" data-m:click="button=right;action=button">Tagged Event Right Click</button>
+	</div>
+	<script defer src="http://localhost:3000/script.js" data-api="example.com/api"></script>
+</body>
+
+</html>
diff --git a/tracker/tests/fixtures/serve.js b/tracker/tests/fixtures/serve.js
@@ -1,4 +1,4 @@
-const ACCEPTED_PATHS = ['/simple', '/history'];
+const ACCEPTED_PATHS = ['/simple', '/history', '/data-api'];
 
 console.log('Serving on http://localhost:3000');
 Bun.serve({