@guardian/ophan-tracker-js 2.2.1 → 2.2.3

package/NPM-dist/click-path-capture.js

@@ -43,6 +43,10 @@ if (typeof document.addEventListener === 'function') {
     document.addEventListener('click', function (e) {
         let anchorTarget, info;
         anchorTarget = validAncestorAnchorElement(e.target);
+        if (!anchorTarget) {
+            // If no anchor element was clicked, exit early.
+            return;
+        }
         info = {
             from: [location.protocol, '//', location.host, location.pathname].join(''),
             to: anchorTarget ? anchorTarget.href : void 0,

package/NPM-dist/tests/click-path-capture.test.js

@@ -1,12 +1,17 @@
-import clickPathCapture, { validAncestorAnchorElement, getContainingComponent } from '../click-path-capture.js';
+import clickPathCapture, { getContainingComponent, validAncestorAnchorElement } from '../click-path-capture.js';
+import ophan from '../core.js';
+import transmit from '../transmit.js';
 const { getDataLinkNames } = clickPathCapture;
 describe('click-path-capture.js', () => {
-    beforeAll(() => {
+    beforeEach(() => {
         document.body.innerHTML = `
             <div data-component="component1">
-                <a href="#" data-link-name="link1">
-                    <span id="testElement1"></span>
-                </a>
+                <div id="testElement4">
+                    <a href="#" data-link-name="link1" id="link1">
+                        <span id="testElement1"></span>
+                    </a>
+                    <span id="nonLinkElement">Non-link element</span>
+                </div>
             </div>
             <div id="testElement2" data-component="component2"></div>
         `;
@@ -30,6 +35,19 @@ describe('click-path-capture.js', () => {
             const element = document.createElement('div');
             expect(getContainingComponent(element)).toBeNull();
         });
+        test('should return the closest ancestor element with data-component attribute', () => {
+            document.body.innerHTML = `
+                <div data-component="outer-component">
+                    <div data-component="nested-component">
+                        <a href="#" data-link-name="link1" id="link1">
+                            <span id="testElement1"></span>
+                        </a>
+                    </div>
+                </div>
+            `;
+            const element = document.getElementById('testElement1');
+            expect(getContainingComponent(element)).toBe("nested-component");
+        });
     });
     describe('getDataLinkNames', () => {
         test('should collect data-link-name attributes from ancestors', () => {
@@ -41,4 +59,26 @@ describe('click-path-capture.js', () => {
             expect(getDataLinkNames(element)).toEqual([]);
         });
     });
+    describe('click event handling', () => {
+        let transmitSendMoreSpy, ophanStoreDataToSendOnNextEventSpy;
+        beforeEach(() => {
+            transmitSendMoreSpy = jest.spyOn(transmit, 'sendMore').mockImplementation(() => { });
+            ophanStoreDataToSendOnNextEventSpy = jest.spyOn(ophan, 'storeDataToSendOnNextEvent').mockImplementation(() => { });
+        });
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+        test('should send request and store data when a link is clicked', () => {
+            const element = document.getElementById('testElement1');
+            element.click();
+            expect(transmitSendMoreSpy).toHaveBeenCalled();
+            expect(ophanStoreDataToSendOnNextEventSpy).toHaveBeenCalled();
+        });
+        test('should not send request when a non-link element within a container is clicked', () => {
+            const element = document.getElementById('testElement4');
+            element.click();
+            expect(transmitSendMoreSpy).not.toHaveBeenCalled();
+            expect(ophanStoreDataToSendOnNextEventSpy).not.toHaveBeenCalled();
+        });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@guardian/ophan-tracker-js",
-	"version": "2.2.1",
+	"version": "2.2.3",
 	"type": "module",
 	"engines": {
 		"node": ">=16"

package/readme.md

@@ -42,7 +42,7 @@ You can see example usage of the library on theguardian.com [here](https://githu
 
 ### Usage with Typescript
 
-Refer to the type definitions within the library for the structure of valid tracking events.  The `ophan.record()` function accepts a type of `EventPayload` found [here]("./types/event.ts#L95"). 
+Refer to the type definitions within the library for the structure of valid tracking events.  The `ophan.record()` function accepts a type of `EventPayload` found [here]("https://github.com/guardian/ophan/blob/main/tracker-js/src/types/event.ts#L90"). 
 
 #### Example Usage