fix: 🐛 tracker snippets url

playwright tests for moon tracker
coingaming · Feb 11, 2025 · fa47052 · fa47052
1 parent 90c1139
commit fa47052
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 2 deletions.
diff --git a/tracker/src/plausible.js b/tracker/src/plausible.js
@@ -34,7 +34,6 @@
       elements.forEach(element => {
         const attributeValue = element.getAttribute(attribute);
         const eventValue = `${attribute}-${attributeValue}`;
-
         trigger('phx-event', {
           props: {
             event: attribute,

diff --git a/tracker/test/fixtures/live-view-moon-components-2.html b/tracker/test/fixtures/live-view-moon-components-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Plausible Playwright LiveView tests</title>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script defer src="/tracker/js/plausible.live-view.local.manual.js"></script>
+</head>
+<body>
+  LiveView-related tests
+  <form id="main-form" onsubmit="event.preventDefault();">
+    <input type="text" name="user[name]" value="name"/>
+    <input type="email" name="user[email]" value="[email protected]" data-moon-elixir-assets-id="main-form-elixir"/>
+    <input type="submit" id="main-form-btn" data-moon-icons-id="main-form-icon"/>
+  </form>
+</body>
+</html>
diff --git a/tracker/test/fixtures/live-view-moon-components-3.html b/tracker/test/fixtures/live-view-moon-components-3.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Plausible Playwright LiveView tests</title>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script defer src="/tracker/js/plausible.live-view.local.manual.js"></script>
+</head>
+<body>
+  LiveView-related tests
+  <form id="main-form" onsubmit="event.preventDefault();">
+    <input type="text" name="user[name]" value="name"/>
+    <input type="email" name="user[email]" value="[email protected]"/>
+    <input type="submit" id="main-form-btn" data-moon-icons-id="main-form-icon"/>
+  </form>
+</body>
+</html>
diff --git a/tracker/test/fixtures/live-view-moon-components-4.html b/tracker/test/fixtures/live-view-moon-components-4.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Plausible Playwright LiveView tests</title>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script defer src="/tracker/js/plausible.live-view.local.manual.js"></script>
+</head>
+<body>
+  LiveView-related tests
+  <form id="main-form" onsubmit="event.preventDefault();">
+    <input type="text" name="user[name]" value="name" data-moon-icons-react-id="main-form-react"/>
+    <input type="email" name="user[email]" value="[email protected]"/>
+    <input type="submit" id="main-form-btn"/>
+  </form>
+</body>
+</html>
diff --git a/tracker/test/fixtures/live-view-moon-components.html b/tracker/test/fixtures/live-view-moon-components.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Plausible Playwright LiveView tests</title>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script>window.liveSocket = {socket: {}}</script>
+  <script defer src="/tracker/js/plausible.live-view.local.manual.js"></script>
+</head>
+<body>
+  LiveView-related tests
+  <form id="main-form" onsubmit="event.preventDefault();"data-moon-react-assets-id="main-form">
+    <input type="text" name="user[name]" value="name" data-moon-icons-react-id="main-form-react"/>
+    <input type="email" name="user[email]" value="[email protected]"/>
+    <input type="submit" id="main-form-btn"/>
+  </form>
+</body>
+</html>
diff --git a/tracker/test/fixtures/live-view.html b/tracker/test/fixtures/live-view.html
@@ -12,7 +12,7 @@
 <body>
   LiveView-related tests
   <form id="main-form" onsubmit="event.preventDefault();">
-    <input type="text" name="user[name]" value="name" />
+    <input type="text" name="user[name]" value="name"/>
     <input type="email" name="user[email]" value="[email protected]" />
     <input type="submit" id="main-form-btn" />
   </form>

diff --git a/tracker/test/live-view.spec.js b/tracker/test/live-view.spec.js
@@ -47,5 +47,68 @@ test.describe('script.live-view.js tracking', () => {
         expect(request.postDataJSON().u).toEqual("/navigate")
         expectCustomEvent(request, 'pageview', {})
     });
+
+});
+
+test.describe('script.live-view.js moon ds tracking', () => {
+    let plausibleRequestMock;
+
+    test.beforeEach(async ({ page }) => {
+        plausibleRequestMock = mockRequest(page, '/api/event')
+        await page.goto('/live-view-moon-components.html');
+    });
+
+    test('Sends data-moon-react-assets-id', async ({ page }) => {
+        await page.evaluate(() => window.dispatchEvent(new CustomEvent("data-moon-react-assets-id", { value: "main-form" })))
+        const request = await plausibleRequestMock;
+        expectCustomEvent(request, 'phx-event', { event: 'data-moon-react-assets-id', value: 'main-form' })
+    });
+
+});
+
+test.describe('script.live-view.js moon icons ds tracking', () => {
+    let plausibleRequestMock;
+
+    test.beforeEach(async ({ page }) => {
+        plausibleRequestMock = mockRequest(page, '/api/event')
+        await page.goto('/live-view-moon-components-4.html');
+    });
+
+    test('Sends data-moon-icons-react-id', async ({ page }) => {
+        await page.evaluate(() => window.dispatchEvent(new CustomEvent("data-moon-icons-react-id", { value: "main-form-react" })))
+        const request = await plausibleRequestMock;
+        expectCustomEvent(request, 'phx-event', { event: 'data-moon-icons-react-id', value: 'main-form-react' })
+    });
+
+});
+
+test.describe('script.live-view.js moon ds elixir tracking', () => {
+    let plausibleRequestMock;
+
+    test.beforeEach(async ({ page }) => {
+        plausibleRequestMock = mockRequest(page, '/api/event')
+        await page.goto('/live-view-moon-components-2.html');
+    });
 
+    test('Sends data-moon-elixir-assets-id', async ({ page }) => {
+        await page.evaluate(() => window.dispatchEvent(new CustomEvent("data-moon-elixir-assets-id", { value: "main-form-elixir" })))
+        const request = await plausibleRequestMock;
+        expectCustomEvent(request, 'phx-event', { event: 'data-moon-elixir-assets-id', value: 'main-form-elixir' })
+    });
 });
+
+test.describe('script.live-view.js moon ds icons tracking', () => {
+    let plausibleRequestMock;
+
+    test.beforeEach(async ({ page }) => {
+        plausibleRequestMock = mockRequest(page, '/api/event')
+        await page.goto('/live-view-moon-components-3.html');
+    });
+
+    test('Sends data-moon-icons-id', async ({ page }) => {
+        await page.evaluate(() => window.dispatchEvent(new CustomEvent("data-moon-icons-id", { value: "main-form-icon" })))
+        const request = await plausibleRequestMock;
+        expectCustomEvent(request, 'phx-event', { event: 'data-moon-icons-id', value: 'main-form-icon' })
+    });
+
+});