tests fixing

priv/tracker/js/plausible.live-view.js

@@ -1 +1,117 @@
-!function(){"use strict";var a=window.location,o=window.document,r=o.currentScript,s=r.getAttribute("data-api")||new URL(r.src).origin+"/api/event";function p(e,t){e&&console.warn("Ignoring Event: "+e),t&&t.callback&&t.callback()}function n(e,t){if(/^localhost$|^127(\.[0-9]+){0,2}\.[0-9]+$|^\[::1?\]$/.test(a.hostname)||"file:"===a.protocol)return p("localhost",t);if((window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress)&&!window.__plausible)return p(null,t);try{if("true"===window.localStorage.plausible_ignore)return p("localStorage flag",t)}catch(e){}var i={},n=(i.n=e,i.u=a.href,i.d=r.getAttribute("data-domain"),i.r=o.referrer||null,t&&t.meta&&(i.m=JSON.stringify(t.meta)),t&&t.props&&(i.p=t.props),new XMLHttpRequest);n.open("POST",s,!0),n.setRequestHeader("Content-Type","text/plain"),n.send(JSON.stringify(i)),n.onreadystatechange=function(){4===n.readyState&&t&&t.callback&&t.callback({status:n.status})}}var e=window.plausible&&window.plausible.q||[];window.plausible=n;for(var t,i=0;i<e.length;i++)n.apply(this,e[i]);function l(){t!==a.pathname&&(t=a.pathname,n("pageview"))}var d,c=window.history;c.pushState&&(d=c.pushState,c.pushState=function(){d.apply(this,arguments),l()},window.addEventListener("popstate",l)),"prerender"===o.visibilityState?o.addEventListener("visibilitychange",function(){t||"visible"!==o.visibilityState||l()}):l(),window.addEventListener("phx:navigate",e=>n("pageview",{u:e.detail.href})),["phx-click","phx-change","phx-submit","phx-viewport-top","phx-viewport-bottom","phx-mounted","phx-connected","phx-disconnected"].map(t=>{window.addEventListener(t,e=>n("phx-event",{props:{event:t,detail:new URLSearchParams(e.detail||{}).toString()}}))}),window.addEventListener("submit",e=>n("js-submit",{props:{dom_id:e.target.id,...Object.fromEntries(new FormData(e.target).entries())}})),window.liveSocket?window.liveSocket.socket.logger=(e,t,i)=>{"push"!==e||t.includes("phoenix heartbeat")||n("phx-push",{props:{msg:t,...i}})}:console&&console.error("No liveSocket initialized")}();
+(function(){
+  'use strict';
+
+  var location = window.location
+  var document = window.document
+
+  var scriptEl = document.currentScript;
+  var endpoint = scriptEl.getAttribute('data-api') || defaultEndpoint(scriptEl)
+
+  function onIgnoredEvent(reason, options) {
+    if (reason) console.warn('Ignoring Event: ' + reason);
+    options && options.callback && options.callback()
+  }
+
+  function defaultEndpoint(el) {
+    return new URL(el.src).origin + '/api/event'
+  }
+
+
+  function trigger(eventName, options) {
+    if (/^localhost$|^127(\.[0-9]+){0,2}\.[0-9]+$|^\[::1?\]$/.test(location.hostname) || location.protocol === 'file:') {
+      return onIgnoredEvent('localhost', options)
+    }
+    if ((window._phantom || window.__nightmare || window.navigator.webdriver || window.Cypress) && !window.__plausible) {
+      return onIgnoredEvent(null, options)
+    }
+    try {
+      if (window.localStorage.plausible_ignore === 'true') {
+        return onIgnoredEvent('localStorage flag', options)
+      }
+    } catch (e) {
+
+    }
+
+    var payload = {}
+    payload.n = eventName
+    payload.u = location.href
+    payload.d = scriptEl.getAttribute('data-domain')
+    payload.r = document.referrer || null
+    if (options && options.meta) {
+      payload.m = JSON.stringify(options.meta)
+    }
+    if (options && options.props) {
+      payload.p = options.props
+    }
+
+
+
+    var request = new XMLHttpRequest();
+    request.open('POST', endpoint, true);
+    request.setRequestHeader('Content-Type', 'text/plain');
+
+    request.send(JSON.stringify(payload));
+
+    request.onreadystatechange = function() {
+      if (request.readyState === 4) {
+        options && options.callback && options.callback({status: request.status})
+      }
+    }
+  }
+
+  var queue = (window.plausible && window.plausible.q) || []
+  window.plausible = trigger
+  for (var i = 0; i < queue.length; i++) {
+    trigger.apply(this, queue[i])
+  }
+
+    var lastPage;
+
+    function page() {
+      if (lastPage === location.pathname) return;
+      lastPage = location.pathname
+      trigger('pageview')
+    }
+
+    var his = window.history
+    if (his.pushState) {
+      var originalPushState = his['pushState']
+      his.pushState = function() {
+        originalPushState.apply(this, arguments)
+        page();
+      }
+      window.addEventListener('popstate', page)
+    }
+
+    function handleVisibilityChange() {
+      if (!lastPage && document.visibilityState === 'visible') {
+        page()
+      }
+    }
+
+    if (document.visibilityState === 'prerender') {
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+    } else {
+      page()
+    }
+
+
+    window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href}));
+
+    ['phx:page-loading-start', 'phx:page-loading-stop'].map((name) => {
+      window.addEventListener(name, info => trigger('phx-event', {props: {event: name, detail: new URLSearchParams(info.detail || {}).toString()}}));
+    });
+
+    // form submit event
+    window.addEventListener("submit", e => trigger("js-submit", {props: {dom_id: e.target.id, ...Object.fromEntries(new FormData(e.target).entries())}}));
+
+    //track socket activity
+    if (window.liveSocket)
+      window.liveSocket.socket.logger = (kind, msg, data) => {
+        if ((kind === 'push') && !msg.includes("phoenix heartbeat")){
+          trigger('phx-push', {props: {msg, ...data}});
+        } 
+      }
+    else
+      console && console.error("No liveSocket initialized")
+})();

tracker/src/plausible.js

@@ -169,9 +169,7 @@
   {{/if}}
 
   {{#if live_view}}
-    {{#unless manual}}
-      window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href}));
-    {{/unless}}
+    window.addEventListener('phx:navigate', info => trigger('pageview', {u: info.detail.href}));
 
     ['phx:page-loading-start', 'phx:page-loading-stop'].map((name) => {
       window.addEventListener(name, info => trigger('phx-event', {props: {event: name, detail: new URLSearchParams(info.detail || {}).toString()}}));

tracker/test/live-view.spec.js

@@ -1,28 +1,38 @@
 const { mockRequest, expectCustomEvent } = require('./support/test-utils');
 const { expect, test } = require('@playwright/test');
 
-test.describe('script.live-view.js', () => {
+test.describe('script.live-view.js events', () => {
     let plausibleRequestMock;
 
     test.beforeEach(async ({ page }) => {
         plausibleRequestMock = mockRequest(page, '/api/event')
         await page.goto('/live-view.html');
     });
 
-    test('Sends pageview', async ({ page }) => {
-        await page.evaluate(() => window.dispatchEvent(new CustomEvent("phx:navigate", { detail: { href: "/navigate" } })))
-        const request = await plausibleRequestMock;
-        expect(request.postDataJSON().u).toEqual("/navigate")
-        expectCustomEvent(request, 'pageview', {})
-    });
-
     test('Sends phx-event', async ({ page }) => {
         await page.evaluate(() => window.liveSocket.socket.logger('push', '_message', { a: 1 }))
-        expectCustomEvent(await plausibleRequestMock, 'phx-event', { a: 1 })
+        expectCustomEvent(await plausibleRequestMock, 'phx-push', { a: 1 })
     });
 
     test('Sends submit event', async ({ page }) => {
         await (await page.locator("#main-form-btn")).click()
         expectCustomEvent(await plausibleRequestMock, 'js-submit', { 'user[name]': "name", dom_id: "main-form" })
     });
 });
+
+test.describe('script.live-view.js tracking', () => {
+    let plausibleRequestMock;
+
+    test.beforeEach(async ({ page }) => {
+        plausibleRequestMock = mockRequest(page, '/api/event')
+        await page.goto('/live-view.html');
+    });
+
+    test('Sends pageview', async ({ page }) => {
+        await page.evaluate(() => window.dispatchEvent(new CustomEvent("phx:navigate", { detail: { href: "/navigate" } })))
+        const request = await plausibleRequestMock;
+        expect(request.postDataJSON().u).toEqual("/navigate")
+        expectCustomEvent(request, 'pageview', {})
+    });
+
+});